Typescript

What is it? Best practices, tips...

Thomas Winckell

Guillaume Monnet

@255kb

What is Typescript?

• JS superset: JS program will be valid in TS
• Statically typed (evaluated at compilation) vs JS dynamically typed
• Transpiler: will transpile to JS

Any overhead?

No it’s only during development. After transpiling types disappear.

​

Usage / Configuration

Install TypeScript dependency npm install -D typescript

Compile .ts files with tsc command

tsc generates one .d.ts file (definition) and one .js file per ts file

Configure TypeScript compiler with tsconfig.json file

Can be generated using tsc --init

Where to install the compiler

• best practice: install as a project dependency to avoid discrepancies betweens developers

​

• use the tsc command via npm scripts, so it will use the local tsc bin (not the global one, if you installed it using -g)

​

IDE

Webstorm:

• TypeScript path is configurable
• by default, it takes TypeScript from the current project node modules

VSCode:

• includes a recent Typescript version
• switch VSCode to project version (bottom right corner)

​

TSlint

Typescript linter.

Install with npm install -D tslint and run tslint --init get default tslint.json config file.

Will start by extending ”tslint:recommended” set of rules, you can add any rule in ”rules” array as long as rules are “imported” in the rulesDirectory array.

Popular rules libs: Codelyzer (Angular), SonarTS (Sonarqube)

Usage with Babel / Webpack

• TypeScript wants a little impact on runtime (as less polyfill as possible)
• In order to use ES6 structures, you should set the target to ES6 or more
• if you want to support old browsers, you need Babel or core-js
• TypeScript is working well with webpack (see ts-loader)
• Angular CLI is using Webpack and core-js for polyfilling (polyfill.ts)

​

Basic types

Primitives, enums, arrays, any...

Environment

​

• Environment definition (node, browser)
• EcmaScript definition (5, 6, 2015, 2016, 2017, 2018, next)

​

• See node_modules/typescript/lib
• Needs to install @types/node for node type definition files

​

Library types

​

• If a library comes with types, you have nothing to do

​

• Otherwise, try to install the library @types/LIBRARY_NAME

​

• If a library has no type and you are in strict mode, you have to use require instead of import (everything you require will be typed as any)

​

Classes

Modifiers, constructor...

Type composition

Operators, interface, type...

Type assertion (cast)

Type inference

Index signatures and mapped types

Generics

Built-in types

Partial, Pick...

Decorators

/!\ Experimental

Reflect metadata

/!\ Experimental

Links / sources

Try it: http://www.typescriptlang.org/play/

​

Presentation examples: https://github.com/255kb/typescript-js-meetup

Documentation: https://www.typescriptlang.org

Libraries types: https://github.com/DefinitelyTyped/DefinitelyTyped

TSLint rules:

https://palantir.github.io/tslint/rules/

https://github.com/mgechev/codelyzer https://github.com/SonarSource/SonarTS

​

Awesome list: https://github.com/dzharii/awesome-typescript