├── .gitIgnore ├── gitIgnore ├── src └── index.ts └── tsconfig.json /.gitIgnore: -------------------------------------------------------------------------------- 1 | /dist -------------------------------------------------------------------------------- /gitIgnore: -------------------------------------------------------------------------------- 1 | /dist -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | // interface Obj { 2 | // height: number; 3 | // weight: number; 4 | // gender?: boolean; 5 | // } 6 | 7 | // type FuncType = (n: number, m: number) => void; 8 | 9 | // interface NewObj extends Obj { 10 | // scolar: boolean; 11 | // func: FuncType; 12 | // } 13 | 14 | // const gigi: NewObj = { 15 | // height: 3434, 16 | // weight: 3434, 17 | // scolar: true, 18 | // func: (n, m) => { 19 | // console.log(n * m); 20 | // }, 21 | // }; 22 | 23 | // const kendal: NewObj = { 24 | // height: 43434, 25 | // scolar: true, 26 | // weight: 545, 27 | // func: (n, m) => { 28 | // console.log(n * m); 29 | // }, 30 | // }; 31 | 32 | // kendal.func(20, 10); 33 | 34 | // const obj: Obj = { 35 | // gender: true, 36 | // height: 3434, 37 | // weight: 34, 38 | // }; 39 | 40 | // const obj2: Obj = { 41 | // gender: false, 42 | // height: 4434, 43 | // weight: 94, 44 | // }; 45 | 46 | // const obj3: Obj = { 47 | // height: 4434, 48 | // weight: 94, 49 | // }; 50 | 51 | // ---------------------------------------- 52 | 53 | // type FuncType = (n: number, m: number, l?: number) => number; 54 | 55 | // // Optional Parameter 56 | // const func: FuncType = (n, m, l) => { 57 | // if (typeof l === "undefined") return n * m; 58 | 59 | // return n * m * l; 60 | // }; 61 | 62 | // func(25, 23); 63 | 64 | // // Default Parameter 65 | // type FuncType = (n: number, m: number, l?: number) => number; 66 | // const func: FuncType = (n, m, l = 20) => { 67 | // return n * m * l; 68 | // }; 69 | 70 | // func(25, 23); 71 | 72 | // // Rest Operator 73 | // type FuncType = (...m: number[]) => number[]; 74 | // const func: FuncType = (...m) => { 75 | // return m; 76 | // }; 77 | // func(25, 23, 34, 6, 67, 8, 9); 78 | 79 | // function lol(n:number):number{ 80 | // return 45 81 | // } 82 | 83 | // function with Obj 84 | 85 | // interface Product { 86 | // name: string; 87 | // stock: number; 88 | // price: number; 89 | // photo: string; 90 | // readonly id: string; 91 | // } 92 | 93 | // type GetDataType = (product: Product) => void; 94 | 95 | // const getData: GetDataType = (product) => { 96 | // console.log(product); 97 | // }; 98 | 99 | // const productOne: Product = {☺ 100 | // name: "Macbook", 101 | // stock: 46, 102 | // price: 999999, 103 | // photo: "samplephotourl", 104 | // id: "asdnasjdasjkdas", 105 | // }; 106 | 107 | // getData(productOne); 108 | 109 | // Never Type 110 | 111 | // const errorHandler = (): never => { 112 | // throw new Error(); 113 | // }; 114 | 115 | // -------------------------------------- 116 | 117 | // classes 118 | 119 | // class Player { 120 | // public readonly id: string; 121 | // constructor( 122 | // private height: number, 123 | // public weight: number, 124 | // protected power: number 125 | // ) { 126 | // this.id = String(Math.random() * 100); 127 | // } 128 | 129 | // get getMyHeight(): number { 130 | // return this.height; 131 | // } 132 | 133 | // set changeHeight(val: number) { 134 | // this.height = val; 135 | // } 136 | // } 137 | 138 | // const abhi = new Player(100, 150, 23); 139 | 140 | // console.log("Heigfht", abhi.getMyHeight); 141 | // abhi.changeHeight = 500; 142 | // console.log("Heigfht", abhi.getMyHeight); 143 | 144 | // class Player2 extends Player { 145 | // special: boolean; 146 | // constructor(height: number, weight: number, power: number, special: boolean) { 147 | // super(height, weight, power); 148 | // this.special = special; 149 | // } 150 | // getMyPower = () => this.power; 151 | // } 152 | 153 | // const abhi = new Player2(100, 150, 23, true); 154 | // console.log("Weight", abhi.weight); 155 | // console.log("Height", abhi.getMyHeight()); 156 | // console.log("Power", abhi.getMyPower()); 157 | 158 | // interface ProductType { 159 | // name: string; 160 | // price: number; 161 | // stock: number; 162 | // offer?: boolean; 163 | // } 164 | 165 | // interface GiveId { 166 | // getId: () => string; 167 | // } 168 | 169 | // class Product implements ProductType, GiveId { 170 | // private id: string = String(Math.random() * 1000); 171 | // constructor( 172 | // public name: string, 173 | // public price: number, 174 | // public stock: number 175 | // ) {} 176 | // getId = () => this.id; 177 | // } 178 | 179 | // const product1 = new Product("Macbook", 2000, 20); 180 | 181 | // --------------------------------------------- 182 | 183 | // Type Assertion 184 | 185 | // const btn = document.getElementById("btn")!; 186 | // const btn = document.getElementById("btn") as HTMLElement; 187 | // const btn = document.getElementById("btn"); 188 | // btn.onclick; 189 | 190 | // const img = document.getElementById("myimg") as HTMLImageElement; 191 | 192 | // const img = document.querySelector("img")! 193 | // img.src 194 | 195 | // const form = document.getElementById("myform") as HTMLFormElement; 196 | // const myinput = document.querySelector("form > input") as HTMLInputElement; 197 | 198 | // form.onsubmit = (e: SubmitEvent) => { 199 | // e.preventDefault(); 200 | // const h2 = document.createElement("h2"); 201 | // const body = document.querySelector("body")!; 202 | // const value = Number(myinput.value); 203 | 204 | // h2.textContent = String(value + 20); 205 | // body.append(h2); 206 | // }; 207 | 208 | // Keyof & Index Signature 209 | 210 | // interface Person { 211 | // // [key: string]: string; 212 | // name: string; 213 | // email: string; 214 | // } 215 | 216 | // const myobj: Person = { 217 | // name: "Abhi", 218 | // email: "abhI@gmail.com", 219 | // }; 220 | 221 | // let key="name"; 222 | 223 | // myobj[key as keyof typeof myobj] 224 | 225 | // const getName = (): string => { 226 | // return myobj["name"]; 227 | // }; 228 | // const getEmail = (): string => { 229 | // return myobj["email"]; 230 | // }; 231 | 232 | // const getData = (key: keyof Person ): string => { 233 | // return myobj[key]; 234 | // }; 235 | 236 | // getData("name") 237 | 238 | // -------------------------------------- 239 | 240 | // Type Utility 241 | 242 | // Partial 243 | // Required 244 | // Readonly 245 | // Record 246 | // Pick 247 | // Omit 248 | // Exclude 249 | // Extract 250 | // NonNullable 251 | // Parameters 252 | // ConstructorParameters 253 | // ReturnType 254 | // InstanceType 255 | 256 | // Partial 257 | 258 | // type User ={ 259 | // name:string, 260 | // email:string 261 | // } 262 | // type User2 = Partial 263 | 264 | // Required - opposite of partial 265 | // type User ={ 266 | // name?:string, 267 | // email:string 268 | // } 269 | // const user: Required={ 270 | // name:"abhi", 271 | // email:"abhi@gmail.vom" 272 | // } 273 | 274 | // Readonly - makes every property readonly 275 | // type User ={ 276 | // name:string, 277 | // email:string 278 | // } 279 | // const user: Readonly ={ 280 | // name:"abhi", 281 | // email:"abhi@gmail.vom" 282 | // } 283 | 284 | // Record 285 | 286 | // type User = { 287 | // name: string; 288 | // email: string; 289 | // }; 290 | 291 | // type User2 = Record<"name"|"email"|"gender",string> 292 | 293 | // Example 294 | 295 | // interface UserInfo { 296 | // age: number; 297 | // } 298 | 299 | // type UserName = "john" | "levi" | "elon" | "jack"; 300 | 301 | // const users: Record = { 302 | // john: { age: 34 }, 303 | // levi: { age: 34 }, 304 | // elon: { age: 34 }, 305 | // jack: { age: 34 }, 306 | // }; 307 | 308 | // Pick 309 | // interface OrderInfo { 310 | // readonly id: string; 311 | // user: string; 312 | // city: string; 313 | // state: string; 314 | // country: string; 315 | // status: string; 316 | // } 317 | // type ShippingInfo = Pick; 318 | 319 | // Omit 320 | // interface ShippingInfo { 321 | // city: string; 322 | // state: string; 323 | // country: string; 324 | // } 325 | 326 | // type Random = Omit 327 | 328 | // Exclude 329 | // type MyUnion = string | number | boolean 330 | // type Random = Exclude 331 | 332 | // Extract 333 | // type MyUnion = string | number | boolean 334 | // type Random = Extract 335 | 336 | // NonNullable 337 | // type MyUnion = string | number | boolean | null | undefined 338 | // type Random = NonNullable 339 | // type Random2 = Exclude 340 | 341 | // Parameters 342 | // const myfunc = (a: number, b: string) => { 343 | // console.log(a + b); 344 | // }; 345 | // type Random = Parameters 346 | 347 | // ConstructorParameters 348 | // class SampleClass { 349 | // constructor(public s: string, public t: string) {} 350 | // } 351 | // type Random = ConstructorParameters 352 | 353 | // ReturnType 354 | // const myfunc = (a: number, b: string):string => { 355 | // return a + b; 356 | // }; 357 | // type FuncType = ReturnType< typeof myfunc> 358 | 359 | // InstanceType 360 | // class SampleClass { 361 | // constructor(public s: string, public t: string) {} 362 | // } 363 | // type Random = InstanceType 364 | 365 | // const user:Random ={ 366 | // s:"44", 367 | // t:"ssds" 368 | // } 369 | 370 | // ----------------------------------------------------------------- 371 | 372 | // Generics 373 | 374 | // const func = (n: T): T => { 375 | 376 | // return n; 377 | // }; 378 | 379 | // const ans = func(20); 380 | // const ans2 = func("20"); 381 | // const ans3 = func(true); 382 | 383 | // type Person = { 384 | // name: string; 385 | // age: number; 386 | // }; 387 | 388 | // const func = (n: T): T => { 389 | // return n; 390 | // }; 391 | 392 | // const person1: Person = { 393 | // name: "Abhi", 394 | // age: 109, 395 | // }; 396 | 397 | // const ans = func(person1); 398 | 399 | // const func = (n: T, o: U): { n:T, o:U } => { 400 | // return { n, o }; 401 | // }; 402 | 403 | // const ans = func(20,"Lol"); 404 | 405 | // type Person = { 406 | // name: string; 407 | // age: number; 408 | // }; 409 | 410 | // type Person2 = { 411 | // name: string; 412 | // age: number; 413 | // email: string; 414 | // }; 415 | 416 | // const user: Person = { 417 | // name: "abhi", 418 | // age: 109, 419 | // }; 420 | 421 | // const user2: Person2 = { 422 | // name: "abhi", 423 | // age: 109, 424 | // email: "asd@gmail.com", 425 | // }; 426 | 427 | // const func = (n: T, o: U): { n: T; o: U } => { 428 | // return { n, o }; 429 | // }; 430 | 431 | // const ans = func(user, user2); 432 | 433 | // type Person = { 434 | // name: string; 435 | // age: number; 436 | // }; 437 | 438 | // const users: Person[] = [ 439 | // { 440 | // name: "abhi", 441 | // age: 109, 442 | // }, 443 | // { 444 | // name: "Nahar", 445 | // age: 109, 446 | // }, 447 | // { 448 | // name: "Levi", 449 | // age: 52, 450 | // }, 451 | 452 | // { 453 | // name: "Random", 454 | // age: 2, 455 | // }, 456 | // ]; 457 | 458 | // const filterByPeoples = ( 459 | // arr: T[], 460 | // property: U, 461 | // value: T[U] 462 | // ): T[] => { 463 | // return arr.filter((item) => item[property] === value); 464 | // }; 465 | 466 | // const filteredPeopleByName = filterByPeoples(users, "name", "Nahar"); 467 | // const filteredPeopleByAge = filterByPeoples(users, "age", 109); 468 | // console.log(filteredPeopleByAge); 469 | -------------------------------------------------------------------------------- /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": "ES2020" /* 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 | } 110 | --------------------------------------------------------------------------------