TypeScript: Folha de Dicas

Uma "cheat sheet" para deixar ao seu lado!

Image for post
Image for post
Um boa consulta sempre é obrigatória!

Essa folha de dicas é um complemento ao TypeScript: O guia definitivo.

Última atualização para: TypeScript 3.1

npm install typescript
tsc
  • any - Qualquer tipo (explícitamente não tipado)
  • void - Tipo vazio (como undefined ou null, use apenas para retorno de funções)
  • undefined - Tipo para undefined
  • null - Tipo para null
  • never - Situações quando uma função nunca retorna um valor ou joga, throw ... algo.
  • unknown - Parecido com any, descreve algo que não é conhecido até o momento, não é possível acessar propriedades de um valor unkown antes de fazer um guarda de tipo
  • string - Tipo para String (incluindo strings templates e múltiplas linhas do ES6)
  • number - Tipo para números/Number
  • boolean - Tipo para valores boleanos/Booleans
  • object - Tipo para valores que podem ser um objeto ou um valor não-primitivo

Interface:

interface Child extends Parent, SomeClass {
property: Type;
optionalProp?: Type;
optionalMethod?(arg1: Type): ReturnType;
}

Class:

class Child extends Parent implements Child, OtherChild {
property: Type;
defaultProperty: Type = 'default value';
private _privateProperty: Type;
private readonly _privateReadonlyProperty: Type;
static staticProperty: Type;
constructor(arg1: Type) {
super(arg1);
}
private _privateMethod(): Type {}
methodProperty: (arg1: Type) => ReturnType;
overloadedMethod(arg1: Type): ReturnType;
overloadedMethod(arg1: OtherType): ReturnType;
overloadedMethod(arg1: CommonT): CommonReturnT {}
static staticMethod(): ReturnType {}
subclassedMethod(arg1: Type): ReturnType {
super.subclassedMethod(arg1);
}
}

Enum:

enum Options {
FIRST,
EXPLICIT = 1,
BOOLEAN = Options.FIRST | Options.EXPLICIT
}
enum Colors {
Red = "#FF0000",
Green = "#00FF00",
Blue = "#0000FF"
}

Objeto com tipos any implícitos:

{ foo; bar; }

Objeto com propriedade opcional:

{ required: Type; optional?: Type; }

Declarando um HahsMap, uma lista de chave-valor

{ [key: string]: Type; }

Declarando um tipo de união:

let myUnionVariable: number | string;

Declarando um tipo de interseção:

let myIntersectionType: Foo & Bar;

Declarando tipos de array de strings:

string[]

// ou

Array<string>

Declarando tipos de um array de funções que retorna uma string:

{ (): string; }[]

// ou

Array<() => string>

Declarando uma tupla:

let myTuple: [ string, number, boolean? ];
myTuple = [ 'test', 42 ];

Declarando funções:

{ (arg1: Type, argN: Type): Type; }

// ou

(arg1: Type, argN: Type) => Type;

Declarando construtores:

{ new (): ConstructedType; }

// ou

new () => ConstructedType;

Declarando funções com um parâmetro opcional:

(arg1: Type, optional?: Type) => ReturnType

Tipos para uma função com um parâmetro rest:

(arg1: Type, ...allOtherArgs: Type[]) => ReturnType

Função com propriedade estática:

{ (): Type; staticProp: Type; }

Parâmetros com valores padrões:

function fn(arg1: Type = 'default'): ReturnType {}

Funções de seta:

(arg1: Type): ReturnType => {}

// ou

(arg1: Type): ReturnType => Expression

Declarando o valor de this:

function fn(this: Foo)

Função utilizando parâmetros tipados:

<T>(items: T[], callback: (item: T) => T): T[]

Interface com tipos múltiplos:

interface Pair<T1, T2> {
first: T1;
second: T2;
}

Declarando restrição ao tipo do parâmetro:

<T extends ConstrainedType>(): T

Valor padrão para o tipo do parâmetro:

<T = ConstrainedType>(): T

Declarando restrição e valor padrão para o tipo do parâmetro:

<T extends ConstrainedType = ConstrainedType>(): T

Utilizando “Partial”:

Partial<{ x: number; y: number; z: number; }>

// é o mesmo que:

{ x?: number; y?: number; z?: number; }

Utilizando “Readonly”:

Readonly<{ x: number; y: number; z: number; }>

// é o mesmo que:

{
readonly x: number;
readonly y: number;
readonly z: number;
}

Utilizando “Pick”:

Pick<{ x: number; y: number; z: number; }, 'x' | 'y'>

// é o mesmo que:

{ x: number; y: number; }

Utilizando “Record”:

Record<'x' | 'y' | 'z', number>

// é o mesmo que:

{ x: number; y: number; z: number; }

Utilizando condicionais:

declare function createLabel<T extends number | string>(idOrName: T): T extends number ? Id : Name;

Utilizando “Exclude”:

type Excluded = Exclude<string | number, string>;

// é o mesmo que:

number

Utilizando “Extract”:

type Extracted = Extract<string | number, string>;

// é o mesmo que:

string

Utilizando “NonNullable”:

type NonNull = NonNullable<string | number | void>;

// é o mesmo que:

string | number

Utilizando “ReturnType”:

type ReturnValue = ReturnType<() => string>;

// é o mesmo que

string

Utilizando “InstanceType”:

class Renderer() {}
type Instance = InstanceType<typeof Renderer>;

// é o mesmo que:

Renderer

Retornando o tipo de uma variável:

typeof varName

Finalizando

Você acredita que tem algo faltando nessa lista? Tem alguma dica? Deixe um comentário ou me envie um tweet que vou atualizando essa folha de dicas!

⭐️ Créditos

Written by

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