TypeScript - alandrade21/docsCompartilhados GitHub Wiki

• Instalação
  • Instalando o typescript Globalmente
  • Instalando o ts local no projeto
• Configuração
• ES6
  • Variáveis
  • Arrow Function
  • Template String
  • Optional Parameters
  • Concatenação de Arrays
  • Spread Operator
  • Varargs
  • ?? - Nullish Operator
• Types
  • Atributos Opcionais
  • Tuplas
  • Enum
  • Non Nullable Types
• Vários Tipos
  • Tipo Any
  • Third Party Types
• Never Type
  • Compatibilidade entre Tipos
• Debug
• Classes
  • Getter & Setter
• Read Only Members
• Generics

sudo npm install -g typescript

teste

tsc -v

Config do typescript

tsc -init

ligar a compilação automática

tsc -w

npm i typescript -D

A opção -D diz que essa é uma dependência de desenvolvimento, ou seja, ela vai para o devDepencencies do package.json.

No tsconfig.json, usa as seguintes propriedades em novos sistemas:

"noImplicityAny": true,
"strictNullChecks": true,
"noEmitOnError": true,      // Não compila em caso de erro
"sourceMap": true           // Permite debugar

Constante com objeto atribuído. O conteúdo do objeto não é imutável:

const objeto = { atributo: 'olá!' };
objeto.atributo = '';

O uso de arrow function não cria um novo escopo, como o uso do comando function faz.

Qualquer texto concatenado com ${variavel}.

Template strings aceita quebra de linha, e reproduz essa quebra de linha na saída.

Template strings são delimitadas pelo sinal de acento grave (`), e código js pode ser colocado dentro desde que delimitado por ${}.

var name = 'John Doe';
var greet = `Hello ${name}`;

By default value: function fazAlgo(param1, param2 = '');

Nesse caso, se a função for chamada só com 1 parâmetro, o segundo é usado com seu valor default.

const array1 = ['a', 'b', 'c'];
const array2 = [...array1, 'd'];

novoDTO = {
  ...antigoDTO,
  novoCampo: novoValor,
};

O spread operator abre todos os campos do objeto antigoDTO no novo objeto que está sendo definido.

function fazAlgo(param1, ...param2);

entidade.title = dto.title ?? entidade.title

Se a propriedade title existir no DTO sem ser nula ou undefined, retorna o valor dessa propriedade, senão, usa a propriedade que já estava no objeto entidade.

type NovoTipo = {
  campo1?: string,  // Esse é opcional.
  campo2: string
};

type Tupla = [string, number];
let minhaTupla: Tupla = ['Andre', 1];

enum PlayerPosition {
  Guard, Forward, Center
}

Um enum é convertido em int, iniciando em 0, na ordem de declaração.

Para obter o enum value com base numa string, usa PlayerPosition["Guard"].

Para obter a string de um enum faz PlayerPosition[x], onde x é o índice do enum.

Para impedir que uma variável de um tipo possa receber null ou undefined, vai no tsconfig.json e coloca a propriedade "strictNullChecks": true.

Depois de setar isso, para fazer com que um null ou undefined sejam aceitos, é necessário fazer:

let minhaVariavel: MeuTipo | null | undefined;

Um tipo ou outro:

let mensagem: string | number;

Combinação de tipos:

interface HasName { firstName: string, lastName: string };
interface HasAddress { address: string };
type Player = HasName & HasAddress;

Any funciona por fora da checagem de tipos do compilador, então:

let myVar: any;
myvar = {};
let str:string = '';
str = myVar;

É válido. Any, efetivamente troca o tipo e contorna o sistema de checagem de tipos.

Para evitar que o compilador associe o tipo any por inferência qdo não conseguir descobrir o tipo, coloca no tsconfig.json a propriedade "noImplicityAny": true.

Se for usar o comando require da commonjs, tem que instalar:

npm i @types/node -D

Qdo for usar uma biblioteca de terceiros que não tem definição de tipos embutida, sempre instala, além da biblioteca:

npm i @types/<<biblioteca>> -D

Para usar as definições de tipo no programa, ao invés de usar require, usa import. Ex:

Ao invés de:

const _ = require('lodash');

usa:

import * as _ from 'lodash'; // ES6 syntax

Se a biblioteca não tiver uma definição de tipos, seja interna ou externa, tem que criar uma. Um arquivo de definição de tipos é nomeado com a extensão .d.ts. Usando lodash como exemplo:

lodash.d.ts:

declare interface FirstFunction { (data: any[]): any; }
declare interface Lodash { first: FirstFunction; }

seuCodigo.ts:

const _: Lodash = require('lodash');
const colors = ["Red", "Green", "Blue"];
const firstColor = _.first(colors);

No exemplo acima, para usar o comando import ao invés do require é necessário criar um módulo:

lodash.d.ts:

declare module "lodash" {
  declare interface FirstFunction { (data: any[]): any; }
  declare interface Lodash { first: FirstFunction; }
  export const _: Lodash;
}

seuCodigo.ts:

import { _ } from "lodash";

Se uma função nunca retorna nada, só dispara um erro, essa função deve ser marcada como do tipo never. Ou seja, essas funções nunca atingem um ponto de retorno.

Em TS, a compatibilidade de tipos é constatada não pelo nome do tipo, mas pela sua estrutura interna. Se a estrutura interna for a mesma (ou for compatível), mesmo que os nomes sejam diferentes, os tipos são compatíveis.

Para adicionar um break point de forma programática, coloca no código: debugger;.

class SuperHero {
  constructor(
    private _name: string
  ){}

  get name(): string {
    return this._name;
  }

  set name(name: string) {
    this._name = name;
  }
}

const superman = new SuperHero('superman');
console.log(superman.name); // isso usa o getter.
superman.name = 'Clark Kent'; // iso usa o setter.

private readonly name: string = '';

Ao invés de escrever

  function cloneArray(array: any[]): any[]

escreve

  function cloneArray<T>(array: T[]): T[]