Type capabilities • Primitive types: number, string, boolean • Special types: any, void, unknow • Classes (constructor, abstract, inheritance, access modifiers, …) • Interface (can be used by TypeScript to check object structure) • Type alias const value: number = 1; type one = 1;
But take care • Any everywhere isn’t a solution (you’re doing JavaScript…) • Nominal typing • Structural typing • So TypeScript !== C#, Java • Strict mode is recommanded
Generic An exemple with the Factory pattern: abstract class Rocket { constructor( public readonly boosters : number ) { } abstract launch() : void; } class RocketFactory { ctor: new (boosters: number) => T; constructor(ctor: new (boosters: number) => T) { this.ctor = ctor; } create(boosters: number): T { return new this.ctor(boosters); } }
Generic Generic & type system: // type alias type Rocket = { id: number; model: string; boosters: number; }; // Mapped type type Partial = { [K in keyof T]?: T[K]; }; const e: Partial = { }; // Conditional type Exclude = T extends U ? never: T; type Keys = Exclude; You will have more information about that in Part 2
Never / unknown / type alias / as const (1 / 4) link Type never represents the type of values that never occur - Raised exceptions - Infinite Loops - Conditional types fallback
Never / unknown / type alias / as const (2 / 4) link Type unknown acts like any but type safely : it must be casted - Used in type guards - Useful when type is unnecessary (proxy)
Type Guards (1 / 3) link A type guard is a runTime check that can be interpreted in control flow Built-in type guards : typeof, Array.isArray, instanceOf
Strict mode ? - one of the most important option ! - compilation’s option that enforce strict typings - master option’s that activate some sub-option : - strictNullChecks - noImplicitAny - noImplicitThis - strictFunctionTypes - alwaysStrict - strictBindCallApply - strictPropertyInitialisation
How activate Strict mode - On new project use tsc --init, strict option will be activated - In tsconfig.json file, strict is deactivated by default - On existing project it can be adopted incrementally :
--strictNullChecks (1/4) - By default, null and undefined are included in other type in imlipicit way - --strictNullChecks make them apart type, it needs to be explicit
--strictNullChecks (4/4) link - In some specific case you can use non-null assertion operator “!” - Be careful with non-null assertion operator cause you enforce TypeScript’s compiler behavior.
--noImplicitAny link - any is a dangerous type and he can be : - explicit : you wrote any - implicit : use by TypeScript’s compiler when type is not explicit and it can’t infer it. - --noImpliciteAny raised error when second case appear
--noImplicitThis (1/2) link - TypeScript’s compiler try to infer this in function’s body - If compiler can’t infer it, --noImplicitThis will raised an error
--strictPropertyInitialisation (1/2) link - when activate, the type checker verifies that each class’s property : - has a type that include undefined - has been initialized during déclaration - has been initialized in the constructor - Exemple
declarations / declarationDir (1 / 1) - --declarations is a flag to output or not the declarations (default false) - It is available through the cli - Used when need to publish declaration for a consumer - --declarationDir is the relative path where to output declarations files (same as --outDir if not provided) - It is available through the cli - To publish the code on a registry use “types” key in package.json to refer to the declarations entry (index.d.ts) by default
listFiles / noEmit (1 / 1) - --listFiles is a flag to output the files part of the transpilation (default false) - It is available through the cli - Useful for debug - --noEmit is a flag to not emit any file but just typecheck the code (default false) - It is available through the cli - Useful for scripts executed by ts-node or tests
allowJs / checkJs (1 / 1) - --allowJs is a flag to allow to import JavaScript files (default false) - It is available through the cli - No need for this flag for JavaScript in node_modules (TypeScript will resolve declarations) - --checkJs is a flag to try type checking on JavaScript files - It is available through the cli - Same as @ts-check in a JavaScript file
noEmitHelpers / importHelpers (1 / 2) - --noEmitHelpers is a flag to not Emit helpers functions when targeting old browsers or node versions - It is available through the cli - async / await is available in es3
noEmitHelpers / importHelpers (2 / 2) - --importHelpers is a flag to Emit tslib imports when targeting old browsers - It is available through the cli - Need tslib as dependency
- --lib is a list of lib files to includes during transpilation - It is available through the cli - It lists all ecmaScript features available at runTime - Old browser => lib: [“dom”, “es5”] - New browser (or polyfilled) => lib: [“dom”, “esnext”] - Node => lib: [“esX”] (X follows the target version of node) lib / typeRoots / types (1 / 2)
- --typeRoots is a list of relative paths to resolve dependencies declarations (default node_modules/@types) - It is available through the cli - No need if dependency handle it’s own definitions - Can be a local directory too - --types is a list of folders names in the typeRoots folder to include during the transpilation - It is available through the cli - Useful to exclude declarations for tests in your code for example lib / typeRoots / types (2 / 2)
moduleResolution (1 / 5) - --moduleResolution is a string to configure compiler modules lookup - Two values: “classic” or “node” - Different resolution in case of relative or non relative imports
- --baseUrl is a relative path to set the modules root - It is available through the cli - It sets the “/root/” path in the previous examples - Used when a part of the code base is published on a registry - --paths is a map of aliases (non-relative) / relative paths to resolve modules locally - It is not available through the cli - If relative path refers to a ts file, it will be part of the transplication not if it refers to a d.ts file - Same for TypeScript files resolved in the node_modules folder - Do not publish TypeScript files (.ts) on the registry => declarations only baseUrl / paths (1 / 1)
- --esModuleInterop is a flag to emit “__importStart” and “__importDefault” helpers (babel compatibility). it activates -- allowSyntheticDefaultImports esModuleInterop / allowSyntheticDefaultImports (1 / 2)
- --allowSyntheticDefaultImports is a flag to allow default imports even if declaration has no default export esModuleInterop / allowSyntheticDefaultImports (2 / 2)
What’s new in 3.7 - Optional Chaining - Nullish Coalescing - Assertion Functions - Better Support for never-Returning Functions - (More) Recursive Type Aliases - --declaration and --allowJs - The useDefineForClassFields Flag and The declare Property Modifier - Build-Free Editing with Project References - Uncalled Function Checks - // @ts-nocheck in TypeScript Files - Semicolon Formatter Option
spontoreau
stewemetal
danilop
mraible
torounit
nanya3737
dalinaum
squer
mukky620
hollycummins
hpgrahsl
honma12345
totto2727
sstephenson
mojombo
brettharned
edds
colly
cassininazir
searls
gr2m
wjessup
mongodb
sachag
akosma