getting started with typescript
TRANSCRIPT
Microsoft TypescriptBY AMINE EL HARRAK
SOFTWARE ENGINEER (FULL-STACK DEVELOPER) @sqli 2017
Agenda
Introduction Installation & Who to use TS ? Features Do's and Don'ts Conclusion
Introduction JAVASCRIPT THAT SCALES.
Introduction
Introduction How use TS ? ***!? Woe Facts Ecosystem
Introduction
Microsoft Typescript is a statically typed compiled language to clean and a simple plain old JavaScript code which runs on any browser, in Node.js or in any JavaScript engine that supports ECMAScript 3 (or newer).
Recent rise of TypeScript’s popularity, data from Google Trends.
Is Anyone using Typescript ?
Angularjs2 IONIC 2 DOJO …
***!?
Why would I want to rewrite all of the applications I already have (Next apps) in this new language? The simple answer is you don’t have to.
Weight of Evidence
Code is hard to navigate Autocompletion Refactorings Compiler checks debug …
TypeScript Facts
Large and scale application development Language, not a framework Cross-compiles to JavaScript Produces idiomatic JavaScript Doesn‘t try to replace JavaScript Offers missing language features (Anticipates ES6, …) Is a superset of JavaScript (Promises easy migration of JS code) JS libs can be used easily (Optional) static typing …
How to get setup ? INSTALLING TYPESCRIPT
How to get setup ?
Installing TypeScript Text Editors Support Compiling to JavaScript
Installing TypeScript
There are two main ways to get the TypeScript tools: Via npm (the Node.js package manager) / yarn add typescript By installing TypeScript’s Visual Studio plugins.
Installing TypeScript
The easiest way to setup TypeScript is via npm.Using the command below we can install the TypeScript package globally, making the TS compiler available in all of our projects : yarn add typescript or npm install -g typescript //For the latest stable
version npm install -g typescript@next //For our nightly buildsTry opening a terminal anywhere and running tsc -v to see if it has been properly installed.$ tsc -vversion 2.2.1
Text Editors With TypeScript Support
TypeScript is an open-source project but is developed and maintained by Microsoft and as such was originally supported only in Microsoft’s Visual Studio platform. Nowadays, there are a lot more text editors and IDEs that either natively or through plugins offer support for the TypeScript syntax, auto-complete suggestions, error catching, and even built-in compilers. Visual Studio Code – Microsoft’s other, lightweight open-source code editor. TypeScript
support is built in. Official Free Plugin for Sublime Text. The latest version of WebStorm comes with built in support. More including Vim, Atom, Emacs and others.
Compiling to JavaScript
TypeScript is written in .ts files (or .tsx for JSX), which can’t be used directly in the browser and need to be translated to vanilla .js first. This compilation process can be done in a number of different ways: In the terminal using the previously mentioned command line tool tsc. Directly in Visual Studio or some of the other IDEs and text editors. Using automated task runners such as grunt, gulp.
Compiling to JavaScript
The following command takes a TypeScript file named main.ts and translates it into its JavaScript version main.js. If main.js already exists it will be overwritten.tsc main.tsWe can also compile multiple files at once by listing all of them or by applying wildcards :# Will result in separate .js files: main.js worker.js. tsc main.ts worker.ts # Compiles all .ts files in the current folder. Does NOT work recursively. tsc *.ts
Compiling to JavaScript
We can also use the --watch option to automatically compile a TypeScript file when changes are made:# Initializes a watcher process that will keep main.js up to date. tsc main.ts --watch More advanced TypeScript users can also create a tsconfig.json file, consisting of various build settings. A configuration file is very handy when working on large projects with lots of .ts files since it somewhat automates the process. You can read more about tsconfig.json in the TypeScript docs.
Features of TypeScript
Language Features
Type annotations Type inference Compile time type checking Optional, default and rest parameters Classes Interfaces Structural typing Arrow function expressions
Enums Generics Modules Tuple types Union types and type guards
TypeScript grammar
Class
class Person { protected name: string; constructor(name: string) { this.name = name; }}
class Employee extends Person { private department: string; constructor(name: string, department: string) { super(name); this.department = department; } public getElevatorPitch() { return `Hello, my name is ${this.name} and I work in ${this.department}.`; }}let howard = new Employee("Howard", "Sales");
console.log(howard.getElevatorPitch());console.log(howard.name); // error
Interfaces
interface ClockInterface { currentTime: Date; setTime(d: Date);}
class Clock implements ClockInterface { currentTime: Date; setTime(d: Date) { this.currentTime = d; } constructor(h: number, m: number) { }}
Generics
function identity<T>(arg: T): T { return arg;}
let output = identity<string>("myString"); // type of output will be 'string'
Enums
const enum Directions { Up, Down, Left, Right}
let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right]
Examples
Modules
//Validation.ts
export interface StringValidator { isAcceptable(s: string): boolean;}
//ZipCodeValidator.ts
export const numberRegexp = /^[0-9]+$/;
export class ZipCodeValidator implements StringValidator { isAcceptable(s: string) { return s.length === 5 && numberRegexp.test(s); }}
Do's and Don'ts
Do's and Don'ts |General Types
Don’t ever use the types Number, String, Boolean, or Object. These types refer to non-primitive boxed objects that are almost never used appropriately in JavaScript code.
/* WRONG */function reverse(s: String): String;
/* OK */function reverse(s: string): string;
If you’re tempted to use the type Object, consider using any instead. There is currently no way in TypeScript to specify an object that is “not a primitive”.
Do's and Don'ts |Callback Types
Don’t use the return type any for callbacks whose value will be ignored:
/* WRONG */function fn(x: () => any) { x();}
/* OK */function fn(x: () => void) { x();}
Do's and Don'ts |Callback Types
Example :
function fn(x: () => void) { var k = x(); // oops! meant to do something else k.doSomething(); // error, but would be OK if the return type had been 'any‘}
Why: Using void is safer because it prevents you from accidently using the return value of x in an unchecked way
Do's and Don'ts |Overloads and Callbacks
Don’t write separate overloads that differ only on callback arity -> Do write a single overload using the maximum arity:
/* WRONG */declare function beforeAll(action: () => void, timeout?: number): void;declare function beforeAll(action: (done: DoneFn) => void, timeout?: number): void;
/* OK */declare function beforeAll(action: (done: DoneFn) => void, timeout?: number): void;
Do's and Don'ts |Function Overloads
Don’t put more general overloads before more specific overloads, Do sort overloads by putting the more general signatures after more specific signatures:
/* WRONG */declare function fn(x: any): any;declare function fn(x: HTMLElement): number;declare function fn(x: HTMLDivElement): string;
var myElem: HTMLDivElement;var x = fn(myElem); // x: any, wat?
/* OK */declare function fn(x: HTMLDivElement): string;declare function fn(x: HTMLElement): number;declare function fn(x: any): any;
var myElem: HTMLDivElement;var x = fn(myElem); // x: string,
Why: TypeScript chooses the first matching overload when resolving function calls. When an earlier overload is “more general” than a later one, the later one is effectively hidden and cannot be called.
Do's and Don'ts |Use Optional Parameters
Don’t write several overloads that differ only in trailing parameters, Do use optional parameters whenever possible:
/* WRONG */interface Example { diff(one: string): number; diff(one: string, two: string): number; diff(one: string, two: string, three: boolean): number;}
/* OK */interface Example { diff(one: string, two?: string, three?: boolean): number;}
Why: TypeScript chooses the first matching overload when resolving function calls. When an earlier overload is “more general” than a later one, the later one is effectively hidden and cannot be called.
Do's and Don'ts |Use Union Types
Don’t write overloads that differ by type in only one argument position, Do use union types whenever possible:
/* WRONG */interface Moment { utcOffset(): number; utcOffset(b: number): Moment; utcOffset(b: string): Moment;}
/* OK */interface Moment { utcOffset(): number; utcOffset(b: number|string): Moment;}
Note that we didn’t make b optional here because the return types of the signatures differ.
Migrating from JavaScript
Step
projectRoot├── src│ ├── file1.js│ └── file2.js├── built└── tsconfig.json
1. Setting up your Directories2. Writing a Configuration File3. Integrating with Build Tools (Gulp,
Webpack …){ "compilerOptions": { "outDir": "./built", "allowJs": true, "target": "es5" }, "include": [ "./src/**/*" ]}
“
”Thank you !