├── 01-typescript-basics-data-types ├── final │ ├── app.js │ ├── app.ts │ ├── index.html │ └── style.css └── start │ ├── index.html │ └── style.css ├── 02-typescript-compiler-configuration ├── final │ ├── demo.ts │ ├── dist │ │ ├── app.js │ │ ├── auth.js │ │ └── config │ │ │ └── config.js │ ├── index.html │ ├── src │ │ ├── app.ts │ │ ├── auth.ts │ │ └── config │ │ │ └── config.ts │ ├── style.css │ └── tsconfig.json └── start │ ├── app.ts │ ├── index.html │ └── style.css ├── 03-TypeScript-advance-es6-features ├── final │ ├── dist │ │ └── app.js │ ├── index.html │ ├── src │ │ └── app.ts │ ├── style.css │ └── tsconfig.json └── start │ ├── index.html │ ├── src │ └── app.ts │ ├── style.css │ └── tsconfig.json ├── 04-typescript-classes-and-functions ├── final │ ├── dist │ │ └── app.js │ ├── index.html │ ├── src │ │ └── app.ts │ ├── style.css │ └── tsconfig.json └── start │ ├── index.html │ ├── src │ └── app.ts │ ├── style.css │ └── tsconfig.json ├── 05-typescript-advanced-types ├── final │ ├── dist │ │ └── app.js │ ├── index.html │ ├── src │ │ └── app.ts │ ├── style.css │ └── tsconfig.json └── start │ ├── dist │ └── app.js │ ├── index.html │ ├── src │ └── app.ts │ ├── style.css │ └── tsconfig.json ├── 06-typescript-expense-tracker ├── final │ ├── dist │ │ └── app.js │ ├── index.html │ ├── src │ │ └── app.ts │ ├── style.css │ └── tsconfig.json └── start │ ├── dist │ └── app.js │ ├── index.html │ ├── src │ └── app.ts │ ├── style.css │ └── tsconfig.json ├── 07-typescript-decorators ├── final │ ├── dist │ │ └── app.js │ ├── index.html │ ├── src │ │ └── app.ts │ ├── style.css │ └── tsconfig.json └── start │ ├── index.html │ ├── src │ └── app.ts │ ├── style.css │ └── tsconfig.json └── 08-typesctipt-namespace ├── final ├── dist │ ├── app.js │ ├── models │ │ └── user.js │ └── userUtils │ │ └── user-actions.js ├── index.html ├── src │ ├── app.ts │ ├── models │ │ └── user.ts │ └── userUtils │ │ └── user-actions.ts ├── style.css └── tsconfig.json └── start ├── dist └── app.js ├── index.html ├── src └── app.ts ├── style.css └── tsconfig.json /01-typescript-basics-data-types/final/app.js: -------------------------------------------------------------------------------- 1 | /****************************************** 2 | * LECTURE 3: VARIABLES IN TYPESCRIPT 3 | *****************************************/ 4 | /*let num = 100; 5 | let Num = 1000; 6 | 7 | const str = 'Hello, World!';*/ 8 | /****************************************** 9 | * LECTURE 4: DATATYPES IN TYPESCRIPT 10 | *****************************************/ 11 | //1. STRING DATATYPE 12 | /*const str1 = 'This is a string created ${str2} using single quotes'; 13 | const str2 = "this is a string created using double quotes"; 14 | const str3 = `This is a string created 15 | using back ticks ${str1} 16 | this is another line`; 17 | 18 | console.log(str1); 19 | console.log(str3); 20 | 21 | //2. NUMBER TYPE 22 | let num = 12; //12.0 23 | const pi = 3.14; 24 | 25 | //3. BOOLEAN TYPE 26 | let isEligible = true; 27 | let isEqual = false; 28 | 29 | // console.log(Boolean(null)); 30 | // console.log(Boolean('Hello')); 31 | 32 | //0, '', null, undefined 33 | 34 | let isGreater = 10 < 15; 35 | console.log(isGreater);*/ 36 | /********************************************* 37 | * LECTURE 5: TYPE ASSIGNMENT & TYPE INFERANCE 38 | ********************************************/ 39 | /*function sum(num1: number, num2: number, isPrint: boolean, msg: string){ 40 | if(isPrint){ 41 | let s = num1 + num2; 42 | console.log(msg + ' ' + s); 43 | } 44 | return num1 + num2; 45 | } 46 | 47 | let n1 = 10; 48 | let n2 = 20; 49 | 50 | console.log(sum(n1, n2, true, "Sum is = "));*/ 51 | /********************************************* 52 | * LECTURE 6: OBJECT TYPE IN TYPESCRIPT 53 | ********************************************/ 54 | /*let person: { 55 | name: string; 56 | age: number; 57 | address: { 58 | city: string; 59 | country: string; 60 | } 61 | } = { 62 | name: 'John', 63 | age: 30, 64 | address: { 65 | city: 'london', 66 | country: 'UK' 67 | } 68 | } 69 | 70 | console.log(person.name); 71 | console.log(person["age"]);*/ 72 | /********************************************* 73 | * LECTURE 7: ARRAYS IN TYPESCRIPT 74 | ********************************************/ 75 | /*let person: (string | number)[] = ['john', 28, 'male', 1000]; 76 | let names: string[] = []; 77 | let birthyear: number[] = [1998, 1989, 2007]; 78 | 79 | names.push('john'); 80 | 81 | for(let year of birthyear){ 82 | console.log(year); 83 | }*/ 84 | /********************************************* 85 | * LECTURE 8: TUPLES IN TYPESCRIPT 86 | ********************************************/ 87 | /*let employee: [number, string, number, boolean] = [123, 'john', 2000, true]; 88 | 89 | employee = [124, 'mark', 1200, false]; 90 | 91 | console.log(employee);*/ 92 | /********************************************* 93 | * LECTURE 9: ENUMS IN TYPESCRIPT 94 | ********************************************/ 95 | /*enum Roles { 96 | ADMIN, 97 | READ_ONLY, 98 | WRITE_ONLY, 99 | READ_WRITE 100 | } 101 | 102 | const user = { 103 | name: 'john', 104 | age: 30, 105 | gender: 'male', 106 | role: Roles.ADMIN 107 | } 108 | 109 | if(user.role === Roles.ADMIN){ 110 | console.log('This user is an admin') 111 | }*/ 112 | /********************************************* 113 | * LECTURE 10: ANY TYPE IN TYPESCRIPT 114 | ********************************************/ 115 | /*let dynamicData: any; 116 | dynamicData = 100; 117 | 118 | let arr: any[]; 119 | arr =['Hello', 100, true, null, undefined]; 120 | 121 | let test; 122 | console.log(typeof test); 123 | console.log(test);*/ 124 | /********************************************* 125 | * LECTURE 11: UNION TYPE IN TYPESCRIPT 126 | ********************************************/ 127 | /*let user: {name: string; age: number} | null = null; 128 | 129 | function getUser(){ 130 | const uname = 'john'; 131 | const uage = 28; 132 | user = {name: uname, age: uage}; 133 | return user; 134 | } 135 | 136 | getUser(); 137 | 138 | function printStatus(message: string, code: string | number | boolean | null){ 139 | if(typeof code === 'string'){ 140 | console.log(`${message}. Status code: ${code.trim()}`); 141 | }else{ 142 | console.log(`${message}. Status code: ${code}`); 143 | } 144 | } 145 | 146 | printStatus('Request was successful', 200); 147 | printStatus('Resource was not found', '404'); 148 | printStatus('Resource was not found', ' 404');*/ 149 | /********************************************* 150 | * LECTURE 12: LITERAL TYPE IN TYPESCRIPT 151 | ********************************************/ 152 | /*const str = 'Hello, World!'; 153 | let str2 = 'Some string'; 154 | 155 | function roleMessage(role: 'admin' | 'read' | 'read-write'){ 156 | switch(role){ 157 | case 'admin': 158 | console.log('You have admin permission on this site.'); 159 | break; 160 | case 'read': 161 | console.log('You have read permission on this site'); 162 | break; 163 | case 'read-write': 164 | console.log('You have read / write permission on this site'); 165 | break; 166 | default: 167 | console.log('unknown user permission'); 168 | } 169 | } 170 | 171 | roleMessage('admin');*/ 172 | /********************************************* 173 | * LECTURE 13: UNDERSTANDING TYPE ALIAS 174 | ********************************************/ 175 | /*type stringType = string; 176 | let str: stringType = 'Hello'; 177 | 178 | type StringOrNumber = string | number; 179 | 180 | function printStatus(message: string, code: StringOrNumber){ 181 | if(typeof code === 'string'){ 182 | console.log(`${message}. Status code: ${code.trim()}`); 183 | }else{ 184 | console.log(`${message}. Status code: ${code}`); 185 | } 186 | } 187 | 188 | printStatus('Request was successful', 200); 189 | printStatus('Resource was not found', '404'); 190 | 191 | type roleType = 'admin' | 'read' | 'read-write'; 192 | function roleMessage(role: roleType){ 193 | switch(role){ 194 | case 'admin': 195 | console.log('You have admin permission on this site.'); 196 | break; 197 | case 'read': 198 | console.log('You have read permission on this site'); 199 | break; 200 | case 'read-write': 201 | console.log('You have read / write permission on this site'); 202 | break; 203 | default: 204 | console.log('unknown user permission'); 205 | } 206 | } 207 | 208 | roleMessage('admin'); 209 | 210 | type User = {firstname: string; lastname: string; age: number} 211 | 212 | function getFullName(user: User){ 213 | return user.firstname + ' ' + user.lastname; 214 | } 215 | 216 | function isEligibleForVoting(user: User){ 217 | return user.age >= 18; 218 | } 219 | 220 | let user: User = {firstname: 'john', lastname: 'smith', age: 32}; 221 | 222 | console.log(getFullName(user)); 223 | console.log(isEligibleForVoting(user));*/ 224 | /********************************************* 225 | * LECTURE 14: FUNCTION RETURN TYPE 226 | ********************************************/ 227 | /*function add(num1: number, num2: number): void{ 228 | console.log(num1 + num2); 229 | return; 230 | } 231 | 232 | console.log(add(12, 13));*/ 233 | /********************************************* 234 | * LECTURE 15: FUNCTION AS TYPE 235 | ********************************************/ 236 | /*type User = {name: string; age: number}; 237 | 238 | function greetUser(user: User){ 239 | const greetmsg = 'Hello, ' + user.name; 240 | console.log(greetmsg); 241 | } 242 | 243 | function sum(num1: number, num2: number){ 244 | return num1 + num2; 245 | } 246 | 247 | function isEligible(user: User){ 248 | console.log(user.age >= 18) 249 | } 250 | 251 | let greet: (usr: User) => void; 252 | greet = greetUser; 253 | 254 | let user = {name: 'john', age: 28}; 255 | greet(user); 256 | 257 | // greet = sum; 258 | // greet(user); 259 | 260 | greet = isEligible; 261 | greet(user);*/ 262 | /********************************************* 263 | * LECTURE 16: FUNCTION TYPE FOR CALLBACK 264 | ********************************************/ 265 | /*let addNumbers: (n1: number, n2: number) => number; 266 | 267 | function sum(num1: number, num2: number){ 268 | return num1 + num2; 269 | } 270 | 271 | function add(num1: number, num2: number){ 272 | console.log(num1 + num2); 273 | } 274 | 275 | addNumbers = sum; //works 276 | addNumbers = add; //Error 277 | 278 | function getResult(num1: number, num2: number, print: (str: string, n: number) => void){ 279 | const result = num1 + num2; 280 | print('Sum = ', result); 281 | } 282 | 283 | function display(msg: string, result: number){ 284 | console.log(msg + result); 285 | } 286 | 287 | getResult(12, 13, display);*/ 288 | /********************************************* 289 | * LECTURE 17: UNION TYPE IN TYPESCRIPT 290 | ********************************************/ 291 | /*let inputVal: unknown; 292 | let uname: string = 'Something'; 293 | 294 | inputVal = 100; 295 | inputVal = 'Hello, world'; 296 | 297 | if(typeof inputVal === 'string' ){ 298 | uname = inputVal; 299 | } 300 | 301 | console.log(uname); 302 | console.log(typeof inputVal);*/ 303 | /********************************************* 304 | * LECTURE 18: NEVER TYPE IN TYPESCRIPT 305 | ********************************************/ 306 | function greetUser(name) { 307 | console.log('Hello, ' + name); 308 | } 309 | //greetUser('John'); 310 | function createerror(errormsg, errorCode) { 311 | throw { message: errormsg, code: errorCode }; 312 | } 313 | //createerror('Internal server error', 500); 314 | console.log(greetUser('Mark')); 315 | console.log(createerror('Page not found', 404)); 316 | -------------------------------------------------------------------------------- /01-typescript-basics-data-types/final/app.ts: -------------------------------------------------------------------------------- 1 | /****************************************** 2 | * LECTURE 3: VARIABLES IN TYPESCRIPT 3 | *****************************************/ 4 | /*let num = 100; 5 | let Num = 1000; 6 | 7 | const str = 'Hello, World!';*/ 8 | 9 | /****************************************** 10 | * LECTURE 4: DATATYPES IN TYPESCRIPT 11 | *****************************************/ 12 | 13 | //1. STRING DATATYPE 14 | /*const str1 = 'This is a string created ${str2} using single quotes'; 15 | const str2 = "this is a string created using double quotes"; 16 | const str3 = `This is a string created 17 | using back ticks ${str1} 18 | this is another line`; 19 | 20 | console.log(str1); 21 | console.log(str3); 22 | 23 | //2. NUMBER TYPE 24 | let num = 12; //12.0 25 | const pi = 3.14; 26 | 27 | //3. BOOLEAN TYPE 28 | let isEligible = true; 29 | let isEqual = false; 30 | 31 | // console.log(Boolean(null)); 32 | // console.log(Boolean('Hello')); 33 | 34 | //0, '', null, undefined 35 | 36 | let isGreater = 10 < 15; 37 | console.log(isGreater);*/ 38 | 39 | /********************************************* 40 | * LECTURE 5: TYPE ASSIGNMENT & TYPE INFERANCE 41 | ********************************************/ 42 | 43 | /*function sum(num1: number, num2: number, isPrint: boolean, msg: string){ 44 | if(isPrint){ 45 | let s = num1 + num2; 46 | console.log(msg + ' ' + s); 47 | } 48 | return num1 + num2; 49 | } 50 | 51 | let n1 = 10; 52 | let n2 = 20; 53 | 54 | console.log(sum(n1, n2, true, "Sum is = "));*/ 55 | 56 | /********************************************* 57 | * LECTURE 6: OBJECT TYPE IN TYPESCRIPT 58 | ********************************************/ 59 | 60 | /*let person: { 61 | name: string; 62 | age: number; 63 | address: { 64 | city: string; 65 | country: string; 66 | } 67 | } = { 68 | name: 'John', 69 | age: 30, 70 | address: { 71 | city: 'london', 72 | country: 'UK' 73 | } 74 | } 75 | 76 | console.log(person.name); 77 | console.log(person["age"]);*/ 78 | 79 | 80 | /********************************************* 81 | * LECTURE 7: ARRAYS IN TYPESCRIPT 82 | ********************************************/ 83 | /*let person: (string | number)[] = ['john', 28, 'male', 1000]; 84 | let names: string[] = []; 85 | let birthyear: number[] = [1998, 1989, 2007]; 86 | 87 | names.push('john'); 88 | 89 | for(let year of birthyear){ 90 | console.log(year); 91 | }*/ 92 | 93 | 94 | /********************************************* 95 | * LECTURE 8: TUPLES IN TYPESCRIPT 96 | ********************************************/ 97 | /*let employee: [number, string, number, boolean] = [123, 'john', 2000, true]; 98 | 99 | employee = [124, 'mark', 1200, false]; 100 | 101 | console.log(employee);*/ 102 | 103 | 104 | /********************************************* 105 | * LECTURE 9: ENUMS IN TYPESCRIPT 106 | ********************************************/ 107 | /*enum Roles { 108 | ADMIN, 109 | READ_ONLY, 110 | WRITE_ONLY, 111 | READ_WRITE 112 | } 113 | 114 | const user = { 115 | name: 'john', 116 | age: 30, 117 | gender: 'male', 118 | role: Roles.ADMIN 119 | } 120 | 121 | if(user.role === Roles.ADMIN){ 122 | console.log('This user is an admin') 123 | }*/ 124 | 125 | 126 | /********************************************* 127 | * LECTURE 10: ANY TYPE IN TYPESCRIPT 128 | ********************************************/ 129 | /*let dynamicData: any; 130 | dynamicData = 100; 131 | 132 | let arr: any[]; 133 | arr =['Hello', 100, true, null, undefined]; 134 | 135 | let test; 136 | console.log(typeof test); 137 | console.log(test);*/ 138 | 139 | 140 | /********************************************* 141 | * LECTURE 11: UNION TYPE IN TYPESCRIPT 142 | ********************************************/ 143 | /*let user: {name: string; age: number} | null = null; 144 | 145 | function getUser(){ 146 | const uname = 'john'; 147 | const uage = 28; 148 | user = {name: uname, age: uage}; 149 | return user; 150 | } 151 | 152 | getUser(); 153 | 154 | function printStatus(message: string, code: string | number | boolean | null){ 155 | if(typeof code === 'string'){ 156 | console.log(`${message}. Status code: ${code.trim()}`); 157 | }else{ 158 | console.log(`${message}. Status code: ${code}`); 159 | } 160 | } 161 | 162 | printStatus('Request was successful', 200); 163 | printStatus('Resource was not found', '404'); 164 | printStatus('Resource was not found', ' 404');*/ 165 | 166 | 167 | /********************************************* 168 | * LECTURE 12: LITERAL TYPE IN TYPESCRIPT 169 | ********************************************/ 170 | /*const str = 'Hello, World!'; 171 | let str2 = 'Some string'; 172 | 173 | function roleMessage(role: 'admin' | 'read' | 'read-write'){ 174 | switch(role){ 175 | case 'admin': 176 | console.log('You have admin permission on this site.'); 177 | break; 178 | case 'read': 179 | console.log('You have read permission on this site'); 180 | break; 181 | case 'read-write': 182 | console.log('You have read / write permission on this site'); 183 | break; 184 | default: 185 | console.log('unknown user permission'); 186 | } 187 | } 188 | 189 | roleMessage('admin');*/ 190 | 191 | 192 | /********************************************* 193 | * LECTURE 13: UNDERSTANDING TYPE ALIAS 194 | ********************************************/ 195 | /*type stringType = string; 196 | let str: stringType = 'Hello'; 197 | 198 | type StringOrNumber = string | number; 199 | 200 | function printStatus(message: string, code: StringOrNumber){ 201 | if(typeof code === 'string'){ 202 | console.log(`${message}. Status code: ${code.trim()}`); 203 | }else{ 204 | console.log(`${message}. Status code: ${code}`); 205 | } 206 | } 207 | 208 | printStatus('Request was successful', 200); 209 | printStatus('Resource was not found', '404'); 210 | 211 | type roleType = 'admin' | 'read' | 'read-write'; 212 | function roleMessage(role: roleType){ 213 | switch(role){ 214 | case 'admin': 215 | console.log('You have admin permission on this site.'); 216 | break; 217 | case 'read': 218 | console.log('You have read permission on this site'); 219 | break; 220 | case 'read-write': 221 | console.log('You have read / write permission on this site'); 222 | break; 223 | default: 224 | console.log('unknown user permission'); 225 | } 226 | } 227 | 228 | roleMessage('admin'); 229 | 230 | type User = {firstname: string; lastname: string; age: number} 231 | 232 | function getFullName(user: User){ 233 | return user.firstname + ' ' + user.lastname; 234 | } 235 | 236 | function isEligibleForVoting(user: User){ 237 | return user.age >= 18; 238 | } 239 | 240 | let user: User = {firstname: 'john', lastname: 'smith', age: 32}; 241 | 242 | console.log(getFullName(user)); 243 | console.log(isEligibleForVoting(user));*/ 244 | 245 | 246 | /********************************************* 247 | * LECTURE 14: FUNCTION RETURN TYPE 248 | ********************************************/ 249 | 250 | /*function add(num1: number, num2: number): void{ 251 | console.log(num1 + num2); 252 | return; 253 | } 254 | 255 | console.log(add(12, 13));*/ 256 | 257 | 258 | /********************************************* 259 | * LECTURE 15: FUNCTION AS TYPE 260 | ********************************************/ 261 | /*type User = {name: string; age: number}; 262 | 263 | function greetUser(user: User){ 264 | const greetmsg = 'Hello, ' + user.name; 265 | console.log(greetmsg); 266 | } 267 | 268 | function sum(num1: number, num2: number){ 269 | return num1 + num2; 270 | } 271 | 272 | function isEligible(user: User){ 273 | console.log(user.age >= 18) 274 | } 275 | 276 | let greet: (usr: User) => void; 277 | greet = greetUser; 278 | 279 | let user = {name: 'john', age: 28}; 280 | greet(user); 281 | 282 | // greet = sum; 283 | // greet(user); 284 | 285 | greet = isEligible; 286 | greet(user);*/ 287 | 288 | 289 | /********************************************* 290 | * LECTURE 16: FUNCTION TYPE FOR CALLBACK 291 | ********************************************/ 292 | /*let addNumbers: (n1: number, n2: number) => number; 293 | 294 | function sum(num1: number, num2: number){ 295 | return num1 + num2; 296 | } 297 | 298 | function add(num1: number, num2: number){ 299 | console.log(num1 + num2); 300 | } 301 | 302 | addNumbers = sum; //works 303 | addNumbers = add; //Error 304 | 305 | function getResult(num1: number, num2: number, print: (str: string, n: number) => void){ 306 | const result = num1 + num2; 307 | print('Sum = ', result); 308 | } 309 | 310 | function display(msg: string, result: number){ 311 | console.log(msg + result); 312 | } 313 | 314 | getResult(12, 13, display);*/ 315 | 316 | 317 | /********************************************* 318 | * LECTURE 17: UNION TYPE IN TYPESCRIPT 319 | ********************************************/ 320 | /*let inputVal: unknown; 321 | let uname: string = 'Something'; 322 | 323 | inputVal = 100; 324 | inputVal = 'Hello, world'; 325 | 326 | if(typeof inputVal === 'string' ){ 327 | uname = inputVal; 328 | } 329 | 330 | console.log(uname); 331 | console.log(typeof inputVal);*/ 332 | 333 | /********************************************* 334 | * LECTURE 18: NEVER TYPE IN TYPESCRIPT 335 | ********************************************/ 336 | function greetUser(name: string): void{ 337 | console.log('Hello, ' + name); 338 | } 339 | //greetUser('John'); 340 | 341 | function createerror(errormsg: string, errorCode: number): never{ 342 | throw {message: errormsg, code: errorCode} 343 | } 344 | //createerror('Internal server error', 500); 345 | 346 | 347 | console.log(greetUser('Mark')); 348 | console.log(createerror('Page not found', 404)); -------------------------------------------------------------------------------- /01-typescript-basics-data-types/final/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 |

