Types? Typing? What is it?

• helps the compilers to 
  • optimise the storage of the values in memory — at runtime
  • optimise code (mainly for transpilers, ex: Dart) — at compile time
• helps developers to know how to use a value (methods, structure, etc)

JavaScript — The dynamic weakly typed

1let a = 1; // a is a number  
2a = 'ok'; // a is now a string

1let a = 1;  
2let b = "2";  
3let c = a + b; // "12" -> c is a string  
4c = a \* b; // 2 -> c is a number

1const sum = (a, b) => a + b;  
2sum(1, "2") // "12" -> ??!?!?!

1const sum = (a, b) => parseInt(a, 10) + parseInt(b, 10);  
2sum(1, "2") // 3
3
4// Or   
5const sum = (a, b) => (+a) + (+b);

• by using typeof:

• by using “duck typing” —

TypeScript —Static Structural typing (with erasure)

1type Person = { name: string; };  
2type Animal = { name: string; kind: string; };  
3const isPerson(p: Person): p is Person => !!p.name;
4
5let a: Animal = { name: 'flocon', kind: 'cat' };  
6isPerson(a) // true is TypeScript, impossible in C#/Java
7

Write our first types with scalars

1const myVar**: string** = 'hello';
2
3type myObjectType = { a**: string**; b**: number**; }
4
5class MyClass {  
6   myProp**: string**;  
7   /\* ... \*/  
8}

• never

• any

1let a: any = “hello world”; // valid  
2let a: any = 1; // valid  
3let a: any = undefined; // valid

• string

1let a: string = “hello world”

• array (not a scalar though.)

1let a: string[] = [“a”, “b”, “c”] 
2
3// Or tuple :
4let a: [string, number] = [“1”, 2]

• object (not a scalar though.)

1let a: object = {} // correct
2
3let a: object = { a: 1 }   
4// not correct, we'll see this in next section with "interface"

• boolean

1let a: boolean = true; // correct

• enum

1enum Color {Red, Green, Blue}   
2let c: Color = Color.Green; // (value in JS is a int)

• null

1let a: null = null; // correct  
2let a: null = undefined; // incorrect, it should have a null value.

• undefined

1let a: undefined;  
2let a?: string; // undefined | string

Rich types: interface and type

The interface keyword

1interface User {  
2   name: string;  
3   birthday?: string; // optional property  
4}

1interface MyAddFunction {  
2   (a: number, b: number): number  
3}
4
5const add: MyAddFunction = (a, b) => a + b;

1interface Animal {  
2  name: string;  
3}
4
5interface Cat extends Animal {  
6  mustache\_len: number;  
7}
8
9// ---------------------
10
11interface A { a: string; }  
12interface A { b: string; }
13
14// is the same as 
15
16interface A {  
17   a: string;  
18   b: string;  
19}

The type keyword

• renaming a existing type:

1type MyString = string;

• compose existing types : union types, augmenting, …

1type PossibleValues = "open" | "close";  
2const a: PossibleValues = "open";
3
4interface Car {  
5   speed: string;  
6}
7
8type CompetitionCar = Car & { competitor\_id: string };

What the difference between interface and type?

1interface A {  
2   a: string;  
3}
4
5type B = { a: string; }

• interface can be edited, they are open; type are closed.
• type can compose existing types with union, pick etc

• type is especially useful to build intermediate type composed of others
• interface is useful for build fundamental and re-usable types

Function types, arguments, return type

Let’s type some functions

1// inline typing  
2const capitalize = (str: **string**): **string** => {  
3   return str.charAt(0).toUpperCase() + str.slice(1);  
4}
5
6// types with interfaces  
7interface CapitalizeFunction {  
8   (str: string) => string;  
9}
10
11const capitalize: **CapitalizeFunction** = str => {  
12   return str.charAt(0).toUpperCase() + str.slice(1);  
13}
14
15// function as property in object  
16interface **ReactComponentProps** {  
17   onClick: (e: React.MouseEvent<HTMLDivElement>) => void;  
18}
19
20class MyComponent extends React.Component<**ReactComponentProps**\> { }

• : for “inline return type — to avoid conflict with arrow function definition
• => for “interface function type”

Object as arguments

1interface MyFunctionArgs {  
2   name: string;  
3   security\_code: string;  
4   id?: number;  
5}
6
7function isCompleteUser({ name, id = 1 }: MyFunctionArgs): boolean {  
8   return !!name;  
9}
10
11isCompleteUser({ name: 'a', security\_code: 'b' });

Conclusion

• That TypeScript bring clearer variable typing with static typing.
• How the TypeScript typing system behave in a structural and static way.
• That TypeScript bring all fundamental types and even more with nifty ones like never or any .