TypeScript: Entendendo a notação de tipos

Como ler, entender e aplicar a notação de tipos estáticos

Conhecer e entender os dialetos utilizados facilitam a criatividade e comunicação

1. O que você vai aprender

interface Array<T> {
concat(...items: Array<T[] | T>): T[];
reduce<U>(
callback: (state: U, element: T, index: number, array: T[]) => U,
firstState?: U): U;
···
}

2. Experimentando com os códigos de exemplo

3. Especificando a abrangência da verificação de tipos

4. Tipos

5. Anotações de Tipos

let x: number;

6. Inferência de Tipos

let x = 123;

7. Descrevendo Tipos

8. Tipos em Array

8.1 Arrays como Lists

let arr: number[] = [];
let arr: Array<number> = [];

8.2 Arrays como Tuples

let point: [number, number] = [7, 5];
> Object.entries({a:1, b:2})
[ [ 'a', 1 ], [ 'b', 2 ] ]
Array<[string, any]>

9. Tipos em Funções

(num: number) => string
const func: (num: number) => string = String;
function stringify123(callback: (num: number) => string) {
return callback(123);
}
f(Number);
f(String);

9.1 Tipos de resultados de declarações de função

function stringify123(callback: (num: number) => string): string {
const num = 123;
return callback(num);
}
function f1(): void { return undefined } // OK
function f2(): void { } // OK
function f3(): void { return 'abc' } // error

9.2 Parâmetros Opcionais

function stringify123(callback?: (num: number) => string) {
const num = 123;
if (callback) {
return callback(num); // (A)
}
return String(num);
}
function createPoint(x=0, y=0) {
return [x, y];
}
function createPoint(x:number = 0, y:number = 0) {
return [x, y];
}

9.3 Tipos do operador rest

function joinNumbers(...nums: number[]): string {
return nums.join('-');
}
joinNumbers(1, 2, 3); // '1-2-3'

10. Realizando Uniões de Tipos (Union Types)

let x = null;
x = 123;
let x: null|number = null;
x = 123;
function stringify123(
callback: null | ((num: number) => string)) {
const num = 123;
if (callback) { // (A)
return callback(123); // (B)
}
return String(num);
}

10.1 Opcional vs undefined | T

function f1(x?: number) { }
f1(); // OK
f1(undefined); // OK
f1(123); // OK
function f2(x: undefined | number) { }
f2(); // error
f2(undefined); // OK
f2(123); // OK

10.2 Os valores null e undefined geralmente não estão incluídos nos tipos

11. Tipos em Objetos

11.1 Objetos como Records

interface Point {
x: number;
y: number;
}
function pointToString(p: Point) {
return `(${p.x}, ${p.y})`;
}
pointToString({x: 5, y: 7}); // '(5, 7)'

11.2 Propriedades Opcionais

interface Person {
name: string;
company?: string;
}

11.3 Métodos

interface Point {
x: number;
y: number;
distance(other: Point): number;
}

12. Variáveis de Tipo e Tipos Genéricos

interface Stack<T> {
push(x: T): void;
pop(): T;
}
const dummyStack: Stack<number> = {
push(x: number) {},
pop() { return 123 },
};

12.1 Exemplos: Map

const myMap: Map<boolean,string> = new Map([
[false, 'no'],
[true, 'yes'],
]);

12.2 Variáveis de Tipo para Funções

function id<T>(x: T): T {
return x;
}
id<number>(123);
id(123);

12.3 Passando um parâmetro de Tipo

function fillArray<T>(len: number, elem: T) {
return new Array<T>(len).fill(elem);
}
const arr = fillArray(3, '*');
// Inferred type: string[]

13. Conclusão

interface Array<T> {
concat(...items: Array<T[] | T>): T[];
reduce<U>(
callback: (state: U, element: T, index: number, array: T[]) => U,
firstState?: U): U;
···
}

14. Leitura adicional

⭐️ Créditos

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store