A Complete TypeScript Course

12 |
13 |
14 |

Fundamentals of TypeScript

15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /01-typescript-basics-data-types/final/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0px; 3 | padding: 0px; 4 | box-sizing: border-box; 5 | } 6 | body{ 7 | background-color: #28282B; 8 | color: white; 9 | font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', Verdana, sans-serif; 10 | } 11 | .app-header{ 12 | box-shadow: rgb(196, 190, 190) 0px 2px 8px 0px; 13 | padding: 15px 30px; 14 | } 15 | .app-topic{ 16 | padding: 30px 30px; 17 | margin: 50px 50px; 18 | box-shadow: rgba(64, 211, 105, 0.35) 0px 5px 15px; 19 | background-color: #2ECC71; 20 | text-align: center; 21 | } -------------------------------------------------------------------------------- /01-typescript-basics-data-types/start/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 |

A Complete TypeScript Course

12 |
13 |
14 |

Fundamentals of TypeScript

15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /01-typescript-basics-data-types/start/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0px; 3 | padding: 0px; 4 | box-sizing: border-box; 5 | } 6 | body{ 7 | background-color: #28282B; 8 | color: white; 9 | font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', Verdana, sans-serif; 10 | } 11 | .app-header{ 12 | box-shadow: rgb(196, 190, 190) 0px 2px 8px 0px; 13 | padding: 15px 30px; 14 | } 15 | .app-topic{ 16 | padding: 30px 30px; 17 | margin: 50px 50px; 18 | box-shadow: rgba(64, 211, 105, 0.35) 0px 5px 15px; 19 | background-color: #2ECC71; 20 | text-align: center; 21 | } -------------------------------------------------------------------------------- /02-typescript-compiler-configuration/final/demo.ts: -------------------------------------------------------------------------------- 1 | console.log('Demo file called'); -------------------------------------------------------------------------------- /02-typescript-compiler-configuration/final/dist/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | const button = document.getElementById('btn'); 3 | function clickHandler(message) { 4 | console.log(message); 5 | } 6 | button.addEventListener('click', clickHandler.bind(null, 'Button is clicked')); 7 | const map = new Map(); 8 | -------------------------------------------------------------------------------- /02-typescript-compiler-configuration/final/dist/auth.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | let data = 'Some value'; 3 | function sum(num1, num2) { 4 | const result = num1 + num2; 5 | return result; 6 | } 7 | sum(20, 200); 8 | -------------------------------------------------------------------------------- /02-typescript-compiler-configuration/final/dist/config/config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | console.log('Config file called'); 3 | -------------------------------------------------------------------------------- /02-typescript-compiler-configuration/final/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 |

A Complete TypeScript Course

12 |
13 |
14 |

TypeScript Compiler Configuration

15 | 16 |
17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /02-typescript-compiler-configuration/final/src/app.ts: -------------------------------------------------------------------------------- 1 | const button = document.getElementById('btn')!; 2 | 3 | function clickHandler(message: string){ 4 | console.log(message); 5 | } 6 | 7 | button.addEventListener('click', clickHandler.bind(null, 'Button is clicked')) 8 | 9 | const map = new Map(); -------------------------------------------------------------------------------- /02-typescript-compiler-configuration/final/src/auth.ts: -------------------------------------------------------------------------------- 1 | 2 | let data = 'Some value'; 3 | 4 | function sum(num1: number, num2: number){ 5 | if(num1 > 0 && num2 > 0){ 6 | const result = num1 + num2; 7 | return result; 8 | }else{ 9 | console.log('Numbers must be greater than zero') 10 | return; 11 | } 12 | } 13 | 14 | sum(20, 200); -------------------------------------------------------------------------------- /02-typescript-compiler-configuration/final/src/config/config.ts: -------------------------------------------------------------------------------- 1 | console.log('Config file called'); -------------------------------------------------------------------------------- /02-typescript-compiler-configuration/final/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0px; 3 | padding: 0px; 4 | box-sizing: border-box; 5 | } 6 | body{ 7 | background-color: #28282B; 8 | color: white; 9 | font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', Verdana, sans-serif; 10 | } 11 | .app-header{ 12 | box-shadow: rgb(196, 190, 190) 0px 2px 8px 0px; 13 | padding: 15px 30px; 14 | } 15 | .app-topic{ 16 | padding: 30px 30px; 17 | margin: 50px 50px; 18 | box-shadow: rgba(64, 211, 105, 0.35) 0px 5px 15px; 19 | background-color: #2ECC71; 20 | text-align: center; 21 | } -------------------------------------------------------------------------------- /02-typescript-compiler-configuration/start/app.ts: -------------------------------------------------------------------------------- 1 | console.log('TypeScript Compiler Configuration') -------------------------------------------------------------------------------- /02-typescript-compiler-configuration/start/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 |

A Complete TypeScript Course

12 |
13 |
14 |

TypeScript Compiler Configuration

15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /02-typescript-compiler-configuration/start/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0px; 3 | padding: 0px; 4 | box-sizing: border-box; 5 | } 6 | body{ 7 | background-color: #28282B; 8 | color: white; 9 | font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', Verdana, sans-serif; 10 | } 11 | .app-header{ 12 | box-shadow: rgb(196, 190, 190) 0px 2px 8px 0px; 13 | padding: 15px 30px; 14 | } 15 | .app-topic{ 16 | padding: 30px 30px; 17 | margin: 50px 50px; 18 | box-shadow: rgba(64, 211, 105, 0.35) 0px 5px 15px; 19 | background-color: #2ECC71; 20 | text-align: center; 21 | } -------------------------------------------------------------------------------- /03-TypeScript-advance-es6-features/final/dist/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | /**************************************************** 3 | * ********LECTURE 28: ARRAY DESTRUCTURING*********** 4 | * *************************************************/ 5 | /*const person = ['John', 'Smith', 28]; 6 | 7 | const [fname, lmane,age, gender = 'male'] = person; 8 | console.log(fname, age, gender); 9 | console.log(person);*/ 10 | /**************************************************** 11 | * ********LECTURE 29: OBJECT DESTRUCTURING********** 12 | * **************************************************/ 13 | /*const user = { 14 | forename: 'John', 15 | age: 28, 16 | gender: 'male', 17 | city: 'london' 18 | } 19 | 20 | const {forename: fname, age, gender} = user; 21 | console.log(fname, age, gender);*/ 22 | /**************************************************** 23 | * ********LECTURE 30: SPREAD OPERATOR*************** 24 | * **************************************************/ 25 | /*const users: string[] = ['john', 'mark', 'merry']; 26 | console.log(users); 27 | console.log(...users); 28 | 29 | //Creating a shalow copy of array 30 | const copyArray = [...users]; 31 | copyArray.push('steve'); 32 | console.log(copyArray); 33 | 34 | //Creating an array from existing array 35 | const extendedUsers: string[] = ['Ravi', 'steve', ...users] 36 | console.log(extendedUsers); 37 | 38 | //spread operator on objects 39 | const person = { 40 | fname: 'john', 41 | age: 28, 42 | gender: 'male' 43 | } 44 | 45 | const employee = {...person, salary: 1200, company: 'Google'}; 46 | console.log(employee);*/ 47 | /**************************************************** 48 | * ****LECTURE 31: REST PATTERN & REST PARAMETER***** 49 | * **************************************************/ 50 | /*let [a, b, ...rest] = [1, 2, 3, 4, 5]; 51 | //console.log(rest); 52 | 53 | let arr = [10, 20, ...rest]; 54 | //console.log(arr); 55 | 56 | function addNumbers(...numbers: number[]){ 57 | let count = 0; 58 | for(let i of numbers){ 59 | count += i; 60 | } 61 | return count; 62 | } 63 | 64 | console.log(addNumbers(1, 2)); 65 | console.log(addNumbers(1, 2, 5, 7)); 66 | console.log(addNumbers(1, 2, 5, 6, 7, 9));*/ 67 | /**************************************************** 68 | * ****LECTURE 32: THE NULLISH COALESCING OPERATOR*** 69 | * **************************************************/ 70 | /*const value = 'VALID VALUE'; 71 | 72 | let storage = value ?? 'DEFAULT'; 73 | 74 | console.log(storage);*/ 75 | /**************************************************** 76 | * **********LECTURE 33: OPTIONAL CHAINING*********** 77 | * **************************************************/ 78 | /*const products = [ 79 | {name: 'iPhone', price: 1200, details: {color: 'black', ram: 8}}, 80 | {name: 'T-Shirt', price: 120, details: {color: 'red', size: 32}}, 81 | {name: 'TS Book', price: 50, pages: 120, author: 'Sam'} 82 | ] 83 | 84 | for(let prod of products){ 85 | console.log('Product name: ' + prod.name); 86 | console.log('**************************') 87 | console.log('product price: ' + prod.price); 88 | console.log('Color: ' + prod.details?.color); 89 | console.log('\n\n'); 90 | }*/ 91 | /**************************************************** 92 | * **********LECTURE 34: ARROW FUNCTION************** 93 | * **************************************************/ 94 | //FUNCTION DECLARATION 95 | /*function print(message: string){ 96 | console.log(message); 97 | } 98 | 99 | //FUNCTION EXPRESSION 100 | // const sum = function(num1: number, num2: number){ 101 | // return num1 + num2; 102 | // } 103 | 104 | //const sum: (n: number) => number = num1 => num1 + 10; 105 | const button = document.getElementById('btn'); 106 | button?.addEventListener('click', () => { 107 | console.log('button clicked'); 108 | });*/ 109 | /**************************************************** 110 | * ******LECTURE 35: DEFAULT FUNCTION PARAMETER****** 111 | * **************************************************/ 112 | function printDetails(name, age, gender = 'male') { 113 | const message = `Hi! my name is ${name}. And i am ${age} 114 | years old ${gender}`; 115 | console.log(message); 116 | } 117 | printDetails('john', 28); 118 | -------------------------------------------------------------------------------- /03-TypeScript-advance-es6-features/final/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 |

A Complete TypeScript Course

12 |
13 |
14 |

TypeScript Advance ES6 Features

15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /03-TypeScript-advance-es6-features/final/src/app.ts: -------------------------------------------------------------------------------- 1 | /**************************************************** 2 | * ********LECTURE 28: ARRAY DESTRUCTURING*********** 3 | * *************************************************/ 4 | /*const person = ['John', 'Smith', 28]; 5 | 6 | const [fname, lmane,age, gender = 'male'] = person; 7 | console.log(fname, age, gender); 8 | console.log(person);*/ 9 | 10 | /**************************************************** 11 | * ********LECTURE 29: OBJECT DESTRUCTURING********** 12 | * **************************************************/ 13 | /*const user = { 14 | forename: 'John', 15 | age: 28, 16 | gender: 'male', 17 | city: 'london' 18 | } 19 | 20 | const {forename: fname, age, gender} = user; 21 | console.log(fname, age, gender);*/ 22 | 23 | /**************************************************** 24 | * ********LECTURE 30: SPREAD OPERATOR*************** 25 | * **************************************************/ 26 | /*const users: string[] = ['john', 'mark', 'merry']; 27 | console.log(users); 28 | console.log(...users); 29 | 30 | //Creating a shalow copy of array 31 | const copyArray = [...users]; 32 | copyArray.push('steve'); 33 | console.log(copyArray); 34 | 35 | //Creating an array from existing array 36 | const extendedUsers: string[] = ['Ravi', 'steve', ...users] 37 | console.log(extendedUsers); 38 | 39 | //spread operator on objects 40 | const person = { 41 | fname: 'john', 42 | age: 28, 43 | gender: 'male' 44 | } 45 | 46 | const employee = {...person, salary: 1200, company: 'Google'}; 47 | console.log(employee);*/ 48 | 49 | 50 | /**************************************************** 51 | * ****LECTURE 31: REST PATTERN & REST PARAMETER***** 52 | * **************************************************/ 53 | /*let [a, b, ...rest] = [1, 2, 3, 4, 5]; 54 | //console.log(rest); 55 | 56 | let arr = [10, 20, ...rest]; 57 | //console.log(arr); 58 | 59 | function addNumbers(...numbers: number[]){ 60 | let count = 0; 61 | for(let i of numbers){ 62 | count += i; 63 | } 64 | return count; 65 | } 66 | 67 | console.log(addNumbers(1, 2)); 68 | console.log(addNumbers(1, 2, 5, 7)); 69 | console.log(addNumbers(1, 2, 5, 6, 7, 9));*/ 70 | 71 | 72 | 73 | 74 | /**************************************************** 75 | * ****LECTURE 32: THE NULLISH COALESCING OPERATOR*** 76 | * **************************************************/ 77 | /*const value = 'VALID VALUE'; 78 | 79 | let storage = value ?? 'DEFAULT'; 80 | 81 | console.log(storage);*/ 82 | 83 | 84 | 85 | /**************************************************** 86 | * **********LECTURE 33: OPTIONAL CHAINING*********** 87 | * **************************************************/ 88 | /*const products = [ 89 | {name: 'iPhone', price: 1200, details: {color: 'black', ram: 8}}, 90 | {name: 'T-Shirt', price: 120, details: {color: 'red', size: 32}}, 91 | {name: 'TS Book', price: 50, pages: 120, author: 'Sam'} 92 | ] 93 | 94 | for(let prod of products){ 95 | console.log('Product name: ' + prod.name); 96 | console.log('**************************') 97 | console.log('product price: ' + prod.price); 98 | console.log('Color: ' + prod.details?.color); 99 | console.log('\n\n'); 100 | }*/ 101 | 102 | /**************************************************** 103 | * **********LECTURE 34: ARROW FUNCTION************** 104 | * **************************************************/ 105 | //FUNCTION DECLARATION 106 | /*function print(message: string){ 107 | console.log(message); 108 | } 109 | 110 | //FUNCTION EXPRESSION 111 | // const sum = function(num1: number, num2: number){ 112 | // return num1 + num2; 113 | // } 114 | 115 | //const sum: (n: number) => number = num1 => num1 + 10; 116 | const button = document.getElementById('btn'); 117 | button?.addEventListener('click', () => { 118 | console.log('button clicked'); 119 | });*/ 120 | 121 | 122 | 123 | 124 | 125 | /**************************************************** 126 | * ******LECTURE 35: DEFAULT FUNCTION PARAMETER****** 127 | * **************************************************/ 128 | function printDetails(name: string, age: number, gender: string = 'male'){ 129 | const message = `Hi! my name is ${name}. And i am ${age} 130 | years old ${gender}`; 131 | 132 | console.log(message); 133 | } 134 | 135 | printDetails('john', 28); 136 | -------------------------------------------------------------------------------- /03-TypeScript-advance-es6-features/final/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0px; 3 | padding: 0px; 4 | box-sizing: border-box; 5 | } 6 | body{ 7 | background-color: #28282B; 8 | color: white; 9 | font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', Verdana, sans-serif; 10 | } 11 | .app-header{ 12 | box-shadow: rgb(196, 190, 190) 0px 2px 8px 0px; 13 | padding: 15px 30px; 14 | } 15 | .app-topic{ 16 | padding: 30px 30px; 17 | margin: 50px 50px; 18 | box-shadow: rgba(64, 211, 105, 0.35) 0px 5px 15px; 19 | background-color: #2ECC71; 20 | text-align: center; 21 | } -------------------------------------------------------------------------------- /03-TypeScript-advance-es6-features/start/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 |

A Complete TypeScript Course

12 |
13 |
14 |

TypeScript Advance ES6 Features

15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /03-TypeScript-advance-es6-features/start/src/app.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/typescript-complete-course/09193b1ed6d6243509b1b2de2061f7380ea948d9/03-TypeScript-advance-es6-features/start/src/app.ts -------------------------------------------------------------------------------- /03-TypeScript-advance-es6-features/start/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0px; 3 | padding: 0px; 4 | box-sizing: border-box; 5 | } 6 | body{ 7 | background-color: #28282B; 8 | color: white; 9 | font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', Verdana, sans-serif; 10 | } 11 | .app-header{ 12 | box-shadow: rgb(196, 190, 190) 0px 2px 8px 0px; 13 | padding: 15px 30px; 14 | } 15 | .app-topic{ 16 | padding: 30px 30px; 17 | margin: 50px 50px; 18 | box-shadow: rgba(64, 211, 105, 0.35) 0px 5px 15px; 19 | background-color: #2ECC71; 20 | text-align: center; 21 | } -------------------------------------------------------------------------------- /04-typescript-classes-and-functions/final/dist/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | /*************************************************** 3 | * ******LECTURE 37: CREATING & USING CLASS********* 4 | ***************************************************/ 5 | /*class User{ 6 | firstname: string; 7 | lastname: string; 8 | age: number; 9 | gender: string; 10 | 11 | constructor(fn: string, ln: string, a: number, g: string){ 12 | this.firstname = fn; 13 | this.lastname = ln; 14 | this.age = a; 15 | this.gender = g; 16 | } 17 | 18 | greetuser(salutation: string){ 19 | const msg = 'Hello ' + salutation+'. ' + this.firstname + ' ' + this.lastname; 20 | console.log(msg) 21 | } 22 | } 23 | 24 | const user1 = new User('john', 'smith', 28, 'male'); 25 | const user2 = new User('merry', 'jane', 32, 'female'); 26 | const user3 = new User('mark', 'vought', 29, 'male'); 27 | 28 | user1.greetuser('Mr'); 29 | user2.greetuser('Mrs'); 30 | 31 | // console.log(user1); 32 | // console.log(user2); 33 | // console.log(user3);*/ 34 | var add; 35 | add = function (n1, n2) { 36 | return n1 + n2; 37 | }; 38 | -------------------------------------------------------------------------------- /04-typescript-classes-and-functions/final/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 |

A Complete TypeScript Course

12 |
13 |
14 |

TypeScript Classes & Interface

15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /04-typescript-classes-and-functions/final/src/app.ts: -------------------------------------------------------------------------------- 1 | /*************************************************** 2 | * ******LECTURE 37: CREATING & USING CLASS********* 3 | ***************************************************/ 4 | /*class User{ 5 | firstname: string; 6 | lastname: string; 7 | age: number; 8 | gender: string; 9 | 10 | constructor(fn: string, ln: string, a: number, g: string){ 11 | this.firstname = fn; 12 | this.lastname = ln; 13 | this.age = a; 14 | this.gender = g; 15 | } 16 | 17 | greetuser(salutation: string){ 18 | const msg = 'Hello ' + salutation+'. ' + this.firstname + ' ' + this.lastname; 19 | console.log(msg) 20 | } 21 | } 22 | 23 | const user1 = new User('john', 'smith', 28, 'male'); 24 | const user2 = new User('merry', 'jane', 32, 'female'); 25 | const user3 = new User('mark', 'vought', 29, 'male'); 26 | 27 | user1.greetuser('Mr'); 28 | user2.greetuser('Mrs'); 29 | 30 | // console.log(user1); 31 | // console.log(user2); 32 | // console.log(user3);*/ 33 | 34 | 35 | 36 | /*************************************************** 37 | * *********LECTURE 39: ACCESS MODIFIERS************ 38 | ***************************************************/ 39 | 40 | 41 | /*class Employee{ 42 | constructor(public empName: string, private salary: number, public baseLocation: string, public isEligible: boolean, private hikePercent: number, public readonly empId: number){ 43 | } 44 | 45 | public getSalary(){ 46 | if(this.isEligible){ 47 | return this.getNewsalary() 48 | } 49 | return this.salary; 50 | } 51 | 52 | private getNewsalary(){ 53 | return this.salary + this.salary * this.hikePercent / 100; 54 | } 55 | } 56 | 57 | const employee = new Employee('john smith', 10000, 'london', true, 20, 101); 58 | console.log(employee.getSalary()); 59 | employee.empId = 200; 60 | console.log(employee.empId)*/ 61 | 62 | 63 | 64 | /*************************************************** 65 | * *********LECTURE 32: INHERITANCE***************** 66 | ***************************************************/ 67 | /*class Person{ 68 | name: string; 69 | protected dob: string; 70 | gender: string; 71 | 72 | constructor(name: string, dob: string, gender: string){ 73 | this.name = name; 74 | this.dob = dob; 75 | this.gender = gender; 76 | } 77 | 78 | calculateAge(){ 79 | console.log('Calculate Age of Person called'); 80 | return new Date().getFullYear() - new Date(this.dob).getFullYear(); 81 | } 82 | } 83 | 84 | class Employee extends Person{ 85 | salary: number; 86 | bonus: number; 87 | 88 | constructor(n: string, dob: string, gen: string, salary: number, bonus: number){ 89 | super(n, dob, gen); 90 | this.salary = salary; 91 | this.bonus = bonus; 92 | } 93 | 94 | getSalary(){ 95 | return this.salary + this.bonus; 96 | } 97 | 98 | calculateAge(): number { 99 | console.log('Calculate Age of Employee called'); 100 | return 2024 - new Date(this.dob).getFullYear(); 101 | } 102 | } 103 | 104 | const emp = new Employee('john', '08-30-1991', 'male', 10000, 2000); 105 | console.log(emp.calculateAge());*/ 106 | 107 | 108 | /*************************************************** 109 | * *********LECTURE 44: GETTER & SETTER************* 110 | ***************************************************/ 111 | 112 | /*class Person{ 113 | public name: string; 114 | private _age: number | null = null; 115 | 116 | get age(){ 117 | if(this._age != null){ 118 | return this._age; 119 | } 120 | throw new Error('Age is not defined for person: ' + this.name) 121 | 122 | } 123 | 124 | set age(value: number){ 125 | if(value > 0) 126 | this._age = value; 127 | else 128 | throw new Error('Age cannot be a negative value.') 129 | } 130 | 131 | constructor(name: string){ 132 | this.name = name; 133 | } 134 | } 135 | 136 | const person = new Person('john'); 137 | person.age = -10; 138 | console.log(person.age); 139 | 140 | class Circle{ 141 | private _radius: number; 142 | 143 | get radius() { 144 | return this._radius; 145 | } 146 | 147 | set radius(value: number) { 148 | this._radius = value; 149 | } 150 | 151 | get diameter(){ 152 | return this._radius * 2; 153 | } 154 | 155 | set diameter(value: number){ 156 | this._radius = value / 2; 157 | } 158 | }*/ 159 | 160 | 161 | /*************************************************** 162 | * ****LECTURE 45: STATIC METHODS & PROPERTIES****** 163 | ***************************************************/ 164 | /*class Employee{ 165 | public firstname: string; 166 | public lastname: string; 167 | public static count: number = 0; 168 | 169 | constructor(firstname: string, lastname: string){ 170 | this.firstname = firstname; 171 | this.lastname = lastname; 172 | Employee.count++; 173 | } 174 | 175 | static sayHello(){ 176 | return 'Hi There!'; 177 | } 178 | } 179 | 180 | const emp1 = new Employee('john', 'smith'); 181 | console.log(Employee.count); 182 | 183 | const emp2 = new Employee('john', 'smith'); 184 | console.log(Employee.count); 185 | 186 | const emp3 = new Employee('john', 'smith'); 187 | console.log(Employee.count); 188 | 189 | console.log(Employee.sayHello());*/ 190 | 191 | 192 | 193 | /*************************************************** 194 | * ****LECTURE 45: STATIC METHODS & PROPERTIES****** 195 | ***************************************************/ 196 | /*abstract class Employee{ 197 | public firstname: string; 198 | public lastname: string; 199 | 200 | abstract getSalary(): number; 201 | 202 | constructor(fn: string, ln: string){ 203 | this.firstname = fn; 204 | this.lastname = ln; 205 | } 206 | } 207 | 208 | class PermanentEmployee extends Employee{ 209 | monthlySalary: number; 210 | constructor(fn: string, ln: string, salary: number){ 211 | super(fn, ln); 212 | this.monthlySalary = salary; 213 | } 214 | 215 | getSalary(): number { 216 | return this.monthlySalary * 12; 217 | } 218 | } 219 | 220 | class ContractEmployee extends Employee{ 221 | hourlySalary: number; 222 | 223 | constructor(fn: string, ln: string, salary: number){ 224 | super(fn, ln); 225 | this.hourlySalary = salary; 226 | } 227 | 228 | getSalary(): number { 229 | return this.hourlySalary * 9 * 365; 230 | } 231 | } 232 | 233 | const emp1 = new PermanentEmployee('john', 'smith', 1000); 234 | console.log(emp1.getSalary()); 235 | 236 | const emp2 = new ContractEmployee('mark', 'vought', 10); 237 | console.log(emp2.getSalary());*/ 238 | 239 | 240 | /*************************************************** 241 | * *******LECTURE 46: PRIVATE CONSTRUCTOR*********** 242 | ***************************************************/ 243 | /*class Person{ 244 | private static _instance: Person; 245 | 246 | private constructor(){ 247 | 248 | } 249 | 250 | static getInstance(){ 251 | if(Person._instance){ 252 | return Person._instance; 253 | } 254 | Person._instance = new Person(); 255 | return Person._instance; 256 | } 257 | } 258 | 259 | const person1 = Person.getInstance(); 260 | const person2 = Person.getInstance(); 261 | 262 | console.log(person1 === person2); 263 | */ 264 | 265 | 266 | /*************************************************** 267 | * ***********LECTURE 48: INTERFACE***************** 268 | ***************************************************/ 269 | /*interface Roles{ 270 | getRole(): string; 271 | } 272 | 273 | interface User extends Roles{ 274 | firstname: string; 275 | lastname: string; 276 | readonly company: string; 277 | location?: string; 278 | 279 | greetUser(): void; 280 | getFullName(): string; 281 | } 282 | 283 | class Admin implements User{ 284 | age: number = 30; 285 | company: string = 'Google'; 286 | constructor(public firstname: string, public lastname: string){ 287 | 288 | } 289 | 290 | greetUser(){ 291 | console.log("Hello Admin: " + this.getFullName()) 292 | } 293 | 294 | getFullName(): string { 295 | return this.firstname + ' ' + this.lastname; 296 | } 297 | 298 | getRole(): string { 299 | return 'admin'; 300 | } 301 | } 302 | 303 | class Member implements User{ 304 | company: string = 'Google'; 305 | location?: string | undefined = 'London'; 306 | constructor(public firstname: string, public lastname: string, loc?: string){ 307 | this.location = loc; 308 | } 309 | 310 | greetUser(){ 311 | console.log("Hello Member: " + this.getFullName()) 312 | } 313 | 314 | getFullName(): string { 315 | return this.firstname + ' ' + this.lastname; 316 | } 317 | 318 | getRole(): string { 319 | return 'member'; 320 | } 321 | } 322 | 323 | function displayGreetMessage(user: User){ 324 | user.greetUser(); 325 | } 326 | 327 | let admin: User; 328 | admin = new Admin('john', 'smith'); 329 | console.log(admin.getRole()); 330 | 331 | const member = new Member('merry', 'jane'); 332 | 333 | displayGreetMessage(admin); 334 | displayGreetMessage(member); 335 | console.log(member.getRole()); 336 | */ 337 | 338 | 339 | /*************************************************** 340 | * ****LECTURE 51: INTERFACE AS FUNCTION TYPE******* 341 | ***************************************************/ 342 | //type SumFn = (num1: number, num2: number) => number; 343 | 344 | interface SumFn{ 345 | (num1: number, num2: number): number 346 | } 347 | 348 | let add: SumFn; 349 | 350 | add = (n1: number, n2: number) => { 351 | return n1 + n2; 352 | } -------------------------------------------------------------------------------- /04-typescript-classes-and-functions/final/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0px; 3 | padding: 0px; 4 | box-sizing: border-box; 5 | } 6 | body{ 7 | background-color: #28282B; 8 | color: white; 9 | font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', Verdana, sans-serif; 10 | } 11 | .app-header{ 12 | box-shadow: rgb(196, 190, 190) 0px 2px 8px 0px; 13 | padding: 15px 30px; 14 | } 15 | .app-topic{ 16 | padding: 30px 30px; 17 | margin: 50px 50px; 18 | box-shadow: rgba(64, 211, 105, 0.35) 0px 5px 15px; 19 | background-color: #2ECC71; 20 | text-align: center; 21 | } -------------------------------------------------------------------------------- /04-typescript-classes-and-functions/final/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | /* Visit https://aka.ms/tsconfig to read more about this file */ 4 | 5 | /* Projects */ 6 | // "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */ 7 | // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */ 8 | // "tsBuildInfoFile": "./.tsbuildinfo", /* Specify the path to .tsbuildinfo incremental compilation file. */ 9 | // "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */ 10 | // "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */ 11 | // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */ 12 | 13 | /* Language and Environment */ 14 | "target": "ES5", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */ 15 | // "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */ 16 | // "jsx": "preserve", /* Specify what JSX code is generated. */ 17 | // "experimentalDecorators": true, /* Enable experimental support for legacy experimental decorators. */ 18 | // "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */ 19 | // "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */ 20 | // "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */ 21 | // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */ 22 | // "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */ 23 | // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */ 24 | // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */ 25 | // "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */ 26 | 27 | /* Modules */ 28 | "module": "commonjs", /* Specify what module code is generated. */ 29 | "rootDir": "./src", /* Specify the root folder within your source files. */ 30 | // "moduleResolution": "node10", /* Specify how TypeScript looks up a file from a given module specifier. */ 31 | // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */ 32 | // "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */ 33 | // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */ 34 | // "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */ 35 | // "types": [], /* Specify type package names to be included without being referenced in a source file. */ 36 | // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ 37 | // "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */ 38 | // "allowImportingTsExtensions": true, /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */ 39 | // "resolvePackageJsonExports": true, /* Use the package.json 'exports' field when resolving package imports. */ 40 | // "resolvePackageJsonImports": true, /* Use the package.json 'imports' field when resolving imports. */ 41 | // "customConditions": [], /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */ 42 | // "resolveJsonModule": true, /* Enable importing .json files. */ 43 | // "allowArbitraryExtensions": true, /* Enable importing files with any extension, provided a declaration file is present. */ 44 | // "noResolve": true, /* Disallow 'import's, 'require's or ''s from expanding the number of files TypeScript should add to a project. */ 45 | 46 | /* JavaScript Support */ 47 | // "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */ 48 | // "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */ 49 | // "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */ 50 | 51 | /* Emit */ 52 | // "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */ 53 | // "declarationMap": true, /* Create sourcemaps for d.ts files. */ 54 | // "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */ 55 | // "sourceMap": true, /* Create source map files for emitted JavaScript files. */ 56 | // "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */ 57 | // "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */ 58 | "outDir": "./dist", /* Specify an output folder for all emitted files. */ 59 | // "removeComments": true, /* Disable emitting comments. */ 60 | // "noEmit": true, /* Disable emitting files from a compilation. */ 61 | // "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */ 62 | // "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types. */ 63 | // "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */ 64 | // "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */ 65 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ 66 | // "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */ 67 | // "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */ 68 | // "newLine": "crlf", /* Set the newline character for emitting files. */ 69 | // "stripInternal": true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */ 70 | // "noEmitHelpers": true, /* Disable generating custom helper functions like '__extends' in compiled output. */ 71 | // "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */ 72 | // "preserveConstEnums": true, /* Disable erasing 'const enum' declarations in generated code. */ 73 | // "declarationDir": "./", /* Specify the output directory for generated declaration files. */ 74 | // "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */ 75 | 76 | /* Interop Constraints */ 77 | // "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */ 78 | // "verbatimModuleSyntax": true, /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */ 79 | // "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */ 80 | "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */ 81 | // "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */ 82 | "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */ 83 | 84 | /* Type Checking */ 85 | "strict": true, /* Enable all strict type-checking options. */ 86 | // "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */ 87 | // "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */ 88 | // "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */ 89 | // "strictBindCallApply": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */ 90 | // "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */ 91 | // "noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */ 92 | // "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */ 93 | // "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */ 94 | // "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */ 95 | // "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */ 96 | // "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */ 97 | // "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */ 98 | // "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */ 99 | // "noUncheckedIndexedAccess": true, /* Add 'undefined' to a type when accessed using an index. */ 100 | // "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */ 101 | // "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type. */ 102 | // "allowUnusedLabels": true, /* Disable error reporting for unused labels. */ 103 | // "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */ 104 | 105 | /* Completeness */ 106 | // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */ 107 | "skipLibCheck": true /* Skip type checking all .d.ts files. */ 108 | }, 109 | "include": ["./src"] 110 | } 111 | -------------------------------------------------------------------------------- /04-typescript-classes-and-functions/start/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 |

A Complete TypeScript Course

12 |
13 |
14 |

TypeScript Classes & Interface

15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /04-typescript-classes-and-functions/start/src/app.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/typescript-complete-course/09193b1ed6d6243509b1b2de2061f7380ea948d9/04-typescript-classes-and-functions/start/src/app.ts -------------------------------------------------------------------------------- /04-typescript-classes-and-functions/start/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0px; 3 | padding: 0px; 4 | box-sizing: border-box; 5 | } 6 | body{ 7 | background-color: #28282B; 8 | color: white; 9 | font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', Verdana, sans-serif; 10 | } 11 | .app-header{ 12 | box-shadow: rgb(196, 190, 190) 0px 2px 8px 0px; 13 | padding: 15px 30px; 14 | } 15 | .app-topic{ 16 | padding: 30px 30px; 17 | margin: 50px 50px; 18 | box-shadow: rgba(64, 211, 105, 0.35) 0px 5px 15px; 19 | background-color: #2ECC71; 20 | text-align: center; 21 | } -------------------------------------------------------------------------------- /04-typescript-classes-and-functions/start/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | /* Visit https://aka.ms/tsconfig to read more about this file */ 4 | 5 | /* Projects */ 6 | // "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */ 7 | // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */ 8 | // "tsBuildInfoFile": "./.tsbuildinfo", /* Specify the path to .tsbuildinfo incremental compilation file. */ 9 | // "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */ 10 | // "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */ 11 | // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */ 12 | 13 | /* Language and Environment */ 14 | "target": "ES5", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */ 15 | // "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */ 16 | // "jsx": "preserve", /* Specify what JSX code is generated. */ 17 | // "experimentalDecorators": true, /* Enable experimental support for legacy experimental decorators. */ 18 | // "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */ 19 | // "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */ 20 | // "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */ 21 | // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */ 22 | // "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */ 23 | // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */ 24 | // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */ 25 | // "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */ 26 | 27 | /* Modules */ 28 | "module": "commonjs", /* Specify what module code is generated. */ 29 | "rootDir": "./src", /* Specify the root folder within your source files. */ 30 | // "moduleResolution": "node10", /* Specify how TypeScript looks up a file from a given module specifier. */ 31 | // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */ 32 | // "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */ 33 | // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */ 34 | // "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */ 35 | // "types": [], /* Specify type package names to be included without being referenced in a source file. */ 36 | // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ 37 | // "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */ 38 | // "allowImportingTsExtensions": true, /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */ 39 | // "resolvePackageJsonExports": true, /* Use the package.json 'exports' field when resolving package imports. */ 40 | // "resolvePackageJsonImports": true, /* Use the package.json 'imports' field when resolving imports. */ 41 | // "customConditions": [], /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */ 42 | // "resolveJsonModule": true, /* Enable importing .json files. */ 43 | // "allowArbitraryExtensions": true, /* Enable importing files with any extension, provided a declaration file is present. */ 44 | // "noResolve": true, /* Disallow 'import's, 'require's or ''s from expanding the number of files TypeScript should add to a project. */ 45 | 46 | /* JavaScript Support */ 47 | // "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */ 48 | // "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */ 49 | // "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */ 50 | 51 | /* Emit */ 52 | // "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */ 53 | // "declarationMap": true, /* Create sourcemaps for d.ts files. */ 54 | // "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */ 55 | // "sourceMap": true, /* Create source map files for emitted JavaScript files. */ 56 | // "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */ 57 | // "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */ 58 | "outDir": "./dist", /* Specify an output folder for all emitted files. */ 59 | // "removeComments": true, /* Disable emitting comments. */ 60 | // "noEmit": true, /* Disable emitting files from a compilation. */ 61 | // "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */ 62 | // "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types. */ 63 | // "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */ 64 | // "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */ 65 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ 66 | // "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */ 67 | // "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */ 68 | // "newLine": "crlf", /* Set the newline character for emitting files. */ 69 | // "stripInternal": true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */ 70 | // "noEmitHelpers": true, /* Disable generating custom helper functions like '__extends' in compiled output. */ 71 | // "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */ 72 | // "preserveConstEnums": true, /* Disable erasing 'const enum' declarations in generated code. */ 73 | // "declarationDir": "./", /* Specify the output directory for generated declaration files. */ 74 | // "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */ 75 | 76 | /* Interop Constraints */ 77 | // "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */ 78 | // "verbatimModuleSyntax": true, /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */ 79 | // "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */ 80 | "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */ 81 | // "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */ 82 | "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */ 83 | 84 | /* Type Checking */ 85 | "strict": true, /* Enable all strict type-checking options. */ 86 | // "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */ 87 | // "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */ 88 | // "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */ 89 | // "strictBindCallApply": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */ 90 | // "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */ 91 | // "noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */ 92 | // "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */ 93 | // "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */ 94 | // "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */ 95 | // "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */ 96 | // "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */ 97 | // "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */ 98 | // "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */ 99 | // "noUncheckedIndexedAccess": true, /* Add 'undefined' to a type when accessed using an index. */ 100 | // "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */ 101 | // "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type. */ 102 | // "allowUnusedLabels": true, /* Disable error reporting for unused labels. */ 103 | // "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */ 104 | 105 | /* Completeness */ 106 | // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */ 107 | "skipLibCheck": true /* Skip type checking all .d.ts files. */ 108 | }, 109 | "include": ["./src"] 110 | } 111 | -------------------------------------------------------------------------------- /05-typescript-advanced-types/final/dist/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | /*********************************************** 3 | * *****INTERSECTION TYPE IN TYPESCRIPT********* 4 | ***********************************************/ 5 | /*type stringOrNumber = string | number; 6 | type boolOrNumber = boolean | number; 7 | 8 | type myNumberType = stringOrNumber & boolOrNumber; 9 | 10 | let x: myNumberType = 20;*/ 11 | /*interface user { 12 | name: string, 13 | age: number 14 | } 15 | 16 | interface admin { 17 | name: string, 18 | role: string 19 | } 20 | 21 | type adminUser = user & admin; 22 | 23 | var john: adminUser = { 24 | name: 'john', 25 | age: 28, 26 | role: 'admin' 27 | }*/ 28 | /*function processOrder(order: Order & { status: string } ){ 29 | console.log(order.id, order.items, order.status) 30 | } 31 | 32 | interface Order{ 33 | id: number, 34 | items: string[] 35 | } 36 | 37 | processOrder({id: 123, items: ['item1', 'item2'], status: 'shiped'}) 38 | */ 39 | /*********************************************** 40 | * *****TYPE GUARDS IN TYPESCRIPT*************** 41 | ***********************************************/ 42 | //type StringOrNumber = string | number; 43 | /*function addition(a: StringOrNumber, b: StringOrNumber){ 44 | if(typeof a === 'string' || typeof b === 'string'){ 45 | return a.toString() + b.toString(); 46 | } 47 | return a + b; 48 | } 49 | 50 | addition('hello', 'world'); 51 | addition(20, 30); 52 | addition('hello', 30);*/ 53 | /*class Animal{ 54 | makeSound(){ 55 | console.log('Generic animal sound'); 56 | } 57 | } 58 | 59 | class Dog extends Animal{ 60 | bark(){ 61 | console.log('woof woof') 62 | } 63 | }*/ 64 | //Classes 65 | /*function makeCreatureSound(creature: Animal){ 66 | if(creature instanceof Dog){ 67 | creature.bark() 68 | }else{ 69 | creature.makeSound(); 70 | } 71 | } 72 | 73 | let animal = new Animal(); 74 | let dog = new Dog(); 75 | 76 | makeCreatureSound(animal); 77 | makeCreatureSound(dog); 78 | */ 79 | /*interface User { 80 | name: string, 81 | email?: string; 82 | } 83 | 84 | function greetUser(user: User){ 85 | if('email' in user){ 86 | console.log(`Hello ${user.name}. Your email is: ${user.email}`); 87 | }else{ 88 | console.log(`Hello ${user.name}.`); 89 | } 90 | 91 | } 92 | 93 | greetUser({name: 'john'}); 94 | greetUser({name: 'mark', email: 'mark@gmail.com'}); 95 | */ 96 | /*********************************************** 97 | * *****DISCRIMINATED UNION********************* 98 | ***********************************************/ 99 | /*interface circle{ 100 | kind: 'circle'; 101 | radius: number; 102 | } 103 | 104 | interface square{ 105 | kind: 'square'; 106 | length: number; 107 | } 108 | 109 | type Shape = circle | square; 110 | 111 | function calcArea(shape: Shape){ 112 | switch(shape.kind) { 113 | case 'circle': 114 | return 3.14 * shape.radius * shape.radius; 115 | case 'square': 116 | return shape.length * shape.length; 117 | } 118 | } 119 | 120 | console.log(calcArea({kind: 'square', length: 12})) 121 | console.log(calcArea({kind: 'circle',radius: 12})) 122 | */ 123 | /*********************************************** 124 | * *****TYPE CASTING IN TYPESCRIPT************** 125 | ***********************************************/ 126 | // let fname = document.querySelector('#fname')!; 127 | /*let fname = document.querySelector('#fname'); 128 | if(fname){ 129 | (fname as HTMLInputElement).value = 'John' 130 | }*/ 131 | /*********************************************** 132 | * *****INDEX PROPERTIES************************ 133 | ***********************************************/ 134 | /*interface Product{ 135 | id: number; 136 | name: string; 137 | [prop: string]: string | number 138 | } 139 | 140 | const product1: Product = { 141 | id: 1, 142 | name: "T-Shirt", 143 | color: 'Red', 144 | price: 123 145 | } 146 | 147 | const product2: Product = { 148 | id: 2, 149 | name: "Mug", 150 | material: 'Ceramic', 151 | capacity: 300 152 | } 153 | 154 | interface Settings{ 155 | [props: string]: boolean | string | number 156 | } 157 | 158 | const mySettings: Settings = { 159 | darkMode: true, 160 | fontSize: 16, 161 | customTheme: 'pink' 162 | } 163 | 164 | interface User{ 165 | name: string; 166 | [prop: string]: any 167 | } 168 | 169 | const users: User[] = [ 170 | {name: 'John', age: 30, gender: 'male'}, 171 | {name: 'Mark', interests: ['music', 'sports'], location: 'london'} 172 | ]*/ 173 | /*********************************************** 174 | * *****FUNCTION OVERLOADING******************** 175 | ***********************************************/ 176 | /*type StringOrNumber = string | number; 177 | 178 | function addition(a: number, b: number): number; 179 | function addition(a: string, b: string): string; 180 | function addition(a: number, b: string): string; 181 | function addition(a: string, b: number): string; 182 | function addition(a: StringOrNumber, b: StringOrNumber){ 183 | if(typeof a === 'string' || typeof b === 'string'){ 184 | return a.toString() + b.toString(); 185 | } 186 | return a + b; 187 | } 188 | 189 | addition('Hello', 'World').split(','); 190 | addition(10, 20); 191 | */ 192 | /*********************************************** 193 | * *****WHAT ARE GENERICS*********************** 194 | ***********************************************/ 195 | /*function swap(arr: T[], index1: number, index2: number): T[]{ 196 | //swapping logic 197 | return []; 198 | } 199 | swap([1, 2, 3], 0, 2); 200 | swap(['Hello', 'Hi', 'How are you'], 1, 2); 201 | 202 | const p: Promise = new Promise((resolve, reject) => { 203 | setTimeout(() => { 204 | resolve(100); 205 | }, 1000) 206 | });*/ 207 | /*********************************************** 208 | * *****CREATING A GENERIC FUNCTION************* 209 | ***********************************************/ 210 | /*function swap(arr: T[], index1: number, index2: number): T[]{ 211 | //swapping logic 212 | if( 213 | index1 < 0 || index1 >= arr.length 214 | || index2 < 0 || index2 >= arr.length 215 | ) 216 | { 217 | throw new Error('Invalid index'); 218 | } 219 | [arr[index1], arr[index2]] = [arr[index2], arr[index1]]; 220 | return arr; 221 | } 222 | console.log(swap([1, 2, 3], 0, 2)); 223 | console.log(swap(['Hello', 'Hi', 'How are you'], 1, 2)); 224 | 225 | 226 | function expand(obj1: T , obj2: U){ 227 | return Object.assign(obj1, obj2); 228 | } 229 | 230 | let combined = expand({name: 'john', age: 28}, {name: 'john', gender: 'male'}); 231 | console.log(combined); 232 | */ 233 | /*********************************************** 234 | * *****THE KEYOF CONSTRAINT******************** 235 | ***********************************************/ 236 | /*function getPropValue(obj: T, key: U){ 237 | return obj[key]; 238 | } 239 | 240 | getPropValue({name: 'john', age: 28}, 'age'); 241 | */ 242 | /*********************************************** 243 | * *****CREATING A GENERIC CLASS**************** 244 | ***********************************************/ 245 | /*type Book = { 246 | name: string; 247 | pages: number; 248 | price: number 249 | } 250 | 251 | type Cloth = { 252 | name: string; 253 | size: string; 254 | price: number 255 | } 256 | 257 | class ShoppingKart{ 258 | private items: T[] = []; 259 | 260 | addItem(item: T){ 261 | this.items.push(item); 262 | } 263 | getItems(){ 264 | return this.items 265 | } 266 | } 267 | 268 | const bookCart = new ShoppingKart(); 269 | bookCart.addItem({name: 'A Book', pages: 225, price: 20}); 270 | bookCart.addItem({name: 'Another Book', pages: 250, price: 25}); 271 | console.log(bookCart.getItems()); 272 | 273 | const clothCart = new ShoppingKart(); 274 | clothCart.addItem({name: 'T-Shirt', size: 'M', price: 225}); 275 | console.log(clothCart.getItems()); 276 | 277 | const strkart = new ShoppingKart(); 278 | strkart.addItem('Hello'); 279 | strkart.addItem('World'); 280 | console.log(strkart.getItems()) 281 | */ 282 | /*********************************************** 283 | * *****GENERIC TYPE VS UNION TYPE************** 284 | ***********************************************/ 285 | /*class ShoppingKart{ 286 | private items: T[]= []; 287 | 288 | addItem(item: T){ 289 | this.items.push(item); 290 | } 291 | getItems(){ 292 | return this.items 293 | } 294 | } 295 | 296 | 297 | const strkart = new ShoppingKart(); 298 | strkart.addItem('Hello'); 299 | strkart.addItem('World'); 300 | console.log(strkart.getItems()) 301 | 302 | const numkart = new ShoppingKart(); 303 | numkart.addItem(200); 304 | numkart.addItem(300); 305 | console.log(numkart.getItems()) 306 | */ 307 | /*********************************************** 308 | * *****PARTIAL & READ ONLY GENERICS************ 309 | ***********************************************/ 310 | /*interface UserSettings{ 311 | username: string; 312 | email: string; 313 | darkMode: boolean; 314 | language: string; 315 | } 316 | 317 | function updateUserSettings(partialsettings: Partial){ 318 | console.log('Updating:', partialsettings) 319 | } 320 | 321 | const user: Readonly = { 322 | username: 'johnsmith', 323 | email: 'johnsmith@gmail.com', 324 | darkMode: false, 325 | language: 'en' 326 | } 327 | 328 | user.username = 'something'; 329 | 330 | const newSettings = { 331 | darkMode: true, 332 | language: 'fr' 333 | } 334 | updateUserSettings(newSettings) 335 | 336 | 337 | 338 | let arr: Readonly = ['john', 'mark']; 339 | arr.push('merry'); 340 | console.log(arr); 341 | */ 342 | -------------------------------------------------------------------------------- /05-typescript-advanced-types/final/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 |

A Complete TypeScript Course

12 |
13 |
14 |

TypeScript Advanced Types

15 |
16 |
17 | 18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /05-typescript-advanced-types/final/src/app.ts: -------------------------------------------------------------------------------- 1 | /*********************************************** 2 | * *****INTERSECTION TYPE IN TYPESCRIPT********* 3 | ***********************************************/ 4 | /*type stringOrNumber = string | number; 5 | type boolOrNumber = boolean | number; 6 | 7 | type myNumberType = stringOrNumber & boolOrNumber; 8 | 9 | let x: myNumberType = 20;*/ 10 | 11 | /*interface user { 12 | name: string, 13 | age: number 14 | } 15 | 16 | interface admin { 17 | name: string, 18 | role: string 19 | } 20 | 21 | type adminUser = user & admin; 22 | 23 | var john: adminUser = { 24 | name: 'john', 25 | age: 28, 26 | role: 'admin' 27 | }*/ 28 | 29 | /*function processOrder(order: Order & { status: string } ){ 30 | console.log(order.id, order.items, order.status) 31 | } 32 | 33 | interface Order{ 34 | id: number, 35 | items: string[] 36 | } 37 | 38 | processOrder({id: 123, items: ['item1', 'item2'], status: 'shiped'}) 39 | */ 40 | 41 | 42 | 43 | /*********************************************** 44 | * *****TYPE GUARDS IN TYPESCRIPT*************** 45 | ***********************************************/ 46 | //type StringOrNumber = string | number; 47 | 48 | /*function addition(a: StringOrNumber, b: StringOrNumber){ 49 | if(typeof a === 'string' || typeof b === 'string'){ 50 | return a.toString() + b.toString(); 51 | } 52 | return a + b; 53 | } 54 | 55 | addition('hello', 'world'); 56 | addition(20, 30); 57 | addition('hello', 30);*/ 58 | 59 | /*class Animal{ 60 | makeSound(){ 61 | console.log('Generic animal sound'); 62 | } 63 | } 64 | 65 | class Dog extends Animal{ 66 | bark(){ 67 | console.log('woof woof') 68 | } 69 | }*/ 70 | 71 | //Classes 72 | /*function makeCreatureSound(creature: Animal){ 73 | if(creature instanceof Dog){ 74 | creature.bark() 75 | }else{ 76 | creature.makeSound(); 77 | } 78 | } 79 | 80 | let animal = new Animal(); 81 | let dog = new Dog(); 82 | 83 | makeCreatureSound(animal); 84 | makeCreatureSound(dog); 85 | */ 86 | 87 | /*interface User { 88 | name: string, 89 | email?: string; 90 | } 91 | 92 | function greetUser(user: User){ 93 | if('email' in user){ 94 | console.log(`Hello ${user.name}. Your email is: ${user.email}`); 95 | }else{ 96 | console.log(`Hello ${user.name}.`); 97 | } 98 | 99 | } 100 | 101 | greetUser({name: 'john'}); 102 | greetUser({name: 'mark', email: 'mark@gmail.com'}); 103 | */ 104 | 105 | 106 | 107 | 108 | /*********************************************** 109 | * *****DISCRIMINATED UNION********************* 110 | ***********************************************/ 111 | /*interface circle{ 112 | kind: 'circle'; 113 | radius: number; 114 | } 115 | 116 | interface square{ 117 | kind: 'square'; 118 | length: number; 119 | } 120 | 121 | type Shape = circle | square; 122 | 123 | function calcArea(shape: Shape){ 124 | switch(shape.kind) { 125 | case 'circle': 126 | return 3.14 * shape.radius * shape.radius; 127 | case 'square': 128 | return shape.length * shape.length; 129 | } 130 | } 131 | 132 | console.log(calcArea({kind: 'square', length: 12})) 133 | console.log(calcArea({kind: 'circle',radius: 12})) 134 | */ 135 | 136 | 137 | 138 | /*********************************************** 139 | * *****TYPE CASTING IN TYPESCRIPT************** 140 | ***********************************************/ 141 | // let fname = document.querySelector('#fname')!; 142 | /*let fname = document.querySelector('#fname'); 143 | if(fname){ 144 | (fname as HTMLInputElement).value = 'John' 145 | }*/ 146 | 147 | 148 | /*********************************************** 149 | * *****INDEX PROPERTIES************************ 150 | ***********************************************/ 151 | /*interface Product{ 152 | id: number; 153 | name: string; 154 | [prop: string]: string | number 155 | } 156 | 157 | const product1: Product = { 158 | id: 1, 159 | name: "T-Shirt", 160 | color: 'Red', 161 | price: 123 162 | } 163 | 164 | const product2: Product = { 165 | id: 2, 166 | name: "Mug", 167 | material: 'Ceramic', 168 | capacity: 300 169 | } 170 | 171 | interface Settings{ 172 | [props: string]: boolean | string | number 173 | } 174 | 175 | const mySettings: Settings = { 176 | darkMode: true, 177 | fontSize: 16, 178 | customTheme: 'pink' 179 | } 180 | 181 | interface User{ 182 | name: string; 183 | [prop: string]: any 184 | } 185 | 186 | const users: User[] = [ 187 | {name: 'John', age: 30, gender: 'male'}, 188 | {name: 'Mark', interests: ['music', 'sports'], location: 'london'} 189 | ]*/ 190 | 191 | 192 | /*********************************************** 193 | * *****FUNCTION OVERLOADING******************** 194 | ***********************************************/ 195 | /*type StringOrNumber = string | number; 196 | 197 | function addition(a: number, b: number): number; 198 | function addition(a: string, b: string): string; 199 | function addition(a: number, b: string): string; 200 | function addition(a: string, b: number): string; 201 | function addition(a: StringOrNumber, b: StringOrNumber){ 202 | if(typeof a === 'string' || typeof b === 'string'){ 203 | return a.toString() + b.toString(); 204 | } 205 | return a + b; 206 | } 207 | 208 | addition('Hello', 'World').split(','); 209 | addition(10, 20); 210 | */ 211 | 212 | 213 | 214 | /*********************************************** 215 | * *****WHAT ARE GENERICS*********************** 216 | ***********************************************/ 217 | /*function swap(arr: T[], index1: number, index2: number): T[]{ 218 | //swapping logic 219 | return []; 220 | } 221 | swap([1, 2, 3], 0, 2); 222 | swap(['Hello', 'Hi', 'How are you'], 1, 2); 223 | 224 | const p: Promise = new Promise((resolve, reject) => { 225 | setTimeout(() => { 226 | resolve(100); 227 | }, 1000) 228 | });*/ 229 | 230 | 231 | 232 | /*********************************************** 233 | * *****CREATING A GENERIC FUNCTION************* 234 | ***********************************************/ 235 | /*function swap(arr: T[], index1: number, index2: number): T[]{ 236 | //swapping logic 237 | if( 238 | index1 < 0 || index1 >= arr.length 239 | || index2 < 0 || index2 >= arr.length 240 | ) 241 | { 242 | throw new Error('Invalid index'); 243 | } 244 | [arr[index1], arr[index2]] = [arr[index2], arr[index1]]; 245 | return arr; 246 | } 247 | console.log(swap([1, 2, 3], 0, 2)); 248 | console.log(swap(['Hello', 'Hi', 'How are you'], 1, 2)); 249 | 250 | 251 | function expand(obj1: T , obj2: U){ 252 | return Object.assign(obj1, obj2); 253 | } 254 | 255 | let combined = expand({name: 'john', age: 28}, {name: 'john', gender: 'male'}); 256 | console.log(combined); 257 | */ 258 | 259 | 260 | 261 | /*********************************************** 262 | * *****THE KEYOF CONSTRAINT******************** 263 | ***********************************************/ 264 | /*function getPropValue(obj: T, key: U){ 265 | return obj[key]; 266 | } 267 | 268 | getPropValue({name: 'john', age: 28}, 'age'); 269 | */ 270 | 271 | 272 | 273 | /*********************************************** 274 | * *****CREATING A GENERIC CLASS**************** 275 | ***********************************************/ 276 | /*type Book = { 277 | name: string; 278 | pages: number; 279 | price: number 280 | } 281 | 282 | type Cloth = { 283 | name: string; 284 | size: string; 285 | price: number 286 | } 287 | 288 | class ShoppingKart{ 289 | private items: T[] = []; 290 | 291 | addItem(item: T){ 292 | this.items.push(item); 293 | } 294 | getItems(){ 295 | return this.items 296 | } 297 | } 298 | 299 | const bookCart = new ShoppingKart(); 300 | bookCart.addItem({name: 'A Book', pages: 225, price: 20}); 301 | bookCart.addItem({name: 'Another Book', pages: 250, price: 25}); 302 | console.log(bookCart.getItems()); 303 | 304 | const clothCart = new ShoppingKart(); 305 | clothCart.addItem({name: 'T-Shirt', size: 'M', price: 225}); 306 | console.log(clothCart.getItems()); 307 | 308 | const strkart = new ShoppingKart(); 309 | strkart.addItem('Hello'); 310 | strkart.addItem('World'); 311 | console.log(strkart.getItems()) 312 | */ 313 | 314 | 315 | 316 | /*********************************************** 317 | * *****GENERIC TYPE VS UNION TYPE************** 318 | ***********************************************/ 319 | /*class ShoppingKart{ 320 | private items: T[]= []; 321 | 322 | addItem(item: T){ 323 | this.items.push(item); 324 | } 325 | getItems(){ 326 | return this.items 327 | } 328 | } 329 | 330 | 331 | const strkart = new ShoppingKart(); 332 | strkart.addItem('Hello'); 333 | strkart.addItem('World'); 334 | console.log(strkart.getItems()) 335 | 336 | const numkart = new ShoppingKart(); 337 | numkart.addItem(200); 338 | numkart.addItem(300); 339 | console.log(numkart.getItems()) 340 | */ 341 | 342 | 343 | 344 | 345 | /*********************************************** 346 | * *****PARTIAL & READ ONLY GENERICS************ 347 | ***********************************************/ 348 | /*interface UserSettings{ 349 | username: string; 350 | email: string; 351 | darkMode: boolean; 352 | language: string; 353 | } 354 | 355 | function updateUserSettings(partialsettings: Partial){ 356 | console.log('Updating:', partialsettings) 357 | } 358 | 359 | const user: Readonly = { 360 | username: 'johnsmith', 361 | email: 'johnsmith@gmail.com', 362 | darkMode: false, 363 | language: 'en' 364 | } 365 | 366 | user.username = 'something'; 367 | 368 | const newSettings = { 369 | darkMode: true, 370 | language: 'fr' 371 | } 372 | updateUserSettings(newSettings) 373 | 374 | 375 | 376 | let arr: Readonly = ['john', 'mark']; 377 | arr.push('merry'); 378 | console.log(arr); 379 | */ -------------------------------------------------------------------------------- /05-typescript-advanced-types/final/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0px; 3 | padding: 0px; 4 | box-sizing: border-box; 5 | } 6 | body{ 7 | background-color: #28282B; 8 | color: white; 9 | font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', Verdana, sans-serif; 10 | } 11 | .app-header{ 12 | box-shadow: rgb(196, 190, 190) 0px 2px 8px 0px; 13 | padding: 15px 30px; 14 | } 15 | .app-topic{ 16 | padding: 30px 30px; 17 | margin: 50px 50px; 18 | box-shadow: rgba(64, 211, 105, 0.35) 0px 5px 15px; 19 | background-color: #2ECC71; 20 | text-align: center; 21 | } -------------------------------------------------------------------------------- /05-typescript-advanced-types/final/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | /* Visit https://aka.ms/tsconfig to read more about this file */ 4 | 5 | /* Projects */ 6 | // "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */ 7 | // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */ 8 | // "tsBuildInfoFile": "./.tsbuildinfo", /* Specify the path to .tsbuildinfo incremental compilation file. */ 9 | // "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */ 10 | // "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */ 11 | // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */ 12 | 13 | /* Language and Environment */ 14 | "target": "ES2015", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */ 15 | // "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */ 16 | // "jsx": "preserve", /* Specify what JSX code is generated. */ 17 | // "experimentalDecorators": true, /* Enable experimental support for legacy experimental decorators. */ 18 | // "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */ 19 | // "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */ 20 | // "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */ 21 | // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */ 22 | // "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */ 23 | // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */ 24 | // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */ 25 | // "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */ 26 | 27 | /* Modules */ 28 | "module": "commonjs", /* Specify what module code is generated. */ 29 | "rootDir": "./src", /* Specify the root folder within your source files. */ 30 | // "moduleResolution": "node10", /* Specify how TypeScript looks up a file from a given module specifier. */ 31 | // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */ 32 | // "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */ 33 | // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */ 34 | // "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */ 35 | // "types": [], /* Specify type package names to be included without being referenced in a source file. */ 36 | // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ 37 | // "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */ 38 | // "allowImportingTsExtensions": true, /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */ 39 | // "resolvePackageJsonExports": true, /* Use the package.json 'exports' field when resolving package imports. */ 40 | // "resolvePackageJsonImports": true, /* Use the package.json 'imports' field when resolving imports. */ 41 | // "customConditions": [], /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */ 42 | // "resolveJsonModule": true, /* Enable importing .json files. */ 43 | // "allowArbitraryExtensions": true, /* Enable importing files with any extension, provided a declaration file is present. */ 44 | // "noResolve": true, /* Disallow 'import's, 'require's or ''s from expanding the number of files TypeScript should add to a project. */ 45 | 46 | /* JavaScript Support */ 47 | // "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */ 48 | // "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */ 49 | // "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */ 50 | 51 | /* Emit */ 52 | // "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */ 53 | // "declarationMap": true, /* Create sourcemaps for d.ts files. */ 54 | // "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */ 55 | // "sourceMap": true, /* Create source map files for emitted JavaScript files. */ 56 | // "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */ 57 | // "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */ 58 | "outDir": "./dist", /* Specify an output folder for all emitted files. */ 59 | // "removeComments": true, /* Disable emitting comments. */ 60 | // "noEmit": true, /* Disable emitting files from a compilation. */ 61 | // "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */ 62 | // "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types. */ 63 | // "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */ 64 | // "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */ 65 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ 66 | // "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */ 67 | // "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */ 68 | // "newLine": "crlf", /* Set the newline character for emitting files. */ 69 | // "stripInternal": true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */ 70 | // "noEmitHelpers": true, /* Disable generating custom helper functions like '__extends' in compiled output. */ 71 | // "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */ 72 | // "preserveConstEnums": true, /* Disable erasing 'const enum' declarations in generated code. */ 73 | // "declarationDir": "./", /* Specify the output directory for generated declaration files. */ 74 | // "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */ 75 | 76 | /* Interop Constraints */ 77 | // "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */ 78 | // "verbatimModuleSyntax": true, /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */ 79 | // "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */ 80 | "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */ 81 | // "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */ 82 | "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */ 83 | 84 | /* Type Checking */ 85 | "strict": true, /* Enable all strict type-checking options. */ 86 | // "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */ 87 | // "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */ 88 | // "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */ 89 | // "strictBindCallApply": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */ 90 | // "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */ 91 | // "noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */ 92 | // "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */ 93 | // "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */ 94 | // "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */ 95 | // "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */ 96 | // "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */ 97 | // "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */ 98 | // "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */ 99 | // "noUncheckedIndexedAccess": true, /* Add 'undefined' to a type when accessed using an index. */ 100 | // "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */ 101 | // "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type. */ 102 | // "allowUnusedLabels": true, /* Disable error reporting for unused labels. */ 103 | // "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */ 104 | 105 | /* Completeness */ 106 | // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */ 107 | "skipLibCheck": true /* Skip type checking all .d.ts files. */ 108 | }, 109 | "include": ["./src"] 110 | } 111 | -------------------------------------------------------------------------------- /05-typescript-advanced-types/start/dist/app.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/typescript-complete-course/09193b1ed6d6243509b1b2de2061f7380ea948d9/05-typescript-advanced-types/start/dist/app.js -------------------------------------------------------------------------------- /05-typescript-advanced-types/start/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 |

A Complete TypeScript Course

12 |
13 |
14 |

TypeScript Advanced Types

15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /05-typescript-advanced-types/start/src/app.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/typescript-complete-course/09193b1ed6d6243509b1b2de2061f7380ea948d9/05-typescript-advanced-types/start/src/app.ts -------------------------------------------------------------------------------- /05-typescript-advanced-types/start/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0px; 3 | padding: 0px; 4 | box-sizing: border-box; 5 | } 6 | body{ 7 | background-color: #28282B; 8 | color: white; 9 | font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', Verdana, sans-serif; 10 | } 11 | .app-header{ 12 | box-shadow: rgb(196, 190, 190) 0px 2px 8px 0px; 13 | padding: 15px 30px; 14 | } 15 | .app-topic{ 16 | padding: 30px 30px; 17 | margin: 50px 50px; 18 | box-shadow: rgba(64, 211, 105, 0.35) 0px 5px 15px; 19 | background-color: #2ECC71; 20 | text-align: center; 21 | } -------------------------------------------------------------------------------- /05-typescript-advanced-types/start/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | /* Visit https://aka.ms/tsconfig to read more about this file */ 4 | 5 | /* Projects */ 6 | // "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */ 7 | // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */ 8 | // "tsBuildInfoFile": "./.tsbuildinfo", /* Specify the path to .tsbuildinfo incremental compilation file. */ 9 | // "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */ 10 | // "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */ 11 | // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */ 12 | 13 | /* Language and Environment */ 14 | "target": "ES2015", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */ 15 | // "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */ 16 | // "jsx": "preserve", /* Specify what JSX code is generated. */ 17 | // "experimentalDecorators": true, /* Enable experimental support for legacy experimental decorators. */ 18 | // "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */ 19 | // "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */ 20 | // "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */ 21 | // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */ 22 | // "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */ 23 | // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */ 24 | // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */ 25 | // "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */ 26 | 27 | /* Modules */ 28 | "module": "commonjs", /* Specify what module code is generated. */ 29 | "rootDir": "./src", /* Specify the root folder within your source files. */ 30 | // "moduleResolution": "node10", /* Specify how TypeScript looks up a file from a given module specifier. */ 31 | // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */ 32 | // "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */ 33 | // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */ 34 | // "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */ 35 | // "types": [], /* Specify type package names to be included without being referenced in a source file. */ 36 | // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ 37 | // "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */ 38 | // "allowImportingTsExtensions": true, /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */ 39 | // "resolvePackageJsonExports": true, /* Use the package.json 'exports' field when resolving package imports. */ 40 | // "resolvePackageJsonImports": true, /* Use the package.json 'imports' field when resolving imports. */ 41 | // "customConditions": [], /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */ 42 | // "resolveJsonModule": true, /* Enable importing .json files. */ 43 | // "allowArbitraryExtensions": true, /* Enable importing files with any extension, provided a declaration file is present. */ 44 | // "noResolve": true, /* Disallow 'import's, 'require's or ''s from expanding the number of files TypeScript should add to a project. */ 45 | 46 | /* JavaScript Support */ 47 | // "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */ 48 | // "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */ 49 | // "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */ 50 | 51 | /* Emit */ 52 | // "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */ 53 | // "declarationMap": true, /* Create sourcemaps for d.ts files. */ 54 | // "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */ 55 | // "sourceMap": true, /* Create source map files for emitted JavaScript files. */ 56 | // "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */ 57 | // "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */ 58 | "outDir": "./dist", /* Specify an output folder for all emitted files. */ 59 | // "removeComments": true, /* Disable emitting comments. */ 60 | // "noEmit": true, /* Disable emitting files from a compilation. */ 61 | // "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */ 62 | // "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types. */ 63 | // "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */ 64 | // "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */ 65 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ 66 | // "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */ 67 | // "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */ 68 | // "newLine": "crlf", /* Set the newline character for emitting files. */ 69 | // "stripInternal": true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */ 70 | // "noEmitHelpers": true, /* Disable generating custom helper functions like '__extends' in compiled output. */ 71 | // "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */ 72 | // "preserveConstEnums": true, /* Disable erasing 'const enum' declarations in generated code. */ 73 | // "declarationDir": "./", /* Specify the output directory for generated declaration files. */ 74 | // "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */ 75 | 76 | /* Interop Constraints */ 77 | // "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */ 78 | // "verbatimModuleSyntax": true, /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */ 79 | // "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */ 80 | "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */ 81 | // "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */ 82 | "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */ 83 | 84 | /* Type Checking */ 85 | "strict": true, /* Enable all strict type-checking options. */ 86 | // "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */ 87 | // "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */ 88 | // "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */ 89 | // "strictBindCallApply": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */ 90 | // "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */ 91 | // "noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */ 92 | // "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */ 93 | // "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */ 94 | // "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */ 95 | // "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */ 96 | // "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */ 97 | // "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */ 98 | // "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */ 99 | // "noUncheckedIndexedAccess": true, /* Add 'undefined' to a type when accessed using an index. */ 100 | // "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */ 101 | // "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type. */ 102 | // "allowUnusedLabels": true, /* Disable error reporting for unused labels. */ 103 | // "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */ 104 | 105 | /* Completeness */ 106 | // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */ 107 | "skipLibCheck": true /* Skip type checking all .d.ts files. */ 108 | }, 109 | "include": ["./src"] 110 | } 111 | -------------------------------------------------------------------------------- /06-typescript-expense-tracker/final/dist/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | //ACCESS DOM ELEMENTS FROM TYPESCRIPT 3 | const expType = document.getElementById('expense-type'); 4 | const expDesc = document.getElementById('desc'); 5 | const expAmt = document.getElementById('amount'); 6 | const addExpBtn = document.querySelector('.add-expense-btn'); 7 | const debitDiv = document.querySelector('.expense-debit-item-container'); 8 | const creditDiv = document.querySelector('.expense-credit-item-container'); 9 | const totalAmtDiv = document.querySelector('.total-expense-amount'); 10 | let expenseItems = []; 11 | let totalAmount = 0; 12 | class Expense { 13 | constructor(type, desc, amount) { 14 | this.id = 0; 15 | this.type = 'debit'; 16 | this.description = ''; 17 | this.amount = 0; 18 | this.type = type; 19 | this.description = desc; 20 | this.amount = amount; 21 | this.id = ++Expense.currentId; 22 | } 23 | } 24 | Expense.currentId = 0; 25 | function DisplayExpenseItems() { 26 | debitDiv.innerHTML = ''; 27 | creditDiv.innerHTML = ''; 28 | for (let i = 0; i < expenseItems.length; i++) { 29 | let expItem = expenseItems[i]; 30 | let containerDiv = expItem.type === 'credit' ? creditDiv : debitDiv; 31 | let cssClass = expItem.type === 'credit' ? 'credit-item' : 'debit-item'; 32 | let template = ` 33 |
34 |
${expItem.description}
35 |
${expItem.amount}
36 |
37 | 38 |
39 |
40 | `; 41 | containerDiv === null || containerDiv === void 0 ? void 0 : containerDiv.insertAdjacentHTML('beforeend', template); 42 | } 43 | } 44 | function calculateTotal() { 45 | return expenseItems.reduce((total, exp) => { 46 | let amount = exp.amount; 47 | if (exp.type === 'debit') { 48 | amount = -exp.amount; 49 | } 50 | total += amount; 51 | return total; 52 | }, 0); 53 | } 54 | function showTotal() { 55 | totalAmtDiv.textContent = 'Aval. Balance: ' + totalAmount.toString(); 56 | } 57 | addExpBtn.addEventListener('click', function (event) { 58 | event.preventDefault(); 59 | let type = expType.value === 'credit' ? 'credit' : 'debit'; 60 | const exp = new Expense(type, expDesc.value, +expAmt.value); 61 | expenseItems.push(exp); 62 | DisplayExpenseItems(); 63 | totalAmount = calculateTotal(); 64 | showTotal(); 65 | }); 66 | function deleteExpense(id) { 67 | const exp = expenseItems.find((el) => { 68 | return el.id === id; 69 | }); 70 | let index = expenseItems.indexOf(exp); 71 | expenseItems.splice(index, 1); 72 | DisplayExpenseItems(); 73 | updateBalance(exp); 74 | } 75 | function updateBalance(expense) { 76 | console.log(expense); 77 | let amount = expense.amount; 78 | if (expense.type === 'credit') { 79 | totalAmount -= amount; 80 | } 81 | else { 82 | totalAmount += amount; 83 | } 84 | showTotal(); 85 | } 86 | -------------------------------------------------------------------------------- /06-typescript-expense-tracker/final/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 | TrackIt 12 |
13 |
14 | 0.00 15 |
16 |
17 |
18 | 23 | 24 | 25 | 26 |
27 |
28 |
29 |
30 | 31 |
32 |
33 | 34 |
35 |
36 | 37 | 38 | -------------------------------------------------------------------------------- /06-typescript-expense-tracker/final/src/app.ts: -------------------------------------------------------------------------------- 1 | //ACCESS DOM ELEMENTS FROM TYPESCRIPT 2 | const expType = document.getElementById('expense-type')! as HTMLSelectElement; 3 | const expDesc = document.getElementById('desc')! as HTMLInputElement; 4 | const expAmt = document.getElementById('amount')! as HTMLInputElement; 5 | const addExpBtn = document.querySelector('.add-expense-btn')! as HTMLButtonElement; 6 | 7 | const debitDiv = document.querySelector('.expense-debit-item-container')! as HTMLDivElement; 8 | const creditDiv = document.querySelector('.expense-credit-item-container')! as HTMLDivElement; 9 | const totalAmtDiv = document.querySelector('.total-expense-amount')! as HTMLDivElement; 10 | let expenseItems: Expense[] = []; 11 | 12 | let totalAmount: number = 0; 13 | 14 | class Expense{ 15 | private static currentId: number = 0; 16 | readonly id: number = 0; 17 | type: 'credit' | 'debit' = 'debit'; 18 | description: string = ''; 19 | amount: number = 0; 20 | 21 | constructor(type: 'credit' | 'debit', desc: string, amount: number){ 22 | this.type = type; 23 | this.description = desc; 24 | this.amount = amount; 25 | this.id = ++Expense.currentId; 26 | } 27 | } 28 | 29 | function DisplayExpenseItems(){ 30 | debitDiv.innerHTML = ''; 31 | creditDiv.innerHTML = ''; 32 | for(let i = 0; i < expenseItems.length; i++){ 33 | let expItem = expenseItems[i]; 34 | let containerDiv = expItem.type === 'credit' ? creditDiv : debitDiv; 35 | 36 | let cssClass = expItem.type === 'credit' ? 'credit-item' : 'debit-item'; 37 | let template = ` 38 |
39 |
${expItem.description}
40 |
${expItem.amount}
41 |
42 | 43 |
44 |
45 | `; 46 | containerDiv?.insertAdjacentHTML('beforeend', template); 47 | } 48 | } 49 | 50 | function calculateTotal(){ 51 | return expenseItems.reduce((total, exp) => { 52 | let amount = exp.amount; 53 | if(exp.type === 'debit'){ 54 | amount = -exp.amount; 55 | } 56 | total += amount; 57 | return total; 58 | }, 0) 59 | } 60 | function showTotal(){ 61 | totalAmtDiv.textContent = 'Aval. Balance: ' + totalAmount.toString(); 62 | } 63 | 64 | 65 | addExpBtn.addEventListener('click', function(event){ 66 | event.preventDefault(); 67 | 68 | let type: 'credit' | 'debit' = expType.value === 'credit' ? 'credit' : 'debit'; 69 | const exp = new Expense(type, expDesc.value, +expAmt.value); 70 | expenseItems.push(exp); 71 | 72 | DisplayExpenseItems() 73 | 74 | totalAmount = calculateTotal(); 75 | showTotal(); 76 | }) 77 | 78 | function deleteExpense(id: number){ 79 | const exp: Expense = expenseItems.find((el) => { 80 | return el.id === id; 81 | }) as Expense; 82 | let index: number = expenseItems.indexOf(exp) 83 | expenseItems.splice(index, 1); 84 | 85 | DisplayExpenseItems(); 86 | 87 | updateBalance(exp); 88 | } 89 | 90 | function updateBalance(expense: Expense){ 91 | console.log(expense); 92 | let amount = expense.amount; 93 | if(expense.type === 'credit'){ 94 | totalAmount -= amount; 95 | }else{ 96 | totalAmount += amount; 97 | } 98 | showTotal(); 99 | } -------------------------------------------------------------------------------- /06-typescript-expense-tracker/final/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0px; 3 | padding: 0px; 4 | box-sizing: border-box; 5 | } 6 | body{ 7 | font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', Verdana, sans-serif; 8 | } 9 | .ex-tracker-header{ 10 | /* box-shadow: rgb(196, 190, 190) 0px 2px 8px 0px; */ 11 | padding: 15px 30px; 12 | font-weight:900; 13 | font-size: 28px; 14 | background-color: #28282B; 15 | color: white; 16 | border-bottom: #FF5733 1.5px solid; 17 | } 18 | .total-expense-amount{ 19 | margin: 0; 20 | background-color: #28282B; 21 | color: white; 22 | text-align: center; 23 | padding: 20px 0px; 24 | font-size: 40px; 25 | font-weight: bold; 26 | } 27 | .ex-tracker-form-area{ 28 | margin: 0; 29 | padding: 70px 0; 30 | text-align: center; 31 | background-color: #28282B; 32 | color: white; 33 | } 34 | input[type=text], #expense-type{ 35 | width: 90%; 36 | height: 40px; 37 | padding: 10px 30px; 38 | } 39 | .add-expense-btn{ 40 | width: 90%; 41 | height: 40px; 42 | background-color: #FF5733; 43 | } 44 | .expense-item-container{ 45 | width: 100%; 46 | display: flex; 47 | margin: 0; 48 | padding: 0; 49 | } 50 | .expense-debit-item-container, .expense-credit-item-container{ 51 | width: 50%; 52 | padding: 10px 10px; 53 | } 54 | .credit-item, .debit-item{ 55 | padding: 5px 2px; 56 | display: flex; 57 | margin-top: 10px; 58 | } 59 | .credit-item{ 60 | background-color: #A3E4D7; 61 | border: #1ABC9C 1.5px solid; 62 | } 63 | .debit-item{ 64 | background-color: #F5B7B1; 65 | border: #FF5733 1.5px solid; 66 | } 67 | .exp-desc{ 68 | width: 65%; 69 | } 70 | .exp-amt{ 71 | width: 25%; 72 | } 73 | .exp-delete{ 74 | width: 10%; 75 | text-align: right; 76 | } 77 | .delete-expense{ 78 | background-color: transparent; 79 | border: #28282B 1px solid; 80 | border-radius: 50%; 81 | height: 20px; 82 | width: 20px; 83 | font-size: 10px; 84 | text-align: center; 85 | } 86 | .app-topic{ 87 | padding: 30px 30px; 88 | margin: 50px 50px; 89 | box-shadow: rgba(64, 211, 105, 0.35) 0px 5px 15px; 90 | background-color: #2ECC71; 91 | text-align: center; 92 | } -------------------------------------------------------------------------------- /06-typescript-expense-tracker/final/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | /* Visit https://aka.ms/tsconfig to read more about this file */ 4 | 5 | /* Projects */ 6 | // "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */ 7 | // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */ 8 | // "tsBuildInfoFile": "./.tsbuildinfo", /* Specify the path to .tsbuildinfo incremental compilation file. */ 9 | // "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */ 10 | // "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */ 11 | // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */ 12 | 13 | /* Language and Environment */ 14 | "target": "ES2015", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */ 15 | // "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */ 16 | // "jsx": "preserve", /* Specify what JSX code is generated. */ 17 | // "experimentalDecorators": true, /* Enable experimental support for legacy experimental decorators. */ 18 | // "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */ 19 | // "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */ 20 | // "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */ 21 | // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */ 22 | // "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */ 23 | // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */ 24 | // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */ 25 | // "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */ 26 | 27 | /* Modules */ 28 | "module": "commonjs", /* Specify what module code is generated. */ 29 | "rootDir": "./src", /* Specify the root folder within your source files. */ 30 | // "moduleResolution": "node10", /* Specify how TypeScript looks up a file from a given module specifier. */ 31 | // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */ 32 | // "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */ 33 | // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */ 34 | // "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */ 35 | // "types": [], /* Specify type package names to be included without being referenced in a source file. */ 36 | // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ 37 | // "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */ 38 | // "allowImportingTsExtensions": true, /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */ 39 | // "resolvePackageJsonExports": true, /* Use the package.json 'exports' field when resolving package imports. */ 40 | // "resolvePackageJsonImports": true, /* Use the package.json 'imports' field when resolving imports. */ 41 | // "customConditions": [], /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */ 42 | // "resolveJsonModule": true, /* Enable importing .json files. */ 43 | // "allowArbitraryExtensions": true, /* Enable importing files with any extension, provided a declaration file is present. */ 44 | // "noResolve": true, /* Disallow 'import's, 'require's or ''s from expanding the number of files TypeScript should add to a project. */ 45 | 46 | /* JavaScript Support */ 47 | // "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */ 48 | // "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */ 49 | // "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */ 50 | 51 | /* Emit */ 52 | // "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */ 53 | // "declarationMap": true, /* Create sourcemaps for d.ts files. */ 54 | // "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */ 55 | // "sourceMap": true, /* Create source map files for emitted JavaScript files. */ 56 | // "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */ 57 | // "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */ 58 | "outDir": "./dist", /* Specify an output folder for all emitted files. */ 59 | // "removeComments": true, /* Disable emitting comments. */ 60 | // "noEmit": true, /* Disable emitting files from a compilation. */ 61 | // "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */ 62 | // "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types. */ 63 | // "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */ 64 | // "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */ 65 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ 66 | // "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */ 67 | // "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */ 68 | // "newLine": "crlf", /* Set the newline character for emitting files. */ 69 | // "stripInternal": true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */ 70 | // "noEmitHelpers": true, /* Disable generating custom helper functions like '__extends' in compiled output. */ 71 | // "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */ 72 | // "preserveConstEnums": true, /* Disable erasing 'const enum' declarations in generated code. */ 73 | // "declarationDir": "./", /* Specify the output directory for generated declaration files. */ 74 | // "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */ 75 | 76 | /* Interop Constraints */ 77 | // "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */ 78 | // "verbatimModuleSyntax": true, /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */ 79 | // "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */ 80 | "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */ 81 | // "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */ 82 | "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */ 83 | 84 | /* Type Checking */ 85 | "strict": true, /* Enable all strict type-checking options. */ 86 | // "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */ 87 | // "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */ 88 | // "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */ 89 | // "strictBindCallApply": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */ 90 | // "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */ 91 | // "noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */ 92 | // "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */ 93 | // "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */ 94 | // "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */ 95 | // "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */ 96 | // "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */ 97 | // "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */ 98 | // "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */ 99 | // "noUncheckedIndexedAccess": true, /* Add 'undefined' to a type when accessed using an index. */ 100 | // "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */ 101 | // "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type. */ 102 | // "allowUnusedLabels": true, /* Disable error reporting for unused labels. */ 103 | // "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */ 104 | 105 | /* Completeness */ 106 | // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */ 107 | "skipLibCheck": true /* Skip type checking all .d.ts files. */ 108 | }, 109 | "include": ["./src"] 110 | } 111 | -------------------------------------------------------------------------------- /06-typescript-expense-tracker/start/dist/app.js: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /06-typescript-expense-tracker/start/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 | TrackIt 12 |
13 |
14 | 0.00 15 |
16 |
17 |
18 | 23 | 24 | 25 | 26 |
27 |
28 |
29 |
30 | 31 |
32 |
33 | 34 |
35 |
36 | 37 | 38 | -------------------------------------------------------------------------------- /06-typescript-expense-tracker/start/src/app.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/typescript-complete-course/09193b1ed6d6243509b1b2de2061f7380ea948d9/06-typescript-expense-tracker/start/src/app.ts -------------------------------------------------------------------------------- /06-typescript-expense-tracker/start/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0px; 3 | padding: 0px; 4 | box-sizing: border-box; 5 | } 6 | body{ 7 | font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', Verdana, sans-serif; 8 | } 9 | .ex-tracker-header{ 10 | /* box-shadow: rgb(196, 190, 190) 0px 2px 8px 0px; */ 11 | padding: 15px 30px; 12 | font-weight:900; 13 | font-size: 28px; 14 | background-color: #28282B; 15 | color: white; 16 | border-bottom: #FF5733 1.5px solid; 17 | } 18 | .total-expense-amount{ 19 | margin: 0; 20 | background-color: #28282B; 21 | color: white; 22 | text-align: center; 23 | padding: 20px 0px; 24 | font-size: 40px; 25 | font-weight: bold; 26 | } 27 | .ex-tracker-form-area{ 28 | margin: 0; 29 | padding: 70px 0; 30 | text-align: center; 31 | background-color: #28282B; 32 | color: white; 33 | } 34 | input[type=text], #expense-type{ 35 | width: 90%; 36 | height: 40px; 37 | padding: 10px 30px; 38 | } 39 | .add-expense-btn{ 40 | width: 90%; 41 | height: 40px; 42 | background-color: #FF5733; 43 | } 44 | .expense-item-container{ 45 | width: 100%; 46 | display: flex; 47 | margin: 0; 48 | padding: 0; 49 | } 50 | .expense-debit-item-container, .expense-credit-item-container{ 51 | width: 50%; 52 | padding: 10px 10px; 53 | } 54 | .credit-item, .debit-item{ 55 | padding: 5px 2px; 56 | display: flex; 57 | margin-top: 10px; 58 | } 59 | .credit-item{ 60 | background-color: #A3E4D7; 61 | border: #1ABC9C 1.5px solid; 62 | } 63 | .debit-item{ 64 | background-color: #F5B7B1; 65 | border: #FF5733 1.5px solid; 66 | } 67 | .exp-desc{ 68 | width: 65%; 69 | } 70 | .exp-amt{ 71 | width: 25%; 72 | } 73 | .exp-delete{ 74 | width: 10%; 75 | text-align: right; 76 | } 77 | .delete-expense{ 78 | background-color: transparent; 79 | border: #28282B 1px solid; 80 | border-radius: 50%; 81 | height: 20px; 82 | width: 20px; 83 | font-size: 10px; 84 | text-align: center; 85 | } 86 | .app-topic{ 87 | padding: 30px 30px; 88 | margin: 50px 50px; 89 | box-shadow: rgba(64, 211, 105, 0.35) 0px 5px 15px; 90 | background-color: #2ECC71; 91 | text-align: center; 92 | } -------------------------------------------------------------------------------- /07-typescript-decorators/final/dist/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | /*********************************************** 3 | * *****UNDERSTANDING DECORATORS**************** 4 | ***********************************************/ 5 | /*function LoggerDecorator(logMsg: string){ 6 | console.log('LOGGER DECORATOR FACTORY') 7 | function Logger(target: Function){ 8 | console.log('LOGGER DECORATOR CALLED') 9 | //console.log(logMsg) 10 | //console.log(target); 11 | } 12 | 13 | return Logger; 14 | } 15 | 16 | function Template(template: string, elementId: string){ 17 | console.log('TEMPLATE DECORATOR FACTORY') 18 | return function(target: any){ 19 | console.log('TEMPLATE DECORATOR CALLED') 20 | const u = new target(); 21 | const container = document.getElementById(elementId); 22 | if(container){ 23 | container.innerHTML = template; 24 | const h2 = container.querySelector('h2'); 25 | if(h2){ 26 | h2.textContent = 'Hello Mr. ' + u.name; 27 | } 28 | } 29 | } 30 | } 31 | 32 | 33 | @LoggerDecorator('This is custom Logger...') 34 | @Template('

Dynamic Header

', 'container') 35 | class User{ 36 | name: string = 'John'; 37 | age: number = 28; 38 | 39 | constructor(){ 40 | console.log('User class constructor called...') 41 | } 42 | } 43 | 44 | //const u = new User(); 45 | */ 46 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { 47 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; 48 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); 49 | else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; 50 | return c > 3 && r && Object.defineProperty(target, key, r), r; 51 | }; 52 | /*********************************************** 53 | * *****PROPERTY DECORATOR********************** 54 | ***********************************************/ 55 | /*function Capitalize(target: any, propertyKey: string): any{ 56 | let value: string; 57 | 58 | const getter = function(){ 59 | return value.charAt(0).toUpperCase() + value.slice(1); // S + amsung 60 | } 61 | 62 | const setter = function(newValue: string){ 63 | value = newValue.toLowerCase() 64 | } 65 | 66 | return { 67 | get: getter, 68 | set: setter 69 | } 70 | } 71 | 72 | function AccessLogger(target: any, name: string, descriptor: PropertyDescriptor){ 73 | const getter = descriptor.get; 74 | const setter = descriptor.set; 75 | 76 | descriptor.get = function(){ 77 | console.log(`Accessing value for property ${name}...`); 78 | if(getter){ 79 | return getter.call(this); 80 | } 81 | return undefined; 82 | } 83 | 84 | descriptor.set = function(value: number){ 85 | console.log(`Setting value for property ${name}...`); 86 | if(setter){ 87 | setter.call(this, value); 88 | } 89 | } 90 | 91 | return descriptor; 92 | } 93 | 94 | class Product{ 95 | @Capitalize 96 | name: string; 97 | 98 | private _price: number; 99 | 100 | @AccessLogger 101 | get price(){ 102 | return this._price; 103 | } 104 | 105 | set price(value: number){ 106 | if(value > 0){ 107 | this._price = value; 108 | }else{ 109 | throw new Error("Price should be a value greater than zero"); 110 | } 111 | } 112 | 113 | constructor(name: string, price: number){ 114 | this.name = name; 115 | this._price = price; 116 | } 117 | } 118 | 119 | const p = new Product('apple', 2400); 120 | p.price = 3000; 121 | console.log(p.price); 122 | */ 123 | /*********************************************** 124 | * *****WHEN A DECORATOR EXECUTES*************** 125 | ***********************************************/ 126 | /*function CLS_DECORATOR(target: any){ 127 | console.log('CLASS DECORATOR CALLED!'); 128 | } 129 | 130 | function PROP_DECORATOR(target: any, propertyKey: string): any{ 131 | console.log('PROPERTY DECORATOR CALLED!'); 132 | } 133 | 134 | function ACC_DECORATOR(target: any, name: string, descriptor: PropertyDescriptor){ 135 | console.log('ACCESSOR DECORATOR CALLED'); 136 | } 137 | 138 | function PARAM_DECORATOR(target: any, paramName: string, index: number){ 139 | console.log('PARAMETER DECORATOR CALLED'); 140 | } 141 | 142 | function METH_DECORATOR(target: any, methodName: string, descriptor: PropertyDescriptor){ 143 | console.log('METHOD DECORATOR CALLED!'); 144 | } 145 | 146 | @CLS_DECORATOR 147 | class Person{ 148 | @PROP_DECORATOR 149 | name: string; 150 | 151 | constructor(n: string){ 152 | this.name = n; 153 | } 154 | 155 | @METH_DECORATOR 156 | calculateAge(@PARAM_DECORATOR dob: string){ 157 | //calculate date of birth; 158 | } 159 | } 160 | */ 161 | /*********************************************** 162 | * *****RETURNING A CLASS FROM A DECORATOR ***** 163 | ***********************************************/ 164 | /*function Logger(target: new (...args: any[]) => {}): any{ 165 | class LoggingClass extends target{ 166 | static company: string = 'Google'; 167 | constructor(...args: any[]){ 168 | super(...args); 169 | console.log('Creating a new LoggingClass Instance...') 170 | } 171 | } 172 | 173 | return LoggingClass; 174 | } 175 | 176 | @Logger 177 | class Person{ 178 | name: string; 179 | 180 | constructor(n: string){ 181 | this.name = n; 182 | } 183 | } 184 | 185 | const p = new Person('john'); 186 | console.log(p); 187 | */ 188 | /*********************************************** 189 | * *****CREATING A VALIDATION DECORATOR*** ***** 190 | ***********************************************/ 191 | function required(target, propName) { 192 | validateObject[target.constructor.name] = Object.assign(Object.assign({}, validateObject[target.constructor.name]), { [propName]: ['required'] }); 193 | } 194 | function minlength(length) { 195 | return function (target, propName) { 196 | validateObject[target.constructor.name] = Object.assign(Object.assign({}, validateObject[target.constructor.name]), { [propName]: ['minlength'] }); 197 | }; 198 | } 199 | function positiveNumber(target, propName) { 200 | validateObject[target.constructor.name] = Object.assign(Object.assign({}, validateObject[target.constructor.name]), { [propName]: ['positiveNumber'] }); 201 | } 202 | const validateObject = {}; 203 | function validate(obj) { 204 | let isValid = true; 205 | const validateClass = validateObject[obj.constructor.name]; 206 | if (!validateClass) { 207 | return true; 208 | } 209 | for (let prop in validateClass) { 210 | for (let validator of validateClass[prop]) { 211 | switch (validator) { 212 | case 'required': 213 | isValid = isValid && !!obj[prop]; 214 | break; 215 | case 'minlength': 216 | isValid = isValid && obj[prop].length < 3; 217 | break; 218 | case 'positiveNumber': 219 | isValid = isValid && obj[prop].length < 0; 220 | break; 221 | } 222 | } 223 | } 224 | return isValid; 225 | } 226 | class User { 227 | constructor(uname, age) { 228 | this.username = uname; 229 | this.age = age; 230 | } 231 | } 232 | __decorate([ 233 | required, 234 | minlength(3) 235 | ], User.prototype, "username", void 0); 236 | __decorate([ 237 | positiveNumber 238 | ], User.prototype, "age", void 0); 239 | const u1 = new User('john', 28); 240 | const u2 = new User('', 30); 241 | if (!validate(u2)) { 242 | alert("Invalid Input."); 243 | } 244 | else { 245 | console.log('user created successfully'); 246 | } 247 | -------------------------------------------------------------------------------- /07-typescript-decorators/final/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 |

A Complete TypeScript Course

12 |
13 |
14 |

Decorators in TypeScript

15 |
16 |
17 | 18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /07-typescript-decorators/final/src/app.ts: -------------------------------------------------------------------------------- 1 | /*********************************************** 2 | * *****UNDERSTANDING DECORATORS**************** 3 | ***********************************************/ 4 | /*function LoggerDecorator(logMsg: string){ 5 | console.log('LOGGER DECORATOR FACTORY') 6 | function Logger(target: Function){ 7 | console.log('LOGGER DECORATOR CALLED') 8 | //console.log(logMsg) 9 | //console.log(target); 10 | } 11 | 12 | return Logger; 13 | } 14 | 15 | function Template(template: string, elementId: string){ 16 | console.log('TEMPLATE DECORATOR FACTORY') 17 | return function(target: any){ 18 | console.log('TEMPLATE DECORATOR CALLED') 19 | const u = new target(); 20 | const container = document.getElementById(elementId); 21 | if(container){ 22 | container.innerHTML = template; 23 | const h2 = container.querySelector('h2'); 24 | if(h2){ 25 | h2.textContent = 'Hello Mr. ' + u.name; 26 | } 27 | } 28 | } 29 | } 30 | 31 | 32 | @LoggerDecorator('This is custom Logger...') 33 | @Template('

Dynamic Header

', 'container') 34 | class User{ 35 | name: string = 'John'; 36 | age: number = 28; 37 | 38 | constructor(){ 39 | console.log('User class constructor called...') 40 | } 41 | } 42 | 43 | //const u = new User(); 44 | */ 45 | 46 | 47 | 48 | /*********************************************** 49 | * *****PROPERTY DECORATOR********************** 50 | ***********************************************/ 51 | /*function Capitalize(target: any, propertyKey: string): any{ 52 | let value: string; 53 | 54 | const getter = function(){ 55 | return value.charAt(0).toUpperCase() + value.slice(1); // S + amsung 56 | } 57 | 58 | const setter = function(newValue: string){ 59 | value = newValue.toLowerCase() 60 | } 61 | 62 | return { 63 | get: getter, 64 | set: setter 65 | } 66 | } 67 | 68 | function AccessLogger(target: any, name: string, descriptor: PropertyDescriptor){ 69 | const getter = descriptor.get; 70 | const setter = descriptor.set; 71 | 72 | descriptor.get = function(){ 73 | console.log(`Accessing value for property ${name}...`); 74 | if(getter){ 75 | return getter.call(this); 76 | } 77 | return undefined; 78 | } 79 | 80 | descriptor.set = function(value: number){ 81 | console.log(`Setting value for property ${name}...`); 82 | if(setter){ 83 | setter.call(this, value); 84 | } 85 | } 86 | 87 | return descriptor; 88 | } 89 | 90 | class Product{ 91 | @Capitalize 92 | name: string; 93 | 94 | private _price: number; 95 | 96 | @AccessLogger 97 | get price(){ 98 | return this._price; 99 | } 100 | 101 | set price(value: number){ 102 | if(value > 0){ 103 | this._price = value; 104 | }else{ 105 | throw new Error("Price should be a value greater than zero"); 106 | } 107 | } 108 | 109 | constructor(name: string, price: number){ 110 | this.name = name; 111 | this._price = price; 112 | } 113 | } 114 | 115 | const p = new Product('apple', 2400); 116 | p.price = 3000; 117 | console.log(p.price); 118 | */ 119 | 120 | 121 | 122 | /*********************************************** 123 | * *****WHEN A DECORATOR EXECUTES*************** 124 | ***********************************************/ 125 | /*function CLS_DECORATOR(target: any){ 126 | console.log('CLASS DECORATOR CALLED!'); 127 | } 128 | 129 | function PROP_DECORATOR(target: any, propertyKey: string): any{ 130 | console.log('PROPERTY DECORATOR CALLED!'); 131 | } 132 | 133 | function ACC_DECORATOR(target: any, name: string, descriptor: PropertyDescriptor){ 134 | console.log('ACCESSOR DECORATOR CALLED'); 135 | } 136 | 137 | function PARAM_DECORATOR(target: any, paramName: string, index: number){ 138 | console.log('PARAMETER DECORATOR CALLED'); 139 | } 140 | 141 | function METH_DECORATOR(target: any, methodName: string, descriptor: PropertyDescriptor){ 142 | console.log('METHOD DECORATOR CALLED!'); 143 | } 144 | 145 | @CLS_DECORATOR 146 | class Person{ 147 | @PROP_DECORATOR 148 | name: string; 149 | 150 | constructor(n: string){ 151 | this.name = n; 152 | } 153 | 154 | @METH_DECORATOR 155 | calculateAge(@PARAM_DECORATOR dob: string){ 156 | //calculate date of birth; 157 | } 158 | } 159 | */ 160 | 161 | 162 | 163 | /*********************************************** 164 | * *****RETURNING A CLASS FROM A DECORATOR ***** 165 | ***********************************************/ 166 | /*function Logger(target: new (...args: any[]) => {}): any{ 167 | class LoggingClass extends target{ 168 | static company: string = 'Google'; 169 | constructor(...args: any[]){ 170 | super(...args); 171 | console.log('Creating a new LoggingClass Instance...') 172 | } 173 | } 174 | 175 | return LoggingClass; 176 | } 177 | 178 | @Logger 179 | class Person{ 180 | name: string; 181 | 182 | constructor(n: string){ 183 | this.name = n; 184 | } 185 | } 186 | 187 | const p = new Person('john'); 188 | console.log(p); 189 | */ 190 | 191 | 192 | 193 | /*********************************************** 194 | * *****CREATING A VALIDATION DECORATOR*** ***** 195 | ***********************************************/ 196 | function required(target: any, propName: string){ 197 | validateObject[target.constructor.name]= { 198 | ...validateObject[target.constructor.name], 199 | [propName]: ['required'] 200 | } 201 | } 202 | 203 | function minlength(length: number){ 204 | return function(target: any, propName: string){ 205 | validateObject[target.constructor.name]= { 206 | ...validateObject[target.constructor.name], 207 | [propName]: ['minlength'] 208 | } 209 | } 210 | } 211 | function positiveNumber(target: any, propName: string){ 212 | validateObject[target.constructor.name]= { 213 | ...validateObject[target.constructor.name], 214 | [propName]: ['positiveNumber'] 215 | } 216 | } 217 | 218 | interface IValidator{ 219 | [prop: string]: { 220 | [propKey: string]: string[]; // ['required', 'minlength'] 221 | } 222 | } 223 | 224 | const validateObject: IValidator = {}; 225 | 226 | function validate(obj: any): boolean{ 227 | let isValid = true; 228 | 229 | const validateClass = validateObject[obj.constructor.name]; 230 | if(!validateClass){ 231 | return true; 232 | } 233 | 234 | for(let prop in validateClass){ 235 | for (let validator of validateClass[prop]){ 236 | switch(validator){ 237 | case 'required': 238 | isValid = isValid && !!obj[prop]; 239 | break; 240 | case 'minlength': 241 | isValid = isValid && obj[prop].length < 3; 242 | break; 243 | case 'positiveNumber': 244 | isValid = isValid && obj[prop].length < 0; 245 | break; 246 | } 247 | } 248 | } 249 | 250 | return isValid; 251 | 252 | } 253 | 254 | class User{ 255 | @required 256 | @minlength(3) 257 | username: string; 258 | 259 | @positiveNumber 260 | age: number; 261 | 262 | constructor(uname: string, age: number){ 263 | this.username = uname; 264 | this.age = age; 265 | } 266 | } 267 | 268 | const u1 = new User('john', 28); 269 | const u2 = new User('', 30); 270 | 271 | if(!validate(u2)){ 272 | alert("Invalid Input."); 273 | }else{ 274 | console.log('user created successfully'); 275 | } -------------------------------------------------------------------------------- /07-typescript-decorators/final/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0px; 3 | padding: 0px; 4 | box-sizing: border-box; 5 | } 6 | body{ 7 | background-color: #28282B; 8 | color: white; 9 | font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', Verdana, sans-serif; 10 | } 11 | .app-header{ 12 | box-shadow: rgb(196, 190, 190) 0px 2px 8px 0px; 13 | padding: 15px 30px; 14 | } 15 | .app-topic{ 16 | padding: 30px 30px; 17 | margin: 50px 50px; 18 | box-shadow: rgba(64, 211, 105, 0.35) 0px 5px 15px; 19 | background-color: #2ECC71; 20 | text-align: center; 21 | } -------------------------------------------------------------------------------- /07-typescript-decorators/final/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | /* Visit https://aka.ms/tsconfig to read more about this file */ 4 | 5 | /* Projects */ 6 | // "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */ 7 | // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */ 8 | // "tsBuildInfoFile": "./.tsbuildinfo", /* Specify the path to .tsbuildinfo incremental compilation file. */ 9 | // "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */ 10 | // "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */ 11 | // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */ 12 | 13 | /* Language and Environment */ 14 | "target": "ES2015", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */ 15 | // "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */ 16 | // "jsx": "preserve", /* Specify what JSX code is generated. */ 17 | "experimentalDecorators": true, /* Enable experimental support for legacy experimental decorators. */ 18 | // "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */ 19 | // "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */ 20 | // "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */ 21 | // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */ 22 | // "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */ 23 | // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */ 24 | // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */ 25 | // "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */ 26 | 27 | /* Modules */ 28 | "module": "commonjs", /* Specify what module code is generated. */ 29 | "rootDir": "./src", /* Specify the root folder within your source files. */ 30 | // "moduleResolution": "node10", /* Specify how TypeScript looks up a file from a given module specifier. */ 31 | // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */ 32 | // "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */ 33 | // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */ 34 | // "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */ 35 | // "types": [], /* Specify type package names to be included without being referenced in a source file. */ 36 | // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ 37 | // "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */ 38 | // "allowImportingTsExtensions": true, /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */ 39 | // "resolvePackageJsonExports": true, /* Use the package.json 'exports' field when resolving package imports. */ 40 | // "resolvePackageJsonImports": true, /* Use the package.json 'imports' field when resolving imports. */ 41 | // "customConditions": [], /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */ 42 | // "resolveJsonModule": true, /* Enable importing .json files. */ 43 | // "allowArbitraryExtensions": true, /* Enable importing files with any extension, provided a declaration file is present. */ 44 | // "noResolve": true, /* Disallow 'import's, 'require's or ''s from expanding the number of files TypeScript should add to a project. */ 45 | 46 | /* JavaScript Support */ 47 | // "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */ 48 | // "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */ 49 | // "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */ 50 | 51 | /* Emit */ 52 | // "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */ 53 | // "declarationMap": true, /* Create sourcemaps for d.ts files. */ 54 | // "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */ 55 | // "sourceMap": true, /* Create source map files for emitted JavaScript files. */ 56 | // "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */ 57 | // "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */ 58 | "outDir": "./dist", /* Specify an output folder for all emitted files. */ 59 | // "removeComments": true, /* Disable emitting comments. */ 60 | // "noEmit": true, /* Disable emitting files from a compilation. */ 61 | // "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */ 62 | // "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types. */ 63 | // "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */ 64 | // "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */ 65 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ 66 | // "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */ 67 | // "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */ 68 | // "newLine": "crlf", /* Set the newline character for emitting files. */ 69 | // "stripInternal": true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */ 70 | // "noEmitHelpers": true, /* Disable generating custom helper functions like '__extends' in compiled output. */ 71 | // "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */ 72 | // "preserveConstEnums": true, /* Disable erasing 'const enum' declarations in generated code. */ 73 | // "declarationDir": "./", /* Specify the output directory for generated declaration files. */ 74 | // "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */ 75 | 76 | /* Interop Constraints */ 77 | // "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */ 78 | // "verbatimModuleSyntax": true, /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */ 79 | // "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */ 80 | "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */ 81 | // "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */ 82 | "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */ 83 | 84 | /* Type Checking */ 85 | "strict": true, /* Enable all strict type-checking options. */ 86 | // "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */ 87 | // "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */ 88 | // "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */ 89 | // "strictBindCallApply": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */ 90 | // "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */ 91 | // "noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */ 92 | // "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */ 93 | // "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */ 94 | // "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */ 95 | // "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */ 96 | // "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */ 97 | // "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */ 98 | // "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */ 99 | // "noUncheckedIndexedAccess": true, /* Add 'undefined' to a type when accessed using an index. */ 100 | // "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */ 101 | // "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type. */ 102 | // "allowUnusedLabels": true, /* Disable error reporting for unused labels. */ 103 | // "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */ 104 | 105 | /* Completeness */ 106 | // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */ 107 | "skipLibCheck": true /* Skip type checking all .d.ts files. */ 108 | }, 109 | "include": ["./src"] 110 | } 111 | -------------------------------------------------------------------------------- /07-typescript-decorators/start/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 |

A Complete TypeScript Course

12 |
13 |
14 |

Decorators in TypeScript

15 |
16 |
17 | 18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /07-typescript-decorators/start/src/app.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/typescript-complete-course/09193b1ed6d6243509b1b2de2061f7380ea948d9/07-typescript-decorators/start/src/app.ts -------------------------------------------------------------------------------- /07-typescript-decorators/start/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0px; 3 | padding: 0px; 4 | box-sizing: border-box; 5 | } 6 | body{ 7 | background-color: #28282B; 8 | color: white; 9 | font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', Verdana, sans-serif; 10 | } 11 | .app-header{ 12 | box-shadow: rgb(196, 190, 190) 0px 2px 8px 0px; 13 | padding: 15px 30px; 14 | } 15 | .app-topic{ 16 | padding: 30px 30px; 17 | margin: 50px 50px; 18 | box-shadow: rgba(64, 211, 105, 0.35) 0px 5px 15px; 19 | background-color: #2ECC71; 20 | text-align: center; 21 | } -------------------------------------------------------------------------------- /07-typescript-decorators/start/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | /* Visit https://aka.ms/tsconfig to read more about this file */ 4 | 5 | /* Projects */ 6 | // "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */ 7 | // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */ 8 | // "tsBuildInfoFile": "./.tsbuildinfo", /* Specify the path to .tsbuildinfo incremental compilation file. */ 9 | // "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */ 10 | // "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */ 11 | // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */ 12 | 13 | /* Language and Environment */ 14 | "target": "ES2015", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */ 15 | // "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */ 16 | // "jsx": "preserve", /* Specify what JSX code is generated. */ 17 | "experimentalDecorators": true, /* Enable experimental support for legacy experimental decorators. */ 18 | // "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */ 19 | // "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */ 20 | // "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */ 21 | // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */ 22 | // "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */ 23 | // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */ 24 | // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */ 25 | // "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */ 26 | 27 | /* Modules */ 28 | "module": "commonjs", /* Specify what module code is generated. */ 29 | "rootDir": "./src", /* Specify the root folder within your source files. */ 30 | // "moduleResolution": "node10", /* Specify how TypeScript looks up a file from a given module specifier. */ 31 | // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */ 32 | // "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */ 33 | // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */ 34 | // "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */ 35 | // "types": [], /* Specify type package names to be included without being referenced in a source file. */ 36 | // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ 37 | // "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */ 38 | // "allowImportingTsExtensions": true, /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */ 39 | // "resolvePackageJsonExports": true, /* Use the package.json 'exports' field when resolving package imports. */ 40 | // "resolvePackageJsonImports": true, /* Use the package.json 'imports' field when resolving imports. */ 41 | // "customConditions": [], /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */ 42 | // "resolveJsonModule": true, /* Enable importing .json files. */ 43 | // "allowArbitraryExtensions": true, /* Enable importing files with any extension, provided a declaration file is present. */ 44 | // "noResolve": true, /* Disallow 'import's, 'require's or ''s from expanding the number of files TypeScript should add to a project. */ 45 | 46 | /* JavaScript Support */ 47 | // "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */ 48 | // "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */ 49 | // "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */ 50 | 51 | /* Emit */ 52 | // "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */ 53 | // "declarationMap": true, /* Create sourcemaps for d.ts files. */ 54 | // "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */ 55 | // "sourceMap": true, /* Create source map files for emitted JavaScript files. */ 56 | // "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */ 57 | // "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */ 58 | "outDir": "./dist", /* Specify an output folder for all emitted files. */ 59 | // "removeComments": true, /* Disable emitting comments. */ 60 | // "noEmit": true, /* Disable emitting files from a compilation. */ 61 | // "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */ 62 | // "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types. */ 63 | // "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */ 64 | // "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */ 65 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ 66 | // "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */ 67 | // "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */ 68 | // "newLine": "crlf", /* Set the newline character for emitting files. */ 69 | // "stripInternal": true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */ 70 | // "noEmitHelpers": true, /* Disable generating custom helper functions like '__extends' in compiled output. */ 71 | // "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */ 72 | // "preserveConstEnums": true, /* Disable erasing 'const enum' declarations in generated code. */ 73 | // "declarationDir": "./", /* Specify the output directory for generated declaration files. */ 74 | // "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */ 75 | 76 | /* Interop Constraints */ 77 | // "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */ 78 | // "verbatimModuleSyntax": true, /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */ 79 | // "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */ 80 | "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */ 81 | // "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */ 82 | "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */ 83 | 84 | /* Type Checking */ 85 | "strict": true, /* Enable all strict type-checking options. */ 86 | // "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */ 87 | // "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */ 88 | // "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */ 89 | // "strictBindCallApply": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */ 90 | // "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */ 91 | // "noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */ 92 | // "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */ 93 | // "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */ 94 | // "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */ 95 | // "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */ 96 | // "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */ 97 | // "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */ 98 | // "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */ 99 | // "noUncheckedIndexedAccess": true, /* Add 'undefined' to a type when accessed using an index. */ 100 | // "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */ 101 | // "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type. */ 102 | // "allowUnusedLabels": true, /* Disable error reporting for unused labels. */ 103 | // "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */ 104 | 105 | /* Completeness */ 106 | // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */ 107 | "skipLibCheck": true /* Skip type checking all .d.ts files. */ 108 | }, 109 | "include": ["./src"] 110 | } 111 | -------------------------------------------------------------------------------- /08-typesctipt-namespace/final/dist/app.js: -------------------------------------------------------------------------------- 1 | //Understanding NameSpace in TypeScript 2 | import * as actions from './userUtils/user-actions.js'; 3 | const u1 = actions.createUser('john', 28, 'male'); 4 | const u2 = actions.createUser('mery', 30, 'female'); 5 | console.log(u1, u2); 6 | console.log(actions.getUsers()); 7 | -------------------------------------------------------------------------------- /08-typesctipt-namespace/final/dist/models/user.js: -------------------------------------------------------------------------------- 1 | export default class User { 2 | constructor(name, age, gender) { 3 | this.name = name; 4 | this.age = age; 5 | this.gender = gender; 6 | } 7 | } 8 | export const PI = 3.14; 9 | console.log('User.js file executing'); 10 | -------------------------------------------------------------------------------- /08-typesctipt-namespace/final/dist/userUtils/user-actions.js: -------------------------------------------------------------------------------- 1 | import User from './../models/user.js'; 2 | let userList = []; 3 | export function createUser(name, age, gender) { 4 | const u = new User(name, age, gender); 5 | userList.push(u); 6 | return u; 7 | } 8 | export function getUsers() { 9 | return userList; 10 | } 11 | -------------------------------------------------------------------------------- /08-typesctipt-namespace/final/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 |

A Complete TypeScript Course

12 |
13 |
14 |

TypeScript Namespace & ES6 Modules

15 |
16 |
17 | 18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /08-typesctipt-namespace/final/src/app.ts: -------------------------------------------------------------------------------- 1 | //Understanding NameSpace in TypeScript 2 | import * as actions from './userUtils/user-actions.js'; 3 | import User from './models/user.js'; 4 | 5 | const u1 = actions.createUser('john', 28, 'male'); 6 | const u2 = actions.createUser('mery', 30, 'female'); 7 | console.log(u1, u2); 8 | 9 | console.log(actions.getUsers()); 10 | 11 | -------------------------------------------------------------------------------- /08-typesctipt-namespace/final/src/models/user.ts: -------------------------------------------------------------------------------- 1 | 2 | export default class User{ 3 | constructor(public name:string, public age: number, public gender: string){ 4 | 5 | } 6 | } 7 | 8 | export const PI = 3.14; 9 | console.log('User.js file executing'); 10 | -------------------------------------------------------------------------------- /08-typesctipt-namespace/final/src/userUtils/user-actions.ts: -------------------------------------------------------------------------------- 1 | import User, { PI } from './../models/user.js'; 2 | 3 | let userList: User[] = []; 4 | 5 | export function createUser(name: string, age: number, gender: string){ 6 | const u = new User(name, age, gender); 7 | userList.push(u); 8 | return u; 9 | } 10 | 11 | export function getUsers(){ 12 | return userList; 13 | } 14 | -------------------------------------------------------------------------------- /08-typesctipt-namespace/final/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0px; 3 | padding: 0px; 4 | box-sizing: border-box; 5 | } 6 | body{ 7 | background-color: #28282B; 8 | color: white; 9 | font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', Verdana, sans-serif; 10 | } 11 | .app-header{ 12 | box-shadow: rgb(196, 190, 190) 0px 2px 8px 0px; 13 | padding: 15px 30px; 14 | } 15 | .app-topic{ 16 | padding: 30px 30px; 17 | margin: 50px 50px; 18 | box-shadow: rgba(64, 211, 105, 0.35) 0px 5px 15px; 19 | background-color: #2ECC71; 20 | text-align: center; 21 | } -------------------------------------------------------------------------------- /08-typesctipt-namespace/start/dist/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | /*********************************************** 3 | * *****UNDERSTANDING DECORATORS**************** 4 | ***********************************************/ 5 | /*function LoggerDecorator(logMsg: string){ 6 | console.log('LOGGER DECORATOR FACTORY') 7 | function Logger(target: Function){ 8 | console.log('LOGGER DECORATOR CALLED') 9 | //console.log(logMsg) 10 | //console.log(target); 11 | } 12 | 13 | return Logger; 14 | } 15 | 16 | function Template(template: string, elementId: string){ 17 | console.log('TEMPLATE DECORATOR FACTORY') 18 | return function(target: any){ 19 | console.log('TEMPLATE DECORATOR CALLED') 20 | const u = new target(); 21 | const container = document.getElementById(elementId); 22 | if(container){ 23 | container.innerHTML = template; 24 | const h2 = container.querySelector('h2'); 25 | if(h2){ 26 | h2.textContent = 'Hello Mr. ' + u.name; 27 | } 28 | } 29 | } 30 | } 31 | 32 | 33 | @LoggerDecorator('This is custom Logger...') 34 | @Template('

Dynamic Header

', 'container') 35 | class User{ 36 | name: string = 'John'; 37 | age: number = 28; 38 | 39 | constructor(){ 40 | console.log('User class constructor called...') 41 | } 42 | } 43 | 44 | //const u = new User(); 45 | */ 46 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { 47 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; 48 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); 49 | else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; 50 | return c > 3 && r && Object.defineProperty(target, key, r), r; 51 | }; 52 | /*********************************************** 53 | * *****PROPERTY DECORATOR********************** 54 | ***********************************************/ 55 | /*function Capitalize(target: any, propertyKey: string): any{ 56 | let value: string; 57 | 58 | const getter = function(){ 59 | return value.charAt(0).toUpperCase() + value.slice(1); // S + amsung 60 | } 61 | 62 | const setter = function(newValue: string){ 63 | value = newValue.toLowerCase() 64 | } 65 | 66 | return { 67 | get: getter, 68 | set: setter 69 | } 70 | } 71 | 72 | function AccessLogger(target: any, name: string, descriptor: PropertyDescriptor){ 73 | const getter = descriptor.get; 74 | const setter = descriptor.set; 75 | 76 | descriptor.get = function(){ 77 | console.log(`Accessing value for property ${name}...`); 78 | if(getter){ 79 | return getter.call(this); 80 | } 81 | return undefined; 82 | } 83 | 84 | descriptor.set = function(value: number){ 85 | console.log(`Setting value for property ${name}...`); 86 | if(setter){ 87 | setter.call(this, value); 88 | } 89 | } 90 | 91 | return descriptor; 92 | } 93 | 94 | class Product{ 95 | @Capitalize 96 | name: string; 97 | 98 | private _price: number; 99 | 100 | @AccessLogger 101 | get price(){ 102 | return this._price; 103 | } 104 | 105 | set price(value: number){ 106 | if(value > 0){ 107 | this._price = value; 108 | }else{ 109 | throw new Error("Price should be a value greater than zero"); 110 | } 111 | } 112 | 113 | constructor(name: string, price: number){ 114 | this.name = name; 115 | this._price = price; 116 | } 117 | } 118 | 119 | const p = new Product('apple', 2400); 120 | p.price = 3000; 121 | console.log(p.price); 122 | */ 123 | /*********************************************** 124 | * *****WHEN A DECORATOR EXECUTES*************** 125 | ***********************************************/ 126 | /*function CLS_DECORATOR(target: any){ 127 | console.log('CLASS DECORATOR CALLED!'); 128 | } 129 | 130 | function PROP_DECORATOR(target: any, propertyKey: string): any{ 131 | console.log('PROPERTY DECORATOR CALLED!'); 132 | } 133 | 134 | function ACC_DECORATOR(target: any, name: string, descriptor: PropertyDescriptor){ 135 | console.log('ACCESSOR DECORATOR CALLED'); 136 | } 137 | 138 | function PARAM_DECORATOR(target: any, paramName: string, index: number){ 139 | console.log('PARAMETER DECORATOR CALLED'); 140 | } 141 | 142 | function METH_DECORATOR(target: any, methodName: string, descriptor: PropertyDescriptor){ 143 | console.log('METHOD DECORATOR CALLED!'); 144 | } 145 | 146 | @CLS_DECORATOR 147 | class Person{ 148 | @PROP_DECORATOR 149 | name: string; 150 | 151 | constructor(n: string){ 152 | this.name = n; 153 | } 154 | 155 | @METH_DECORATOR 156 | calculateAge(@PARAM_DECORATOR dob: string){ 157 | //calculate date of birth; 158 | } 159 | } 160 | */ 161 | /*********************************************** 162 | * *****RETURNING A CLASS FROM A DECORATOR ***** 163 | ***********************************************/ 164 | function Logger(target) { 165 | class LoggingClass extends target { 166 | constructor(...args) { 167 | super(...args); 168 | console.log('Creating a new LoggingClass Instance...'); 169 | } 170 | } 171 | LoggingClass.company = 'Google'; 172 | return LoggingClass; 173 | } 174 | let Person = class Person { 175 | constructor(n) { 176 | this.name = n; 177 | } 178 | }; 179 | Person = __decorate([ 180 | Logger 181 | ], Person); 182 | const p = new Person('john'); 183 | console.log(p); 184 | -------------------------------------------------------------------------------- /08-typesctipt-namespace/start/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 |

A Complete TypeScript Course

12 |
13 |
14 |

TypeScript Namespace & ES6 Modules

15 |
16 |
17 | 18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /08-typesctipt-namespace/start/src/app.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/typescript-complete-course/09193b1ed6d6243509b1b2de2061f7380ea948d9/08-typesctipt-namespace/start/src/app.ts -------------------------------------------------------------------------------- /08-typesctipt-namespace/start/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0px; 3 | padding: 0px; 4 | box-sizing: border-box; 5 | } 6 | body{ 7 | background-color: #28282B; 8 | color: white; 9 | font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', Verdana, sans-serif; 10 | } 11 | .app-header{ 12 | box-shadow: rgb(196, 190, 190) 0px 2px 8px 0px; 13 | padding: 15px 30px; 14 | } 15 | .app-topic{ 16 | padding: 30px 30px; 17 | margin: 50px 50px; 18 | box-shadow: rgba(64, 211, 105, 0.35) 0px 5px 15px; 19 | background-color: #2ECC71; 20 | text-align: center; 21 | } -------------------------------------------------------------------------------- /08-typesctipt-namespace/start/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | /* Visit https://aka.ms/tsconfig to read more about this file */ 4 | 5 | /* Projects */ 6 | // "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */ 7 | // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */ 8 | // "tsBuildInfoFile": "./.tsbuildinfo", /* Specify the path to .tsbuildinfo incremental compilation file. */ 9 | // "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */ 10 | // "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */ 11 | // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */ 12 | 13 | /* Language and Environment */ 14 | "target": "ES2015", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */ 15 | // "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */ 16 | // "jsx": "preserve", /* Specify what JSX code is generated. */ 17 | "experimentalDecorators": true, /* Enable experimental support for legacy experimental decorators. */ 18 | // "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */ 19 | // "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */ 20 | // "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */ 21 | // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */ 22 | // "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */ 23 | // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */ 24 | // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */ 25 | // "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */ 26 | 27 | /* Modules */ 28 | "module": "commonjs", /* Specify what module code is generated. */ 29 | "rootDir": "./src", /* Specify the root folder within your source files. */ 30 | // "moduleResolution": "node10", /* Specify how TypeScript looks up a file from a given module specifier. */ 31 | // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */ 32 | // "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */ 33 | // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */ 34 | // "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */ 35 | // "types": [], /* Specify type package names to be included without being referenced in a source file. */ 36 | // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ 37 | // "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */ 38 | // "allowImportingTsExtensions": true, /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */ 39 | // "resolvePackageJsonExports": true, /* Use the package.json 'exports' field when resolving package imports. */ 40 | // "resolvePackageJsonImports": true, /* Use the package.json 'imports' field when resolving imports. */ 41 | // "customConditions": [], /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */ 42 | // "resolveJsonModule": true, /* Enable importing .json files. */ 43 | // "allowArbitraryExtensions": true, /* Enable importing files with any extension, provided a declaration file is present. */ 44 | // "noResolve": true, /* Disallow 'import's, 'require's or ''s from expanding the number of files TypeScript should add to a project. */ 45 | 46 | /* JavaScript Support */ 47 | // "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */ 48 | // "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */ 49 | // "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */ 50 | 51 | /* Emit */ 52 | // "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */ 53 | // "declarationMap": true, /* Create sourcemaps for d.ts files. */ 54 | // "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */ 55 | // "sourceMap": true, /* Create source map files for emitted JavaScript files. */ 56 | // "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */ 57 | // "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */ 58 | "outDir": "./dist", /* Specify an output folder for all emitted files. */ 59 | // "removeComments": true, /* Disable emitting comments. */ 60 | // "noEmit": true, /* Disable emitting files from a compilation. */ 61 | // "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */ 62 | // "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types. */ 63 | // "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */ 64 | // "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */ 65 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ 66 | // "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */ 67 | // "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */ 68 | // "newLine": "crlf", /* Set the newline character for emitting files. */ 69 | // "stripInternal": true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */ 70 | // "noEmitHelpers": true, /* Disable generating custom helper functions like '__extends' in compiled output. */ 71 | // "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */ 72 | // "preserveConstEnums": true, /* Disable erasing 'const enum' declarations in generated code. */ 73 | // "declarationDir": "./", /* Specify the output directory for generated declaration files. */ 74 | // "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */ 75 | 76 | /* Interop Constraints */ 77 | // "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */ 78 | // "verbatimModuleSyntax": true, /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */ 79 | // "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */ 80 | "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */ 81 | // "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */ 82 | "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */ 83 | 84 | /* Type Checking */ 85 | "strict": true, /* Enable all strict type-checking options. */ 86 | // "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */ 87 | // "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */ 88 | // "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */ 89 | // "strictBindCallApply": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */ 90 | // "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */ 91 | // "noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */ 92 | // "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */ 93 | // "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */ 94 | // "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */ 95 | // "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */ 96 | // "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */ 97 | // "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */ 98 | // "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */ 99 | // "noUncheckedIndexedAccess": true, /* Add 'undefined' to a type when accessed using an index. */ 100 | // "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */ 101 | // "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type. */ 102 | // "allowUnusedLabels": true, /* Disable error reporting for unused labels. */ 103 | // "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */ 104 | 105 | /* Completeness */ 106 | // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */ 107 | "skipLibCheck": true /* Skip type checking all .d.ts files. */ 108 | }, 109 | "include": ["./src"] 110 | } 111 | --------------------------------------------------------------------------------