Machine Translated by Google

TypeScript

Notas para profissionais TypeScript

Notas para Profissionais

mais de 80 páginas
de dicas e truques profissionais

GoalKicker.com Livros Isenção de

responsabilidade Este é um livro gratuito não-social criado para fins educacionais e
gratuitos de programação não está associado a grupos ou empresas ociais de TypeScript.
Todas as marcas comerciais e marcas registradas são
de propriedade de seus respectivos proprietários
Machine Translated by Google

Conteúdo
Sobre ................................................ ................................................ ................................................ ............................. 1
Capítulo 1: Introdução ao TypeScript ....................................... ................................................ ....... 2
Seção 1.1: Instalação e configuração ....................................... ................................................ ................................... 2 Seção
1.2: Sintaxe básica ......... ................................................ ................................................ ................................ 4
Seção 1.3: Olá, mundo ................................................ ................................................ ................................................ 5
Seção 1.4: Executando TypeScript usando ts-node ................................................ ................................................ ...... 6
Seção 1.5: TypeScript REPL em Node.js .............................. ................................................ ......................................... 6
Capítulo 2: Por que e quando usar o TypeScript ... ................................................ ......................................... 8 Seção 2.1:
Segurança . ................................................ ................................................ ................................................ ... 8 Seção 2.2:
Legibilidade ....................................... ................................................ ................................................ .. 8 Seção 2.3:
Ferramentas .............................. ................................................ ................................................ ........ 8 Capítulo 3: Tipos
principais do TypeScript ............................... ................................................ ................................ 9 Seção 3.1: Tipos Literais de
String ......... ................................................ ................................................ ...................... 9 Seção 3.2:
Tupla ...................... ................................................ ................................................ ............................. 12 Seção 3.3: Booleano
................................................ ................................................ ................................................ 12
Seção 3.4: Tipos de interseção .............................. ................................................ ................................ 13 Seção 3.5: Tipos
em argumentos de função e valor de retorno. Número Seção 3.6: Tipos em ................................................ ................. 13
argumentos de função e valor de retorno. Corda ............................................... ......................... 14 Seção 3.7: const Enum
................................................ ................................................ .......................................... 14
Seção 3.8: Número ................................................ ................................................ ................................................ 15
Seção 3.9: Cadeia .............................................. ................................................ ................................................ ...... 15 16
Seção 3.10: Array ...................................... ................................................ ................................................ .............
Seção 3.11: Enum ................................................ ................................................ ................................................ .. 16
Seção 3.12: Qualquer .............................................. ................................................ ................................................ ........ 16
Seção 3.13: Nulidade................................................ ................................................ ................................................ ... 16
Capítulo 4: Matrizes ....................................... ................................................ ................................................ .....17
Seção 4.1: Encontrando Objetos no Array ....................................... ................................................ ............................. 17
Capítulo 5: Enums ................................................ ................................................ ................................................ .. 18
Seção 5.1: Enums com valores explícitos ................................................ ................................................ .................. 18
Seção 5.2: Como obter todos os enums ................................................ ................................................ .............. 19
values Seção 5.3: Estendendo enums sem implementação de enumeração personalizada ....................................... ..........................
19
Seção 5.4: Implementação de enumeração personalizada: estende-se ................................................ .......................... 19
................................................ ................................................ ................................................
para enums Capítulo 6: Funções 21
Seção 6.1: Parâmetros opcionais e padrão Seção ................................................ ................................................ ..... 21
6.2: Função como um parâmetro ........................... ................................................ ................................ 21 Seção 6.3: Funções
com tipos de união ......... ................................................ ................................................ ...... 23 Seção 6.4: Tipos de Funções
Capítulo 7: Classes ................................................ ................................................ ............................. 23
................................................ ................................................ ................................................ 24
Seção 7.1: Classes abstratas ................................................ ................................................ ................................. 24
Seção 7.2: Classe simples ................................................ ................................................ ......................................... 24
Seção 7.3: Herança básica ................................................ ................................................ ................................ 25
Seção 7.4: Construtores ................................................ ................................................ ......................................... 25
Seção 7.5: Acessores ................................................ ................................................ ................................................ 26
Seção 7.6: Transpilação .............................................. ................................................ ......................................... 27 Seção 7.7:
Patch de macaco a função em uma classe existente ................................................ ................................ 28
Capítulo 8: Decorador de classe ................................................ ................................................ ............................. 29
Machine Translated by Google

Seção 8.1: Gerando metadados usando um decorador de classe ................................................ ................................. 29

Seção 8.2: Passando argumentos para um decorador de ................................................ ......................................... 29
classe Seção 8.3: Decorador de classe básico
................................................ ................................................ ......................... 30

Capítulo 9: Interfaces Seção ................................................ ................................................ ......................................................... 32

9.1: Estendendo a interface Seção ................................................ ................................................ ............................. 32

9.2: Interface de classe ................................................ ................................................ ......................................... 32
Seção 9.3: Usando Interfaces para Polimorfismo ....................................... ................................................ ......... 33 Seção 9.4:
Interfaces Genéricas ................................................ ................................................ ............................. 34
Seção 9.5: Adicionar funções ou propriedades a uma interface existente ................................................ ....................... 35
Seção 9.6: Implementação implícita e forma do objeto .............................. ................................................ ..... 35 Seção 9.7: Usando
interfaces para impor tipos .............................. ................................................ ................... 36

Capítulo 10: Genéricos ................................................ ................................................ ................................................ 37

Seção 10.1: Interfaces Genéricas ................................................ ................................................ ............................. 37
Seção 10.2: Classe Genérica ................................................ ................................................ ......................................... 37
Seção 10.3: Parâmetros de tipo como restrições ................................................ ................................................ ..... 38
Seção 10.4: Restrições Genéricas ................................................ ................................................ ......................... 38
Seção 10.5: Funções Genéricas ................................................ ................................................ ............................. 39
Seção 10.6: Usando classes e funções genéricas: Capítulo ................................................ ............................................. 39

11: Verificações nulas estritas ................................................ ................................................ ............................ 40

Seção 11.1: Verificações nulas estritas em ação ................................................ ................................................ .................. 40
Seção 11.2: Asserções não nulas ................................................ ................................................ ............................ 40
Capítulo 12: Protetores de tipo definidos pelo usuário
................................................ ................................................ ....... 42

Seção 12.1: Funções de proteção de tipo ................................................ ................................................ ................... 42

Seção 12.2: Usando instância de ................................................ ................................................ ................................ 43
Seção 12.3: Usando typeof ............................... ................................................ ................................................ ..... 43 Capítulo 13:

Exemplos básicos do TypeScript ....................... ................................................ .................. 45

Seção 13.1: 1 exemplo básico de herança de classe usando as palavras-chave extends e super ....................... ........ 45 Seção
13.2: 2 exemplo de variável de classe estática - conte quantas vezes o método está sendo invocado ....................... 45

Capítulo 14: Importando bibliotecas externas Seção ................................................ ................................................ .... 46

14.1: Encontrando arquivos de definição ................................................ ................................................ ....................... 46

Seção 14.2: Importando um módulo do npm .............................. ................................................ ......................... 47 Seção 14.3:
Usando bibliotecas externas globais sem digitações ........................ ................................................ ................... 47 Seção 14.4:
Encontrando arquivos de definição com TypeScript 2.x ................................................ ......................................... 47

Capítulo 15: Módulos - exportando e importando ....................................... ......................................... 49

Seção 15.1: Módulo Hello World ................................................ ................................................ ............................ 49
Seção 15.2: Reexportação ....................................... ................................................ ................................................ 49 Seção 15.3:
Declarações de exportação/importação ................................................ ................................................ ... 51
Capítulo 16: Publicar arquivos de definição TypeScript ................................................ .......................................... 52

Seção 16.1: Incluir arquivo de definição com biblioteca no npm ....................................... ................................................ 52 Capítulo

17: Usando TypeScript com webpack ....................................... ................................................ ..... 53 Seção 17.1:
webpack.config.js ..................................... ................................................ ......................................... 53

Capítulo 18: Mixins ................................................ ................................................ ................................................ . 54

Seção 18.1: Exemplo de Mixins ................................................ ................................................ ............................. 54

Capítulo 19: Como usar uma biblioteca JavaScript sem um arquivo de definição de tipo ................................ 55

Seção 19.1: Tornar um módulo que exporta um padrão qualquer ....................................... ................................................ 55 Seção
19.2: Declarar um qualquer global ....................................... ................................................ ............................. 55 Seção 19.3: Use
um módulo de ambiente ................................................ ................................................ ................... 56
Capítulo 20: TypeScript instalando o typescript e executando o compilador typescript tsc ........ 57
Machine Translated by Google

Seção 20.1: Etapas .............................................. ................................................ ................................................ ..... 57 Capítulo 21:

Configure o projeto typescript para compilar todos os arquivos no typescript. ................................ 59 Seção 21.1: Configuração do
arquivo de configuração do TypeScript .......... ................................................ ......................................... 59
Capítulo 22: Integração com ferramentas de construção
................................................ ................................................ .... 61

Seção 22.1: Browserify .............................................. ................................................ ............................................. 61 Seção 22.2:

Webpack ............................................... ................................................ ......................................... 61 Seção 22.3: Grunhido
................................................ ................................................ ................................................ 62
Seção 22.4: Gulp .............................................. ................................................ ................................................ ...... 62 Seção 22.5:
MSBuild ................................................ ................................................ ............................................. 63
Seção 22.6: NuGet ................................................ ................................................ ................................................ 63
Seção 22.7: Instalar e configurar webpack + carregadores ................................................ ......................................... 64

Capítulo 23: Usando TypeScript com RequireJS ....................................... ................................................ 65 Seção 23.1: exemplo de
HTML usando RequireJS CDN para incluir um arquivo TypeScript já compilado Seção 23.2: exemplo de tsconfig.json ................. 65
para compilar para exibir a pasta usando o estilo de importação RequireJS ............... .......... 65 Capítulo 24: TypeScript com

AngularJS .............................. ................................................ ...................... 66

Seção 24.1: Diretiva ................................................ ................................................ ................................................ 66
Seção 24.2: Exemplo simples .............................. ................................................ ......................................... 67 67 Seção 24.3:
Componente ....... ................................................ ................................................ ................................

Capítulo 25: TypeScript com SystemJS ....................................... ................................................ ............. 69

Seção 25.1: Hello World no navegador com SystemJS ....................................... ................................................ 69 Capítulo 26:

Usando TypeScript com React (JS e nativo) ...................................... ......................................... 72

Seção 26.1: Componente ReactJS escrito em TypeScript ....................................... ......................................... 72 Seção 26.2 :
TypeScript & react & webpack ....................................... ................................................ ............. 73 Capítulo 27: TSLint - garantindo

a qualidade e consistência do código ....................... ......................................... 75

Seção 27.1: Configuração para menos erros de programação Seção ................................................ ................................. 75
27.2: Instalação e configuração ....................... ................................................ ......................................... 75
Seção 27.3: Conjuntos de Regras TSLint ................................................ ................................................ .......................... 76
Seção 27.4: Configuração básica do tslint.json ....................................... ................................................ ............................. 76 Seção
27.5: Usando um conjunto de regras predefinido como padrão ................................................ ............................................. 76

Capítulo 28: tsconfig.json ....................................... ................................................ .......................................... 78

Seção 28.1: Criar projeto TypeScript com tsconfig.json ....................................... ................................................ 78 Seção 28.2:
Configuração para menos erros de programação Seção 28.3: ................................................ ................................ 79
compileOnSave ....................................... ................................................ ......................................... 80
Seção 28.4: Comentários ................................................ ................................................ ......................................... 80
Seção 28.5: preserveConstEnums .............................................. ................................................ ....................... 81 Capítulo 29:

Depuração .................... ................................................ ................................................ ...................... 82

Seção 29.1: TypeScript com nó ts no WebStorm Seção 29.2: ................................................ ............................................. 82
TypeScript com nó ts no código do Visual Studio Seção 29.3: JavaScript ................................................ ............................. 83
com SourceMaps no código do Visual Studio Seção 29.4: JavaScript com ................................................ ....................... 84
SourceMaps no WebStorm ................................................ ......................................... 84

Capítulo 30: Teste de Unidade ....................................... ................................................ ......................................... 86 Seção 30.1:

fita ... ................................................ ................................................ ................................................ 86 Seção 30.2: jest (ts-
jest) ...................................... ................................................ ................................................ 87 Seção 30.3: alsaciano
................................................ ................................................ ............................................. 89
Seção 30.4: plug-in chai-immutável ....................................... ................................................ ......................... 89 Créditos
................................................ ................................................ ................................................ ....................... 91

você pode gostar ................................................ ................................................ ................................................ .. 93

Machine Translated by Google

Sobre

Sinta-se à vontade para compartilhar este PDF com qualquer pessoa

gratuitamente, a versão mais recente deste livro pode ser baixada em:

https://goalkicker.com/TypeScriptBook

Este livro TypeScript Notes for Professionals é compilado de Stack Overflow Documentation,
o conteúdo é escrito pelas pessoas bonitas do Stack Overflow.
O conteúdo do texto é liberado sob Creative Commons BY-SA, veja os créditos no final deste
livro, quem contribuiu para os vários capítulos. As imagens podem ter direitos autorais de seus
respectivos proprietários, a menos que especificado de outra forma

Este é um livro gratuito não oficial criado para fins educacionais e não é afiliado a grupos
ou empresas oficiais do TypeScript nem ao Stack Overflow. Todas as marcas comerciais e
marcas registradas são de propriedade de seus respectivos
proprietários de empresas

As informações apresentadas neste livro não são garantidas como corretas ou precisas,
use por sua conta e risco

Envie comentários e correções para [email protected]

Notas TypeScript do GoalKicker.com para profissionais 1

Machine Translated by Google

Capítulo 1: Introdução ao TypeScript

Data de lançamento da
versão 2.8.3 20/04/2018

2.8 2018-03-28
2,8 CR 16/03/2018
2.7.2 16/02/2018
2.7.1 01/02/2018
2.7 beta 18-01-2018
2.6.1 01/11/2017
2.5.2 01/09/2017
2.4.1 2017-06-28
2.3.2 28/04/2017
2.3.1 2017-04-25
2.3.0 beta 2017-04-04
2.2.2 13-03-2017
2.2 17-02-2017
2.1.6 2017-02-07
2.2 beta 2017-02-02
2.1.5 2017-01-05
2.1.4 05/12/2016
2.0.8 2016-11-08
2.0.7 03/11/2016
2.0.6 23/10/2016
2.0.5 2016-09-22
2.0 Beta 2016-07-08
1.8.10 2016-04-09
1.8.9 16/03/2016
1.8.5 2016-03-02
1.8.2 17/02/2016
1.7.5 14/12/2015
1.7 20/11/2015
1.6 11-09-2015
1.5.4 15-07-2015
1,5 15-07-2015
1.4 13/01/2015
1.3 2014-10-28
1.1.0.1 23/09/2014

Seção 1.1: Instalação e configuração

Fundo

TypeScript é um superconjunto digitado de JavaScript que compila diretamente no código JavaScript. Os arquivos TypeScript geralmente
usam a extensão .ts . Muitos IDEs suportam TypeScript sem nenhuma outra configuração necessária, mas TypeScript também pode
ser compilado com o pacote TypeScript Node.JS a partir da linha de comando.

Notas TypeScript do GoalKicker.com para profissionais 2

Machine Translated by Google

IDEs
Estúdio visual

O Visual Studio 2015 inclui TypeScript.

Visual Studio 2013 Update 2 ou posterior inclui TypeScript, ou você pode baixar TypeScript para versões anteriores.

Código do Visual Studio

Código do Visual Studio (vscode) fornece preenchimento automático contextual, bem como ferramentas de refatoração e depuração
para TypeScript. O próprio vscode é implementado no TypeScript. Disponível para Mac OS X, Windows e Linux.

WebStorm

WebStorm 2016.2 vem com TypeScript e um compilador integrado. [WebStorm não é gratuito]

eu entendo a ideia

IDEIA IntelliJ 2016.2 tem suporte para TypeScript e um compilador por meio de um plug-in mantido pela equipe JetBrains.
[IntelliJ não é gratuito]

Atom & atom-typescript

Átomo suporta TypeScript com o atom-typescript pacote.

Texto Sublime

Texto Sublime suporta TypeScript com o TypeScript pacote.

Instalando a interface de linha de comando

Instalar Node.js
Instale o pacote npm globalmente

Você pode instalar o TypeScript globalmente para ter acesso a ele de qualquer diretório.

npm install -g digitado

ou

Instale o pacote npm localmente

Você pode instalar o TypeScript localmente e salvar em package.json para restringir a um diretório.

npm install typescript --save-dev Canais de instalação

Você pode instalar a partir de:

Canal estável: npm install typescript

Canal beta: npm install typescript@beta
Canal de desenvolvimento: npm install typescript@next

Compilando o código TypeScript

O comando de compilação tsc vem com typescript, que pode ser usado para compilar o código.

tsc meu-código.ts

Isso cria um arquivo my-code.js .

Compilar usando tsconfig.json

Notas TypeScript do GoalKicker.com para Profissionais 3

Machine Translated by Google

Você também pode fornecer opções de compilação que acompanham seu código por meio de um tsconfig.json arquivo. Para
iniciar um novo projeto TypeScript, entre no diretório raiz do seu projeto em uma janela de terminal e execute tsc --init. Esse comando
gerará um arquivo tsconfig.json com opções de configuração mínimas, semelhantes às abaixo.

{
"compilerOptions":
{ "module": "commonjs",
"target": "es5",
"noImplicitAny": falso,
"sourceMap": falso,
"pretty": verdadeiro
},
"excluir":
[ "node_modules"
]
}

Com um arquivo tsconfig.json colocado na raiz do seu projeto TypeScript, você pode usar o comando tsc para executar a compilação.

Seção 1.2: Sintaxe básica

TypeScript é um superconjunto digitado de JavaScript, o que significa que todo código JavaScript é um código TypeScript válido. O
TypeScript adiciona muitos novos recursos além disso.

O TypeScript torna o JavaScript mais parecido com uma linguagem fortemente tipada e orientada a objetos, semelhante a C# e Java.
Isso significa que o código TypeScript tende a ser mais fácil de usar para grandes projetos e que o código tende a ser mais fácil de
entender e manter. A tipagem forte também significa que a linguagem pode (e é) pré-compilada e que as variáveis não podem
receber valores que estejam fora de seu intervalo declarado. Por exemplo, quando uma variável TypeScript é declarada como um
número, você não pode atribuir um valor de texto a ela.

Essa forte orientação de tipo e objeto torna o TypeScript mais fácil de depurar e manter, e esses eram dois dos pontos mais fracos do
JavaScript padrão.

Declarações de tipo

Você pode adicionar declarações de tipo a variáveis, parâmetros de função e tipos de retorno de função. O tipo é escrito após dois
pontos após o nome da variável, assim: var num: number = 5; O compilador verificará os tipos (quando possível) durante a
compilação e relatará os erros de tipo.

var num: numero = 5;

num = "isto é uma string"; // erro: O tipo 'string' não pode ser atribuído ao tipo 'number'.

Os tipos básicos são:

número (ambos inteiros e números de ponto flutuante)

string
boleano
Variedade. Você pode especificar os tipos de elementos de uma matriz. Há duas maneiras equivalentes de definir tipos de array:
Array<T> e T[]. Por exemplo: number[]
- array de números Array<string>
- array de strings
Tuplas. As tuplas têm um número fixo de elementos com tipos específicos.
[boolean, string] - tupla onde o primeiro elemento é um booleano e o segundo é uma string. [número,
número, número] - tupla de três números.

4
Notas TypeScript do GoalKicker.com para profissionais
Machine Translated by Google

{} - objeto, você pode definir suas propriedades ou indexador

{nome: string, idade: número} - objeto com atributos de nome e idade {[chave:
string]: número} - um dicionário de números indexados por string
enum - { Red = 0, Blue, Green } - enumeração mapeada para números Função.
Você especifica os tipos para os parâmetros e o valor de retorno:
(param: number) => string - função que recebe um parâmetro numérico retornando string () => number
- função sem parâmetros retornando um número. (a: string, b?: boolean) =>
void - função que recebe uma string e opcionalmente um boolean sem valor de retorno.

any - Permite qualquer tipo. As expressões que envolvem qualquer não são verificadas
quanto ao tipo. void - representa "nada", pode ser usado como valor de retorno de uma função. Apenas null e undefined fazem parte
do tipo void .
nunca
deixe foo: nunca; -Como o tipo de variáveis em guardas de tipo que nunca são verdadeiras.
função error(mensagem: string): nunca { lançar novo Error(mensagem); } - Como o tipo de retorno de funções que nunca
retornam.

nulo - digite para o valor nulo. null faz parte implicitamente de cada tipo, a menos que verificações nulas estritas estejam habilitadas.

Fundição

Você pode executar a conversão explícita por meio de colchetes angulares, por exemplo:

var derivado: MyInterface;

(<ImplementingClass>derived).someSpecificMethod();

Este exemplo mostra uma classe derivada que é tratada pelo compilador como uma MyInterface. Sem a conversão na segunda linha, o compilador
lançaria uma exceção, pois não entende someSpecificMethod(), mas a conversão por meio de <ImplementingClass>derived sugere ao
compilador o que fazer.

Outra forma de conversão em TypeScript é usando a palavra-chave as :

var derivado: MyInterface;

(derivado como ImplementingClass).someSpecificMethod();

Desde o TypeScript 1.6, o padrão é usar a palavra-chave as , porque usar <> é ambíguo em arquivos .jsx . Isso é mencionado na
documentação oficial do TypeScript.

Aulas

As classes podem ser definidas e usadas no código TypeScript. Para saber mais sobre classes, consulte a documentação de classes
página.

Seção 1.3: Olá, mundo

class Greeter
{ saudação: string;

construtor(mensagem: string) { this.greeting

= mensagem;

} greet(): string { return

this.greeting;
}
};

Notas TypeScript do GoalKicker.com para profissionais 5

Machine Translated by Google

let saudação = new saudação("Olá, mundo!");

console.log(greeter.greet());

Aqui temos uma classe, Greeter, que possui um construtor e um método de saudação . Podemos construir uma instância da classe usando a palavra-

chave new e passar uma string que queremos que o método greet envie para o console. A instância de nossa classe Greeter é armazenada na variável
greeter , que então chamamos de método greet .

Seção 1.4: Executando TypeScript usando ts-node

nó ts é um pacote npm que permite ao usuário executar arquivos typescript diretamente, sem a necessidade de pré-
compilação usando tsc. Ele também fornece REPL.

Instale o ts-node globalmente usando

npm install -g ts-node

ts-node não empacota o compilador typescript, então você pode precisar instalá-lo.

npm install -g digitado

Executando script

Para executar um script chamado main.ts, execute

ts-node main.ts

// main.ts
console.log("Olá mundo");

Exemplo de uso

$ ts-node main.ts
Olá Mundo

Executando REPL

Para executar REPL, execute o comando ts-node

Exemplo de uso

$ ts-node >
soma const = (a, b): número => a + b; indefinido
> soma(2,
2) 4

> .exit

Para sair do REPL, use o comando .exit ou pressione CTRL+C duas vezes.

Seção 1.5: TypeScript REPL em Node.js

Para usar o TypeScript REPL no Node.js, você pode usar o pacote tsun

Instale-o globalmente com

Notas TypeScript do GoalKicker.com para profissionais 6

Machine Translated by Google

npm install -g tsun

e execute em seu terminal ou prompt de comando com o comando tsun

Exemplo de uso:

$ tsun
TSUN : Tipo de nó atualizado para
TypeScript na expressão TypeScript para avaliar o
tipo :ajuda para comandos em repl $
function multiple(x, y) { ..return x *
y; ..} indefinido $

multiplicar(3,
4)
12

Notas TypeScript do GoalKicker.com para profissionais 7

Machine Translated by Google

Capítulo 2: Por que e quando usar

TypeScript
Se você achar os argumentos para sistemas de tipos persuasivos em geral, ficará satisfeito com o TypeScript.

Ele traz muitas das vantagens do sistema de tipos (segurança, legibilidade, ferramentas aprimoradas) para o ecossistema JavaScript.
Ele também sofre de algumas das desvantagens dos sistemas de tipos (aumento de complexidade e incompletude).

Seção 2.1: Segurança

O TypeScript detecta erros de tipo antecipadamente por meio de análise estática:

função double(x: número): número { return

2 * x;

} duplo('2');
~~~ O argumento do tipo '"2"' não pode ser atribuído ao parâmetro do tipo 'número'. //

Seção 2.2: Legibilidade

O TypeScript permite que os editores forneçam documentação contextual:

Você nunca esquecerá se String.prototype.slice leva (start, stop) ou (start, length) novamente!

Seção 2.3: Ferramentas

O TypeScript permite que os editores executem refatorações automatizadas que estão cientes das regras dos idiomas.

Aqui, por exemplo, o Visual Studio Code é capaz de renomear as referências ao foo interno sem alterar o foo externo.
Isso seria difícil de fazer com um simples localizar/substituir.

Notas TypeScript do GoalKicker.com para profissionais 8

Machine Translated by Google

Capítulo 3: Tipos principais do TypeScript

Seção 3.1: Tipos Literais de String

Os tipos literais de string permitem que você especifique o valor exato que uma string pode ter.

let myFavoritePet: "cachorro";

meuPetFavorito = "cachorro";

Qualquer outra string dará um erro.

// Erro: O tipo '"rock"' não pode ser atribuído ao tipo '"dog"'. // myFavoritePet
= "rock";

Juntamente com Type Aliases e Union Types, você obtém um comportamento semelhante a enum.

tipo Espécie = "gato" | "cachorro" | "pássaro";

function buyPet(pet: Espécie, nome: string) : Pet { /*...*/ }

buyPet(myFavoritePet /* "cachorro" conforme definido acima */, "Rocky");

// Erro: Argumento do tipo '"rock"' não pode ser atribuído ao parâmetro do tipo "'gato' | "cachorro" | "pássaro".
O tipo '"rock"' não pode ser atribuído ao tipo '"bird"'. //
buyPet("rock", "Rocky");

Tipos literais de cadeia de caracteres podem ser usados para distinguir sobrecargas.

função buyPet(animal de estimação: Espécie, nome: string) :

Animal de estimação; função buyPet(pet: "gato", nome:
string): Gato; function buyPet(pet: "cachorro", nome: string):
Cachorro; função buyPet(pet: "pássaro", nome: string): Pássaro;
function buyPet(pet: Espécie, nome: string) : Pet { /*...*/ }

let dog = buyPet(myFavoritePet /* "dog" conforme definido acima */, "Rocky"); // cachorro é
do tipo Cachorro (cachorro: Cachorro)

Eles funcionam bem para protetores de tipo definido pelo usuário.

interface Animal de
estimação { espécie:
Espécie;
comer(); dormir();
}

interface Cat extends Pet { espécies:

"gato";
}

interface Bird estende Pet {

espécie: "pássaro";
cantar();
}

function petIsCat(pet: Pet): pet is Cat { return

pet.species === "cat";
}

Notas TypeScript do GoalKicker.com para profissionais 9

Machine Translated by Google

function petIsBird(pet: Pet): pet is Bird { return pet.species

=== "bird";
}

function playWithPet(pet: Pet)

{ if(petIsCat(pet)) { // pet
agora é do tipo Cat (pet: Cat) pet.eat();
pet.sleep(); }
else
if(petIsBird(pet)) { // pet agora é do
tipo Bird (pet: Bird) pet.eat(); pet.sing(); pet.sleep();

}
}

Código de exemplo completo

let myFavoritePet: "cachorro";

meuPetFavorito = "cachorro";

// Erro: O tipo '"rock"' não pode ser atribuído ao tipo '"dog"'. // myFavoritePet
= "rock";

tipo Espécie = "gato" | "cachorro" | "pássaro";

interface Animal de
estimação { espécie:
Espécie; nome:
string;
comer();
andar(); dormir();
}

interface Cat estende Pet {

espécie: "gato";
}

interface Dog extends Pet

{ espécies: "cachorro";
}

interface Bird estende Pet {

espécie: "pássaro";
cantar();
}

// Erro: Interface 'Rock' estende incorretamente a interface 'Pet'. Tipos de 'espécies' de propriedade são incompatíveis. O
tipo '"rock"' não pode ser atribuído ao tipo '"cat" | "cachorro" | "pássaro"'. O tipo '"rock"' não pode ser atribuído ao tipo '"bird"'. //
interface Rock extends Pet { // type:
"rock"; // }

função buyPet(animal de estimação: Espécie, nome: string) :

Animal de estimação; função buyPet(pet: "gato", nome:
string): Gato; function buyPet(pet: "cachorro", nome: string):
Cachorro; função buyPet(pet: "pássaro", nome: string): Pássaro;
function buyPet(pet: Espécie, nome: string) : Pet { if(pet === "gato")
{

Notas TypeScript do GoalKicker.com para profissionais 10

Machine Translated by Google

return
{ espécie: "gato",
nome: nome,
come: function ()
{ console.log(`${this.name} come.`); }, walk:
function () { console.log(`$
{this.name} walks.`); }, sleep: function ()
{ console.log(`${this.name}
sleeps.`);

} } como
Gato; } else if(pet === "cachorro")
{ return
{ espécie: "cachorro",
nome: nome,
come: function ()
{ console.log(`${this.name} come.`); }, walk:
function () { console.log(`$
{this.name} walks.`); }, sleep: function ()
{ console.log(`${this.name}
sleeps.`);

} } como
Cachorro; } else if(pet ===
"pássaro")
{ return { espécie:
"pássaro",
nome: nome, comer:
função () { console.log(`${este.nome}
come.`); }, walk: function ()
{ console.log(`${this.name} walks.`); }, sleep:
function () { console.log(`$
{this.name} sleeps.`); }, sing: function ()
{ console.log(`${this.name}
canta.`);

} } como
Pássaro; }
else { throw `Desculpe, não temos um ${pet}. Gostaria de comprar um cachorro?`;
}
}

function petIsCat(pet: Pet): pet é Cat {

return pet.species === "gato";
}

function petIsDog(pet: Pet): pet is Dog { return

pet.species === "dog";
}

function petIsBird(pet: Pet): pet is Bird { return

pet.species === "bird";
}

function playWithPet(pet: Pet)

{ console.log(`Ei ${pet.name}, vamos brincar.`);

if(petIsCat(pet)) { // pet
agora é do tipo Cat (pet: Cat)

pet.comer();
pet.sleep();

Notas TypeScript do GoalKicker.com para profissionais 11

Machine Translated by Google

// Erro: O tipo '"bird"' não pode ser atribuído ao tipo '"cat"'. // pet.type =
"pássaro";

// Erro: A propriedade 'sing' não existe no tipo 'Cat'. // pet.sing();

} else if(petIsDog(pet)) { // pet

agora é do tipo Dog (pet: Dog)

pet.comer();
pet.walk();
pet.sleep();

} else if(petIsBird(pet)) { // pet

agora é do tipo Bird (pet: Bird)

pet.comer();
pet.sing();
pet.sleep(); }
else
{ throw "Um animal de estimação desconhecido. Você comprou uma pedra?";
}
}

let dog = buyPet(myFavoritePet /* "dog" conforme definido acima */, "Rocky"); // cachorro
é do tipo Cachorro (cachorro: Cachorro)

// Erro: Argumento do tipo '"rock"' não pode ser atribuído ao parâmetro do tipo "'gato' | "cachorro" | "pássaro".
O tipo '"rock"' não pode ser atribuído ao tipo '"bird"'. //
buyPet("rock", "Rocky");

playWithPet(cachorro); //
Saída: Ei Rocky, vamos jogar. // Rocky
come.
Caminhadas rochosas.
// // Rocky dorme.

Seção 3.2: Tupla

Tipo de matriz com tipos conhecidos e possivelmente diferentes:

deixe dia: [número, string]; dia =

[0, 'segunda-feira']; // dia válido = ['zero',
'segunda-feira']; // inválido: 'zero' não é numérico console.log(day[0]); // 0
console.log(dia[1]); // Segunda-
feira

dia[2] = 'Sábado'; // válido: [0, 'Sábado'] dia[3] = false; //

inválido: deve ser o tipo de união de 'number | corda'

Seção 3.3: Booleano

Um booleano representa o tipo de dados mais básico em TypeScript, com o objetivo de atribuir valores verdadeiro/falso.

// definido com valor inicial (verdadeiro ou falso) let isTrue:

boolean = true;

// o padrão é 'indefinido', quando não definido explicitamente let

unsetBool: boolean;

Notas TypeScript do GoalKicker.com para profissionais 12

Machine Translated by Google
// também pode ser definido como 'nulo', assim
como permite nullableBool: boolean = null;

Seção 3.4: Tipos de interseção

Um tipo de interseção combina o membro de dois ou mais tipos.

interface Faca { cut();

interface BottleOpener{ openBottle();

interface Chave de
fenda{ turnScrew();
}

digite SwissArmyKnife = Faca e abridor de garrafas e chave de fenda;

function use(ferramenta: SwissArmyKnife){

console.log(" Posso fazer qualquer coisa!");

tool.cut();
ferramenta.openBottle();
ferramenta.turnScrew();
}

Seção 3.5: Tipos em argumentos de função e valor de retorno.

Número
Ao criar uma função no TypeScript, você pode especificar o tipo de dados dos argumentos da função e o tipo de dados para o valor de retorno

Exemplo:

função soma(x: número, y: número): número { return x + y;

Aqui a sintaxe x: número, y: número significa que a função pode aceitar dois argumentos x e y e eles podem ser apenas números e
(...): número { significa que o valor de retorno pode ser apenas um número

Uso:

sum(84 + 76) // será retornado 160

Observação:

Você não pode fazer isso

função sum(x: string, y: string): número { return x + y;

ou

Notas TypeScript do GoalKicker.com para profissionais 13

Machine Translated by Google

função soma(x: número, y: número): string { return x + y;

receberá os seguintes erros:

erro TS2322: o tipo 'string' não pode ser atribuído ao tipo 'number' e o erro TS2322: o tipo 'number' não pode ser atribuído ao
tipo 'string' , respectivamente

Seção 3.6: Tipos em argumentos de função e valor de retorno.

Corda
Exemplo:

função olá(nome: string): string { return `Olá $

{nome}!`;
}

Aqui a sintaxe nome: string significa que a função pode aceitar um argumento de nome e este argumento só pode ser string e (...):
string { significa que o valor de retorno pode ser apenas uma string

Uso:

hello('StackOverflow Documentation') // será retornado Hello StackOverflow Documentation!

Seção 3.7: const Enum

Um Enum const é o mesmo que um Enum normal. Exceto que nenhum objeto é gerado em tempo de compilação. Em vez disso, os
valores literais são substituídos onde o const Enum é usado.

// TypeScript: Um Enum const pode ser definido como um Enum normal (com valor inicial, valores específicos, etc.) const
enum
NinjaActivity { Espionage,
Sabotage,
Assassination

// JavaScript: Mas nada é gerado

// TypeScript: Exceto se você usar let

myFavoriteNinjaActivity = NinjaActivity.Espionage;
console.log(myFavoritePirateActivity); // 0

// JavaScript: Então apenas o número do valor é compilado no código // var myFavoriteNinjaActivity

= 0 / * Espionagem */; // console.log(myFavoritePirateActivity); // 0

// TypeScript: O mesmo para o outro exemplo de constante

console.log(NinjaActivity["Sabotage"]); // 1

// JavaScript: Apenas o número e em um comentário o nome do valor // console.log(1 / *

"Sabotage" */); // 1

// TypeScript: Mas sem o objeto nenhum acesso em tempo de execução é possível //

Erro: Um membro enum const só pode ser acessado usando uma string literal. //
console.log(NinjaActivity[myFavoriteNinjaActivity]);

Notas TypeScript do GoalKicker.com para Profissionais 14

Machine Translated by Google

Para comparação, um Enum normal

// TypeScript: Um Enum enum

PirateActivity { normal
Embarque,
Bebendo,
Esgrima
}

// JavaScript: O Enum após a compilação // var

PirateActivity; // (função
(PirateActivity) {
PirateActivity[PirateActivity["Embarcando"] = 0] = "Embarcando"; //
PirateActivity[PirateActivity["Beber"] = 1] = "Beber"; // //
PirateActivity[PirateActivity["Esgrima"] = 2] = "Esgrima";
// })(PirateActivity || (PirateActivity = {}));

// TypeScript: Um uso normal deste Enum permite

que myFavoritePirateActivity = PirateActivity.Boarding;
console.log(myFavoritePirateActivity); // 0

// JavaScript: Parece bastante semelhante em JavaScript // var

myFavoritePirateActivity = PirateActivity.Boarding; //
console.log(myFavoritePirateActivity); // 0

// TypeScript: E algum outro uso normal

console.log(PirateActivity["Drinking"]); // 1

// JavaScript: Parece bastante semelhante em JavaScript //

console.log(PirateActivity["Drinking"]); // 1

// TypeScript: Em tempo de execução, você pode acessar um enum

normal console.log(PirateActivity[myFavoritePirateActivity]); // "Embarque"

// JavaScript: E será resolvido em tempo de execução //

console.log(PirateActivity[myFavoritePirateActivity]); // "Embarque"

Seção 3.8: Número

Como o JavaScript, os números são valores de ponto flutuante.

deixe pi: número = 3,14; // base 10 decimal por padrão

deixe hexadecimal: número = 0xFF; // 255 em decimal

ECMAScript 2015 permite binário e octal.

deixe binário: número = 0b10; // 2 em decimal let octal:

number = 0o755; // 493 em decimal

Seção 3.9: Sequência

Tipo de dados textuais:

deixe aspas simples: string = 'single'; deixe

aspas duplas: string = "double"; let
templateString: string = `Eu sou ${ singleQuotes }`; // Sou solteiro

Notas TypeScript do GoalKicker.com para Profissionais 15

Machine Translated by Google

Seção 3.10: Matriz

Uma matriz de valores:

deixe trêsPorcos: número[] = [1, 2, 3]; let

genericStringArray: Array<string> = ['first', '2nd', '3rd'];

Seção 3.11: Enum

Um tipo para nomear um conjunto de valores numéricos:

Os valores numéricos são padronizados para 0:

enum Dia { Segunda, Terça, Quarta, Quinta, Sexta, Sábado, Domingo }; let bestDay: Day =
Day.Saturday;

Defina um número inicial padrão:

enum TenPlus { Dez = 10, Onze, Doze }

ou atribuir valores:

enum MyOddSet { Três = 3, Cinco = 5, Sete = 7, Nove = 9 }

Seção 3.12: Qualquer

Quando não tiver certeza de um tipo, qualquer um está disponível:

deixe qualquer coisa: qualquer = 'Eu sou uma

string'; qualquer coisa = 5; // mas agora eu sou o número 5

Seção 3.13: Vazio

Se você não tiver nenhum tipo, comumente usado para funções que não retornam nada:

function log(): void

{ console.log('Não retorno nada');
}

Tipos void Só podem ser atribuídos nulos ou indefinidos.

Notas TypeScript do GoalKicker.com para Profissionais 16

Machine Translated by Google

Capítulo 4: Matrizes
Seção 4.1: Encontrando Objetos no Array
Usando
find() inventário const =
[ {nome: 'maçãs', quantidade: 2},
{nome: 'bananas', quantidade: 0}, {nome:
'cerejas', quantidade: 5}
];

função encontrarCerejas(fruta) {
return fruta.nome === 'cerejas';
}

inventário.find(encontrarCherries); // { nome: 'cerejas', quantidade: 5 }

/ * OU */

Inventory.find(e => e.name === 'maçãs'); // { nome: 'maçãs', quantidade: 2 }

Notas TypeScript do GoalKicker.com para Profissionais 17

Machine Translated by Google

Capítulo 5: Enums
Seção 5.1: Enums com valores explícitos
Por padrão, todos os valores de enumeração são resolvidos para números. Digamos que se você tiver algo como

enum MimeType {
JPEG,
PNG,
PDF
}

o valor real por trás, por exemplo, MimeType.PDF será 2.

Mas algumas vezes é importante que o enum resolva para um tipo diferente. Por exemplo, você recebe o valor do backend/frontend/outro sistema que é
definitivamente uma string. Isso pode ser uma dor, mas felizmente existe este método:

enum MimeType {
JPEG = <qualquer>'imagem/jpeg',
PNG = <qualquer>'imagem/png',
PDF = <qualquer>'aplicativo/pdf'
}

Isso resolve o MimeType.PDF para application/pdf.

Desde o TypeScript 2.4 é possível declarar string enums:

enum MimeType {
JPEG = 'imagem/jpeg',
PNG = 'imagem/png',
PDF = 'aplicativo/pdf',
}

Você pode fornecer explicitamente valores numéricos usando o mesmo método

enum MyType {
Valor = 3,
ValorEx = 30,
ValorEx2 = 300
}

Tipos mais sofisticados também funcionam, pois enums não const são objetos reais em tempo de execução, por exemplo

enum FancyType {
OneArr = <qualquer>[1],
TwoArr = <qualquer>[2, 2],
TrêsArr = <qualquer>[3, 3, 3]
}

torna-se

var FancyType;
(função (FancyType) {
FancyType[FancyType["OneArr"] = [1]] = "OneArr";
FancyType[FancyType["TwoArr"] = [2, 2]] = "TwoArr";

Notas TypeScript do GoalKicker.com para Profissionais 18

Machine Translated by Google

FancyType[FancyType["ThreeArr"] = [3, 3, 3]] = "ThreeArr";

})(FancyType || (FancyType = {}));

Seção 5.2: Como obter todos os valores de enumeração

enum SomeEnum { A, B }

deixe enumValues:Array<string>= [];

for(deixar valor em SomeEnum)

{ if(typeof SomeEnum[value] === 'number')
{ enumValues.push(value);
}
}

enumValues.forEach(v=> console.log(v))
//
A // B

Seção 5.3: Estendendo enums sem implementação de enum

personalizado

enum SourceEnum
{ valor1 = <qualquer>'valor1',
valor2 = <qualquer>'valor2'
}

enum AdditionToSourceEnum
{ valor3 = <qualquer>'valor3',
valor4 = <qualquer>'valor4'
}

// precisamos deste tipo para TypeScript resolver os tipos corretamente type

TestEnumType = SourceEnum | AdditionToSourceEnum; // e
precisamos deste valor "instância" para usar os valores let
TestEnum = Object.assign({}, SourceEnum, AdditionToSourceEnum); // também
funciona bem com o recurso TypeScript 2 // let
TestEnum = { ...SourceEnum, ...AdditionToSourceEnum };

function check(teste: TestEnumType) { return

teste === TestEnum.value2;
}

console.log(TestEnum.value1);
console.log(TestEnum.value2 === <qualquer>'value2');
console.log(check(TestEnum.value2));
console.log(check(TestEnum.value3));

Seção 5.4: Implementação de enumeração personalizada: estende-se para enums

Às vezes, é necessário implementar o Enum por conta própria. Por exemplo, não há uma maneira clara de estender outras enumerações.
A implementação personalizada permite isso:

classe Enum
{ construtor( valor protegido: string) {}

public toString() { return

String(this.value);

Notas TypeScript do GoalKicker.com para Profissionais 19

Machine Translated by Google

público é(valor: Enum | string) {

return this.value = value.toString();
}
}

classe SourceEnum estende Enum {

public static value1 = new SourceEnum('value1'); public
static value2 = new SourceEnum('value2');
}

classe TestEnum estende SourceEnum {

public static value3 = new TestEnum('value3'); public
static value4 = new TestEnum('value4');
}

verificação de função (teste: TestEnum) {

teste de retorno === TestEnum.value2;
}

deixe valor1 = TestEnum.value1;

console.log(value1 + 'olá');
console.log(value1.toString() === 'value1');
console.log(value1.is('value1')); console.log(!
TestEnum.value3.is(TestEnum.value3));
console.log(check(TestEnum.value2)); // isso
funciona, mas talvez seu TSLint reclamasse // atenção! não
funciona com === // use .is() em vez disso
console.log(TestEnum.value1
== <any>'value1');

Notas TypeScript do GoalKicker.com para Profissionais 20

Machine Translated by Google

Capítulo 6: Funções
Seção 6.1: Parâmetros opcionais e padrão
Parâmetros Opcionais

No TypeScript, supõe-se que cada parâmetro seja exigido pela função. Você pode adicionar um ? no final de um nome de parâmetro
para defini-lo como opcional.

Por exemplo, o parâmetro lastName desta função é opcional:

function buildName(firstName: string, lastName?: string) {

// ...
}

Parâmetros opcionais devem vir depois de todos os parâmetros não opcionais:

function buildName(firstName?: string, lastName: string) // Inválido

Parâmetros padrão

Se o usuário passar indefinido ou não especificar um argumento, o valor padrão será atribuído. Esses são chamados de parâmetros
inicializados por padrão .

Por exemplo, "Smith" é o valor padrão para o parâmetro lastName .

function buildName(firstName: string, lastName = "Smith") {

// ...

} buildName('foo', 'barra'); // firstName == 'foo', lastName == 'bar' buildName('foo'); //

firstName == 'foo', lastName == 'Smith' buildName('foo', indefinido); // firstName == 'foo',
lastName == 'Smith'

Seção 6.2: Função como um parâmetro

Suponha que queremos receber uma função como parâmetro, podemos fazer assim:

function foo(otherFunc: Function): void {

...
}

Se quisermos receber um construtor como parâmetro:

function foo(constructorFunc: { new() }) { new

constructorFunc();
}

function foo(constructorWithParamsFunc: { new(num: number) }) {

novo construtorWithParamsFunc(1);
}

Ou para facilitar a leitura podemos definir uma interface descrevendo o construtor:

interface IConstructor { new();

Notas TypeScript do GoalKicker.com para Profissionais 21

Machine Translated by Google

function foo(construtorFunc: IConstructor) {

new construtorFunc();
}

Ou com parâmetros:

interface INumberConstructor
{ new(num: number);
}

função foo(função do construtor: INumberConstrutor) { new

função do construtor(1);
}

Mesmo com genéricos:

interface ITConstructor<T, U>

{ new(item: T): U;
}

function foo<T, U>(constructorFunc: ITConstructor<T, U>, item: T): U {

return new construtorFunc(item);
}

Se queremos receber uma função simples e não um construtor é quase a mesma coisa:

function foo(func: { (): void }) { func();

função foo(constructorWithParamsFunc: { (num: número): void }) {

novo construtorWithParamsFunc(1);
}

Ou para facilitar a leitura podemos definir uma interface descrevendo a função:

interface IFunction { ():

void;
}

function foo(func: IFunction ) { func();

Ou com parâmetros:

interface INumberFunction { (num:

número): string;
}

function foo(func: INumberFunction ) { func(1);

Mesmo com genéricos:

Notas TypeScript do GoalKicker.com para Profissionais 22

Machine Translated by Google

interface ITFunc<T, U> { (item:

T): U;
}

function foo<T, U>(constructorFunc: ITFunc<T, U>, item: T): U {

return func(item);
}

Seção 6.3: Funções com tipos de união

Uma função TypeScript pode receber parâmetros de vários tipos predefinidos usando tipos de união.

function whatTime(hora:número|string, minuto:número|string):string{

return hora+':'+minuto;
}

whatTime(1,30)
whatTime('1',30)
whatTime(1,'30')
whatTime('1','30') //'1:30' //'1:30' //'1:30' //'1:30'

O TypeScript trata esses parâmetros como um único tipo que é uma união dos outros tipos, portanto, sua função deve ser capaz de lidar com
parâmetros de qualquer tipo que esteja na união.

function addTen(start:number|string):number{ if(typeof

number === 'string'){ return
parseInt(number)+10; }else{ else
return
número+10;
}
}

Seção 6.4: Tipos de Funções

funções nomeadas

função multiplicar(a, b) {
retornar a * b;
}

funções anônimas

deixe multiplicar = function(a, b) { return a * b; };

Lambda / funções de seta

deixe multiplicar = (a, b) => { return a * b; };

Notas TypeScript do GoalKicker.com para Profissionais 23

Machine Translated by Google

Capítulo 7: Aulas
O TypeScript, como o ECMAScript 6, oferece suporte à programação orientada a objetos usando classes. Isso contrasta com as versões
mais antigas do JavaScript, que suportavam apenas a cadeia de herança baseada em protótipo.

O suporte de classe no TypeScript é semelhante ao de linguagens como Java e C#, pois as classes podem herdar de outras classes,
enquanto os objetos são instanciados como instâncias de classe.

Também semelhantes a essas linguagens, as classes TypeScript podem implementar interfaces ou fazer uso de genéricos.

Seção 7.1: Classes abstratas

classe abstrata Máquina {

constructor( fabricante público: string) { }

// Uma classe abstrata pode definir métodos próprios, ou... summary():

string { return `$
{this.manufacturer} makes this machine.`;
}

// Requer classes herdadas para implementar métodos abstract

moreInfo(): string;
}

classe Carro estende Máquina {

constructor(fabricante: string, posição pública: número, velocidade protegida: número) {
super(fabricante);
}

move()
{ this.position += this.speed;
}

moreInfo()
{ return `Este é um carro localizado em ${esta.posição} e indo a ${esta.velocidade}mph!`;
}
}

let myCar = new Car("Konda", 10, 70);

meuCarro.move(); // a posição agora é 80
console.log(myCar.summary()); // imprime "Konda faz esta máquina."
console.log(meuCarro.moreInfo()); // imprime "Este é um carro localizado a 80 e indo a 70 mph!"

Classes abstratas são classes base a partir das quais outras classes podem se estender. Eles não podem ser instanciados (ou seja, você não
pode fazer new Machine("Konda")).

As duas principais características de uma classe abstrata no TypeScript são:

1. Eles podem implementar métodos próprios.

2. Eles podem definir métodos que as classes herdadas devem implementar.

Por esse motivo, as classes abstratas podem ser consideradas conceitualmente como uma combinação de uma interface e uma classe.

Seção 7.2: Classe simples

carro de classe {

Notas TypeScript do GoalKicker.com para Profissionais 24

Machine Translated by Google

cargo público: número = 0; velocidade

privada: número = 42;

move()
{ this.position += this.speed;
}
}

Neste exemplo, declaramos uma classe simples Car. A classe tem três membros: uma velocidade de propriedade privada, uma posição
de propriedade pública e um movimento de método público. Observe que cada membro é público por padrão. É por isso que move() é
public, mesmo que não tenhamos usado a palavra-chave public .

var carro = new Carro(); // cria uma instância de Car // chama

car.move(); um método
console.log(carro.posição); // acessa uma propriedade pública

Seção 7.3: Herança básica

classe Carro
{ cargo público: número = 0;
velocidade protegida: número = 42;

move()
{ this.position += this.speed;
}
}

classe SelfDrivingCar estende Car {

move() { //
começa a se mover :-)
super.move();
super.move();
}
}

Este exemplo mostra como criar uma subclasse muito simples da classe Car usando a palavra-chave extends . A classe
SelfDrivingCar substitui o método move() e usa a implementação da classe base usando super.

Seção 7.4: Construtores

Neste exemplo, usamos o construtor para declarar uma posição de propriedade pública e uma velocidade de propriedade protegida na
classe base. Essas propriedades são chamadas de propriedades de parâmetro. Eles nos permitem declarar um parâmetro de construtor e um
membro em um só lugar.

Uma das melhores coisas no TypeScript é a atribuição automática de parâmetros do construtor à propriedade relevante.

classe Carro
{ cargo público: número;
velocidade protegida: número;

construtor(posição: número, velocidade: número) { this.posição

= posição; this.speed = velocidade;

move()
{ this.position += this.speed;

Notas TypeScript do GoalKicker.com para Profissionais 25

Machine Translated by Google

}
}

Todo esse código pode ser resumido em um único construtor:

carro de classe {
construtor(posição pública : número, velocidade protegida: número) {}

move()
{ this.position += this.speed;
}
}

E ambos serão transpilados do TypeScript (tempo de design e tempo de compilação) para JavaScript com o mesmo resultado, mas
escrevendo significativamente menos código:

var Car = (function () { function

Car(posição, velocidade) { this.position =
position; this.speed = speed;

}
Car.prototype.move = function ()
{ this.position += this.speed;
};
devolver
Carro; }());

Os construtores de classes derivadas precisam chamar o construtor da classe base com super().

classe SelfDrivingCar estende Car {

constructor(startAutoPilot: boolean) { super(0, 42);
if (startAutoPilot)
{ this.move();

}
}
}

let car = new SelfDrivingCar(true);

console.log(carro.posição); // acessa a posição de propriedade pública

Seção 7.5: Acessores

Neste exemplo, modificamos o exemplo "Classe simples" para permitir o acesso à propriedade de velocidade . Os acessadores TypeScript
nos permitem adicionar código adicional em getters ou setters.

classe Carro
{ cargo público: número = 0;
_velocidade privada: número = 42;
privado _MAX_SPEED = 100

move()
{ this.position += this._speed;
}

obter velocidade (): número {

retornar this._speed;
}

Notas TypeScript do GoalKicker.com para Profissionais 26

Machine Translated by Google

definir velocidade (valor: número) {

this._speed = Math.min(value, this._MAX_SPEED);
}
}

let car = new Car();

carro.velocidade =
120; console.log(carro.velocidade); // 100

Seção 7.6: Transpilação

Dada uma classe SomeClass, vamos ver como o TypeScript é transpilado para JavaScript.

Origem do TypeScript
classe AlgumaClasse {

public static SomeStaticValue: string = "olá"; public

someMemberValue: number = 15; private
somePrivateValue: boolean = false;

construtor ()
{ SomeClass.SomeStaticValue = SomeClass.getGoodbye();
this.someMemberValue = this.getFortyTwo();
this.somePrivateValue = this.getTrue();
}

public static getGoodbye(): string { return

"tchau!";
}

public getFortyTwo(): número {

retornar 42;
}

private getTrue(): boolean { return

true;
}

Fonte JavaScript

Quando transpilado usando TypeScript v2.2.2, a saída é assim:

var SomeClass = (function () { function

SomeClass()
{ this.someMemberValue = 15;
this.somePrivateValue = false;
SomeClass.SomeStaticValue = SomeClass.getGoodbye();
this.someMemberValue = this.getFortyTwo();
this.somePrivateValue = this .getTrue();
}
SomeClass.getGoodbye = function () { return
"tchau!";
};
SomeClass.prototype.getFortyTwo = function () { return
42;
};
SomeClass.prototype.getTrue = function () { return
true;
};

Notas TypeScript do GoalKicker.com para Profissionais 27

Machine Translated by Google

return AlgumaClasse; }
());
SomeClass.SomeStaticValue = "olá";
Observações

A modificação do protótipo da classe é empacotada dentro de um IIFE.

As variáveis de membro são definidas dentro da função da classe principal.

As propriedades estáticas são adicionadas diretamente ao objeto de classe, enquanto as propriedades de instância são adicionadas
ao protótipo.

Seção 7.7: Monkey patch uma função em uma classe existente

Às vezes é útil poder estender uma classe com novas funções. Por exemplo, vamos supor que uma string deva ser convertida em uma
string camel case. Portanto, precisamos informar ao TypeScript que String contém uma função chamada toCamelCase, que
retorna uma string.

interface String
{ toCamelCase(): string;
}

Agora podemos corrigir essa função na implementação de String .

String.prototype.toCamelCase = function() : string { return this.replace(/

[^az ]/ig, '')
.replace(/ (?:^\w|[AZ]|\b\w|\s+)/ g, (correspondência: qualquer, índice: número) => {
""
retornar +corresponder === 0 ? : match[índice === 0 ? 'toLowerCase' : 'toUpperCase']();
});
}

Se esta extensão de String for carregada, ela pode ser usada assim:

"Isto é um exemplo".toCamelCase(); // => "thisIsAnExample"

Notas TypeScript do GoalKicker.com para Profissionais 28

Machine Translated by Google

Capítulo 8: Decorador de classe

Parâmetro Detalhes
alvo A aula sendo decorada

Seção 8.1: Gerando metadados usando um decorador de classe

Desta vez, vamos declarar um decorador de classe que adicionará alguns metadados a uma classe quando aplicarmos a ela:

function addMetadata(alvo: qualquer) {

// Adicionar algum alvo de

metadados.__customMetadata =
{ someKey: "someValue"
};

// Alvo de retorno alvo

de retorno ;

Podemos então aplicar o decorador de classe:

@addMetadata
classe Pessoa
{ private _name: string;
construtor público (nome: string) { this._name
= nome;

} public greet() { return

this._name;
}
}

function getMetadataFromClass(target: any) { return

target.__customMetadata;
}

console.log(getMetadataFromClass(Pessoa));

O decorador é aplicado quando a classe é declarada e não quando criamos instâncias da classe. Isso significa que os metadados são
compartilhados por todas as instâncias de uma classe:

function getMetadataFromInstance(target: any) { return

target.constructor.__customMetadata;
}

let pessoa1 = new Pessoa("João"); let

pessoa2 = new Pessoa("Lisa");

console.log(getMetadataFromInstance(pessoa1));
console.log(getMetadataFromInstance(pessoa2));

Seção 8.2: Passando argumentos para um decorador de classe

Podemos agrupar um decorador de classe com outra função para permitir a personalização:

Notas TypeScript do GoalKicker.com para Profissionais 29

Machine Translated by Google

function addMetadata(metadata: any) { return

function log(target: any) {

// Adicionar
metadados target.__customMetadata = metadata;

// Alvo de retorno
alvo de retorno ;

}
}

O addMetadata recebe alguns argumentos usados como configuração e retorna uma função sem nome que é o decorador real. No decorador
podemos acessar os argumentos porque existe um fechamento no lugar.

Podemos então invocar o decorador passando alguns valores de configuração:

@addMetadata({ guid: "417c6ec7-ec05-4954-a3c6-73a0d7f9f5bf" }) class Person

{ private _name:
string; construtor público
(nome: string) { this._name = nome;

} public greet()
{ return this._name;
}
}

Podemos usar a seguinte função para acessar os metadados gerados:

function getMetadataFromClass(target: any) { return

target.__customMetadata;
}

console.log(getMetadataFromInstance(Pessoa));

Se tudo deu certo, o console deve exibir:

{ guid: "417c6ec7-ec05-4954-a3c6-73a0d7f9f5bf" }

Seção 8.3: Decorador de classe básica

Um decorador de classe é apenas uma função que recebe a classe como seu único argumento e a retorna após fazer algo com ela:

função log<T>(alvo: T) {

// Faça algo com o destino

console.log(target);

// Alvo de retorno
alvo de retorno ;

Podemos então aplicar o decorador de classe a uma classe:

Notas TypeScript do GoalKicker.com para Profissionais 30

Machine Translated by Google

@log
class Person
{ private _name: string;
construtor público (nome: string)
{ this._name = nome;

} public greet()
{ return this._name;
}
}

Notas TypeScript do GoalKicker.com para Profissionais 31

Machine Translated by Google

Capítulo 9: Interfaces
Uma interface especifica uma lista de campos e funções que podem ser esperadas em qualquer classe implementando a interface.
Por outro lado, uma classe não pode implementar uma interface a menos que tenha todos os campos e funções especificados na interface.

O principal benefício do uso de interfaces é que permite usar objetos de diferentes tipos de maneira polimórfica.
Isso ocorre porque qualquer classe que implementa a interface tem pelo menos esses campos e funções.

Seção 9.1: Extensão da Interface

Suponha que temos uma interface:

interface IPpessoa
{ nome: string;
idade: número;

respiração(): vazio;
}

E queremos criar uma interface mais específica que tenha as mesmas propriedades da pessoa, podemos fazer isso usando a palavra-
chave extends :

interface IManager estende IPerson { managerId:

número;

gerenciarPessoas(pessoas: IPpessoa[]): void;

}

Além disso, é possível estender várias interfaces.

Seção 9.2: Interface de classe

Declare o tipo público de variáveis e métodos na interface para definir como outro código datilografado pode interagir com ele.

interface ISampleClassInterface
{ sampleVariable: string;

sampleMethod(): void;

Variávelopcional?: string;
}

Aqui criamos uma classe que implementa a interface.

class SampleClass implementa ISampleClassInterface {

variável de amostra pública: string;
resposta privadaToLifeTheUniverseAndEverything: número;

constructor()
{ this.sampleVariable = 'string value';
this.answerToLifeTheUniverseAndEverything = 42;
}

public sampleMethod(): void { // não

faz nada
}

Notas TypeScript do GoalKicker.com para Profissionais 32

Machine Translated by Google

resposta privada (q: qualquer): número {

retornar this.answerToLifeTheUniverseAndEverything;
}
}

O exemplo mostra como criar uma interface ISampleClassInterface e uma classe SampleClass que implementa a interface.

Seção 9.3: Usando interfaces para polimorfismo

A principal razão para usar interfaces para alcançar o polimorfismo e fornecer aos desenvolvedores a implementação de sua própria
maneira no futuro, implementando os métodos da interface.

Suponha que temos uma interface e três classes:

interface
Conector{ doConnect(): booleano;
}

Esta é a interface do conector. Agora vamos implementar isso para comunicação Wi-Fi.

classe de exportação WifiConnector implementa conector{

public doConnect():
boolean{ console.log("Conectando via wi-fi");
console.log("Obter senha");
console.log("Alocar um IP por 24 horas");
console.log("Conectado");
retornar verdadeiro

Aqui desenvolvemos nossa classe concreta chamada WifiConnector que possui sua própria implementação. Agora é o tipo
Connector.

Agora estamos criando nosso Sistema que possui um componente Conector. Isso é chamado de injeção de dependência.

classe de exportação
Sistema { constructor( conector privado: Conector){ #inject Tipo de conector
conector.doConectar()
}
}

constructor( conector privado: Conector) esta linha é muito importante aqui. Connector é uma interface e deve ter doConnect().
Como Connector é uma interface, esta classe System tem muito mais flexibilidade. Podemos passar qualquer Type que tenha
implementado a interface Connector . No futuro, o desenvolvedor obtém mais flexibilidade. Por exemplo, agora o
desenvolvedor deseja adicionar o módulo de conexão Bluetooth:

classe de exportação BluetoothConnector implementa Connector{

public doConnect():
boolean{ console.log("Conectando via Bluetooth");
console.log("Emparelhar com PIN");
console.log("Conectado");
retornar verdadeiro

Notas TypeScript do GoalKicker.com para Profissionais 33

Machine Translated by Google

Veja que Wifi e Bluetooth possuem sua própria implementação. Sua própria maneira diferente de se conectar. No entanto, ambos
implementaram Type Connector e agora são Type Connector. Para que possamos passar qualquer um deles para a classe System
como parâmetro do construtor. Isso é chamado de polimorfismo. A classe System agora não sabe se é Bluetooth / Wifi,
mesmo que possamos adicionar outro módulo de comunicação como infravermelho, Bluetooth5 e qualquer outro, apenas
implementando a interface do conector .

Isso é chamado de digitação de pato. O tipo de conector agora é dinâmico, pois doConnect() é apenas um espaço reservado e o
desenvolvedor o implementa como seu.

se no construtor ( conector privado: WifiConnector) onde WifiConnector é uma classe concreta, o que acontecerá? Então,
a classe do sistema será fortemente acoplada apenas ao WifiConnector, nada mais. Aqui a interface resolveu nosso
problema por polimorfismo.

Seção 9.4: Interfaces Genéricas

Assim como as classes, as interfaces também podem receber parâmetros polimórficos (também conhecidos como Generics).

Declarando Parâmetros Genéricos em Interfaces

interface IStatus<U> { código:
U;
}

interface IEvents<T> { lista:

T[];
emit(evento: T): void;
getAll(): T[];
}

Aqui, você pode ver que nossas duas interfaces recebem alguns parâmetros genéricos, T e U.

Implementando Interfaces Genéricas

Vamos criar uma classe simples para implementar a interface IEvents.

classe State<T> implementa IEvents<T> {

lista: T[];

construtor() { this.list
= [];
}

emitir(evento: T): void {

this.list.push(evento);
}

getAll(): T[] { return

this.list;
}

Vamos criar algumas instâncias da nossa classe State .

Em nosso exemplo, a classe State manipulará um status genérico usando IStatus<T>. Desta forma, a interface

Notas TypeScript do GoalKicker.com para Profissionais 34

Machine Translated by Google

IEvent<T> também manipulará um IStatus<T>.

const s = new Estado<IStatus<número>>();

// Espera-se que a propriedade 'code' seja um número, então:

s.emit({ code: 200 }); // funciona
s.emit({ código: '500' }); // erro de digitação

s.getAll().forEach(event => console.log(event.code));

Aqui nossa classe State é digitada como IStatus<número>.

const s2 = new Estado<IStatus<Código>>();

// Podemos emitir código como o tipo Code

s2.emit({ code: { message: 'OK', status: 200 } });

s2.getAll().map(event => event.code).forEach(event => {

console.log(event.message);
console.log(event.status);
});

Nossa classe State é digitada como IStatus<Code>. Dessa forma, podemos passar um tipo mais complexo para nosso método emit.

Como você pode ver, as interfaces genéricas podem ser uma ferramenta muito útil para o código estaticamente tipado.

Seção 9.5: Adicionar funções ou propriedades a uma

interface existente
Vamos supor que temos uma referência à definição de tipo JQuery e queremos estendê-la para ter funções adicionais de um plug-in que incluímos e

que não possui uma definição de tipo oficial. Podemos estendê-lo facilmente declarando as funções adicionadas pelo plug-in em uma declaração de interface

separada com o mesmo nome JQuery :

interface JQuery {
pluginFunctionThatDoesNothing(): void;

// cria uma função encadeável

manipulaDOM(HTMLElement): JQuery;
}

O compilador mesclará todas as declarações com o mesmo nome em uma - veja mesclagem de declaração para mais detalhes.

Seção 9.6: Implementação implícita e formato do objeto

O TypeScript oferece suporte a interfaces, mas o compilador gera JavaScript, o que não. Portanto, as interfaces são efetivamente perdidas na etapa de

compilação. É por isso que a verificação de tipo em interfaces depende da forma do objeto - ou seja, se o objeto suporta os campos e funções na

interface - e não se a interface é realmente implementada ou não.

interface IKickable
{ kick(distância: número): void;

} class Bola
{ kick(distance: number): void
{ console.log("Kicked", distance, "meters!");
}

Notas TypeScript do GoalKicker.com para Profissionais 35

Machine Translated by Google

} let kickable: IKickable = new Ball();

kickable.kick(40);

Portanto, mesmo que Ball não implemente explicitamente IKickable, uma ocorrência de Ball pode ser atribuída a (e manipulada como) um
IKickable, mesmo quando o tipo é especificado.

Seção 9.7: Usando interfaces para impor tipos

Um dos principais benefícios do TypeScript é que ele impõe tipos de dados de valores que você está passando em seu código para ajudar a
evitar erros.

Digamos que você esteja fazendo um aplicativo de namoro para animais de estimação.

Você tem esta função simples que verifica se dois animais de estimação são compatíveis entre si...

checkCompatible(petOne, petTwo) { if
(petOne.species === petTwo.species &&
Math.abs(petOne.age - petTwo.age) <= 5) { return
true;
}
}

Este é um código completamente funcional, mas seria muito fácil para alguém, especialmente outras pessoas trabalhando
neste aplicativo que não escreveram esta função, não saber que eles deveriam passar objetos com 'espécie' e 'idade' propriedades.
Eles podem tentar erroneamente checkCompatible(petOne.species, petTwo.species) e, em seguida, ser deixados para
descobrir os erros gerados quando a função tenta acessar petOne.species.species ou petOne.species.age!

Uma maneira de evitar que isso aconteça é especificar as propriedades que queremos nos parâmetros do animal de estimação:

checkCompatible(petOne: {espécie: string, idade: número}, petTwo: {espécie: string, idade: número}) {
//...
}

Nesse caso, o TypeScript garantirá que tudo passado para a função tenha as propriedades 'species' e 'age' (tudo bem se tiverem propriedades
adicionais), mas essa é uma solução um tanto complicada, mesmo com apenas duas propriedades especificadas.
Com interfaces, existe uma maneira melhor!

Primeiro definimos nossa interface:

animal de estimação de interface {

espécies: barbante;
idade: número; //
Podemos adicionar mais propriedades se quisermos.
}

Agora tudo o que temos a fazer é especificar o tipo de nossos parâmetros como nossa nova interface, assim...

checkCompatible(petOne: Pet, petTwo: Pet) {

//...
}

... e o TypeScript garantirá que os parâmetros passados para nossa função contenham as propriedades especificadas no
Interface de animal de estimação!

Notas TypeScript do GoalKicker.com para Profissionais 36

Machine Translated by Google

Capítulo 10: Genéricos

Seção 10.1: Interfaces Genéricas

Declarando uma interface genérica

interface IResult<T>
{ wasSuccessful: boolean;
erro: T;
}

var result: IResult<string> = var error: ....

string = result.error;

Interface genérica com vários parâmetros de tipo

interface IRunnable<T, U>
{ run(input: T): U;
}

var runnable: IRunnable<string, number> = var input: ...

string; var resultado:
número = runnable.run(input);

Implementando uma interface genérica

interface
IResult<T>{ wasSuccessful:
boolean; erro: T;

clone(): IResult<T>;
}

Implemente-o com classe genérica:

classe Result<T> implementa IResult<T> {

constructor( resultado público: booleano, erro público: T) { }

public clone(): IResult<T> { return

new Result<T>(this.result, this.error);
}
}

Implemente-o com classe não genérica:

classe StringResult implementa IResult<string> {

constructor( resultado público: booleano, erro público: string) { }

public clone(): IResult<string> { return new

StringResult(this.result, this.error);
}
}

Seção 10.2: Classe Genérica

classe Resultado<T> {

Notas TypeScript do GoalKicker.com para Profissionais 37

Machine Translated by Google

constructor(public wasSuccessful: boolean, public error: T) { }

public clone(): Resultado<T> {

...
}
}

let r1 = new Result(false, 'error: 42'); // Compilador infere T para string let r2 = new Result(false,
42); // O compilador infere T para o número
let r3 = new Result<string>(true, null); // Definir explicitamente T como string let r4 = new
Result<string>(true, 4); // Erro de compilação porque 4 não é uma string

Seção 10.3: Parâmetros de tipo como restrições

Com o TypeScript 1.8, torna-se possível que uma restrição de parâmetro de tipo faça referência a parâmetros de tipo da
mesma lista de parâmetros de tipo. Anteriormente, isso era um erro.

function assign<T extends U, U>(target: T, source: U): T { for (let id in

source) {
destino[id] = fonte[id];

} retornar destino;
}

seja x = { a: 1, b: 2, c: 3, d: 4 }; atribuir(x, { b:
10, d: 20 }); atribuir(x, { e: 0 }); // Erro

Seção 10.4: Restrições Genéricas

Restrição simples:

interface IRunable { run():

void;
}

interface IRunner<T extends IRunnable>

{ runSafe(runnable: T): void;
}

Restrição mais complexa:

interface IRunnble<U> { run():

U;
}

interface IRunner<T extends IRunnable<U>, U>

{ runSafe(runnable: T): U;
}

Ainda mais complexo:

interface IRunnble<V> {
run(parâmetro: U): V;
}

interface IRunner<T extends IRunnable<U, V>, U, V> {

Notas TypeScript do GoalKicker.com para Profissionais 38

Machine Translated by Google

runSafe(executável: T, parâmetro: U): V;

}

Restrições de tipo embutido:

interface IRunnable<T extends { run(): void }>

{ runSafe(runnable: T): void;
}

Seção 10.5: Funções Genéricas

Nas interfaces:

interface IRunner
{ runSafe<T extends IRunnable>(runnable: T): void;
}

Nas aulas:

class Runner implementa IRunner {

public runSafe<T extends IRunnable>(runnable: T): void {

tente
{ runnable.run(); }
pegar(e) { }

Funções simples:

function runSafe<T extends IRunnable>(runnable: T): void {

tente
{ runnable.run(); }
pegar(e) { }

Seção 10.6: Usando classes e funções genéricas:

Crie uma instância de classe genérica:

var stringRunnable = new Runnable<string>();

Execute a função genérica:

função runSafe<T estende Runnable<U>, U>(runnable: T);

// Especifique os tipos genéricos:

runSafe<Runnable<string>, string>(stringRunnable);

// Deixa o typescript descobrir os tipos genéricos sozinho:

runSafe(stringRunnable);

Notas TypeScript do GoalKicker.com para Profissionais 39

Machine Translated by Google

Capítulo 11: Verificações nulas estritas

Seção 11.1: Verificações nulas estritas em ação

Por padrão, todos os tipos no TypeScript permitem null:

função getId(x: Elemento) { return

x.id;

} getId(nulo); // O TypeScript não reclama, mas é um erro de tempo de execução.

O TypeScript 2.0 adiciona suporte para verificações nulas estritas. Se você definir --strictNullChecks ao executar tsc (ou definir esse sinalizador
em seu tsconfig.json), os tipos não permitirão mais nulo:

função getId(x: Elemento) { return

x.id;

} getId(nulo); // erro: O argumento do tipo 'nulo' não pode ser atribuído ao parâmetro do tipo 'Elemento'.

Você deve permitir valores nulos explicitamente:

função getId(x: Elemento|nulo) { return

x.id; // erro TS2531: O objeto é possivelmente 'nulo'.

} getId(nulo);

Com uma guarda adequada, o tipo de código verifica e executa corretamente:

função getId(x: Elemento|nulo) { if (x)

{ return
x.id; // Nesta ramificação, o tipo de x é Element } else { return
null; //
Nesta ramificação, o tipo de x é nulo.
}

} getId(nulo);

Seção 11.2: Asserções não nulas

O operador de asserção não nula, !, permite afirmar que uma expressão não é nula ou indefinida quando o compilador TypeScript não
pode inferir isso automaticamente:

digite ListNode = { dados: número; próximo?: ListNode; };

function addNext(node: ListNode) { if

(node.next === indefinido) { node.next
= {dados: 0};
}
}

função setNextValue(nó: ListNode, valor: número) { addNext(nó);

// Mesmo sabendo que `node.next` está definido porque acabamos de chamar `addNext`, // o
TypeScript não é capaz de inferir isso na linha de código abaixo: // node.next.data
= value;

Notas TypeScript do GoalKicker.com para Profissionais 40

Machine Translated by Google

// Portanto, podemos usar o operador de asserção não nulo, !, //

para afirmar que node.next não é indefinido e silenciar o aviso do compilador node.next!.data =
value;
}

Notas TypeScript do GoalKicker.com para Profissionais 41

Machine Translated by Google

Capítulo 12: Protetores de tipo definidos pelo usuário

Seção 12.1: Funções de proteção de tipo

Você pode declarar funções que servem como guardas de tipo usando qualquer lógica que desejar.

Eles assumem a forma:

function functionName(variableName: any): variableName is DesiredType { // corpo que

retorna booleano
}

Se a função retornar true, o TypeScript restringirá o tipo a DesiredType em qualquer bloco protegido por uma chamada para a função.

Por exemplo (tente isto):

function isString(test: any): test is string { return typeof

test === "string";
}

function example(foo: any) { if

(isString(foo)) { // foo é
digitado como uma string neste bloco console.log("é
uma string: + foo); } else { // foo é digitado
"
como
qualquer um em este bloco
console.log("não sei o que é isso! [" + foo + "]");
}
}

exemplo("olá mundo"); // imprime "é uma string: hello world" example({ something:
"else" }); // imprime "não sei o que é isso! [[object Object]]"

O predicado do tipo de função de um guarda (o foo é Bar na posição do tipo de retorno da função) é usado em tempo de compilação para
restringir os tipos, o corpo da função é usado em tempo de execução. O predicado de tipo e a função devem concordar, ou seu código não
trabalhar.

As funções de proteção de tipo não precisam usar typeof ou instanceof, elas podem usar uma lógica mais complicada.

Por exemplo, este código determina se você tem um objeto jQuery verificando sua string de versão.

function isJQuery(foo): foo is JQuery { // teste

para a versão do jQuery string return
foo.jquery !== indefinido;
}

function example(foo) { if
(isJQuery(foo)) { // foo é
digitado JQuery aqui foo.eq(0);

}
}

Notas TypeScript do GoalKicker.com para Profissionais 42

Machine Translated by Google

Seção 12.2: Usando instanceof

instanceof requer que a variável seja do tipo any.

Este código (tente isto):

class Pet { }
class Dog extends Pet
{ bark()
{ console.log("woof");
}

} class Cat extends Pet

{ purr()
{ console.log("meow");
}
}

function example(foo: any) { if (foo

instanceof Dog) { // foo é o tipo
Dog neste bloco foo.bark();

if (foo instanceof Cat) { // foo

é do tipo Cat neste bloco foo.purr();

}
}

exemplo(novo
Cachorro()); exemplo(novo Gato());

estampas

au
Miau

para o console.

Seção 12.3: Usando typeof

typeof é usado quando você precisa distinguir entre os tipos number, string, boolean e symbol. Outras constantes de string
não apresentarão erro, mas também não serão usadas para restringir tipos.

Ao contrário de instanceof, typeof funcionará com uma variável de qualquer tipo. No exemplo abaixo, foo pode ser digitado como
número | string sem problemas.

Este código (tente isto):

exemplo de função (foo: any) {

if (typeof foo === "number") { // foo é
o tipo number neste bloco console.log(foo
+ 100);
}

if (tipo de foo === "string") {

Notas TypeScript do GoalKicker.com para Profissionais 43

Machine Translated by Google

// foo é o tipo string neste bloco

console.log("não é um número: " + foo);
}
}

exemplo(23);
exemplo("foo");

estampas

123
não é um número: foo

Notas TypeScript do GoalKicker.com para Profissionais 44

Machine Translated by Google

Capítulo 13: Exemplos básicos do TypeScript

Seção 13.1: 1 exemplo básico de herança de classe usando as
palavras-chave extends e super
Uma classe Car genérica tem algumas propriedades car e um método de descrição

classe
Car{ nome:string;
engineCapacity:string;

constructor(name:string,engineCapacity:string){ this.name =
name;
this.engineCapacity = engineCapacity;
}

describeCar()
{ console.log(`${this.name} carro vem com ${this.engineCapacity} deslocamento`);
}
}

new Car("maruti ciaz","1500cc").describeCar();

A HondaCar estende a classe de carros genéricos existente e adiciona novas propriedades.

class HondaCar extends

Car{ assentoCapacidade:número;

constructor(nome:string,engineCapacity:string,seatingCapacity:number)
{ super(nome,engineCapacity);
this.seatingCapacity=capacidade de assentos;
}

descreveCarroHonda()
{ super.descreveCarro();
console.log(`estes carros vêm com capacidade de ${this.seatingCapacity}`);
}

} new HondaCar("honda jazz","1200cc",4).descreveHondaCar();

Seção 13.2: 2 exemplo de variável de classe estática - conte quantas

vezes o método está sendo invocado
aqui countInstance é uma variável de classe estática

class StaticTest{ static

countInstance : number= 0; constructor()

{ StaticTest.countInstance++;
}
}

new StaticTest(); new

StaticTest();
console.log(StaticTest.countInstance);

Notas TypeScript do GoalKicker.com para Profissionais 45

Machine Translated by Google

Capítulo 14: Importando bibliotecas externas

Seção 14.1: Encontrando arquivos de definição

para texto datilografado 2.x:

definições de DefinitivamenteTyped estão disponíveis via @types npm pacote

npm i --save lodash npm

i --save-dev @types/ lodash

mas caso você queira usar tipos de outros repositórios, pode ser usado da maneira antiga:

para texto datilografado 1.x:

digitação é um pacote npm que pode instalar automaticamente arquivos de definição de tipo em um projeto local. Eu recomendo que você leia o início
rápido.

npm install -tipagens globais

Agora temos acesso ao cli de digitação.

1. O primeiro passo é procurar o pacote utilizado pelo projeto

pesquisa de digitação lodash

NOME FONTE PÁGINA INICIAL DESCRIÇÃO VERSÕES

lodash
ATUALIZADO dt http://lodash.com/ 2
2016-07-20T00:13:09.000Z
lodash global 1
2016-07-01T20:51:07.000Z
lodash https://www.npmjs.com/package/lodash npm 2016-07-01T20:51:07.000Z 1

2. Em seguida, decida de qual fonte você deve instalar. Eu uso dt, que significa "DefinitivamenteTyped" um repositório GitHub
onde a comunidade pode editar digitações, também é normalmente a atualização mais recente.

3. Instale os arquivos de digitação

digitações instalar dt~lodash --global --save

Vamos detalhar o último comando. Estamos instalando a versão do lodash com um tipo definido como um arquivo de digitação global em nosso projeto e
salvando-o como uma dependência em Typings.json . Agora, sempre que importarmos o lodash, o typescript carregará o arquivo de digitação do lodash.

4. Se quisermos instalar tipificações que serão usadas apenas para ambiente de desenvolvimento, podemos fornecer o --save
sinalizador de desenvolvedor :

digitações instalar chai --save-dev

Notas TypeScript do GoalKicker.com para Profissionais 46

Machine Translated by Google

Seção 14.2: Importando um módulo do npm

Se você tiver um arquivo de definição de tipo (d.ts) para o módulo, poderá usar uma instrução de importação .

import _ = require('lodash');

Se você não tiver um arquivo de definição para o módulo, o TypeScript lançará um erro na compilação porque não pode encontrar o módulo
que você está tentando importar.

Nesse caso, você pode importar o módulo com a função de requisição de tempo de execução normal . No entanto, isso o retorna como
qualquer tipo.

// O _ variável é do tipo any, portanto, o TypeScript não executará nenhuma verificação de tipo.
const _: any = require('lodash');

A partir do TypeScript 2.0, você também pode usar uma declaração abreviada de módulo de ambiente para informar ao TypeScript que
existe um módulo quando você não tem um arquivo de definição de tipo para o módulo. O TypeScript não será capaz de fornecer nenhuma
verificação de tipo significativa neste caso.

declarar módulo "lodash";

// agora você pode importar de lodash da maneira que desejar: import

{ flatten } from "lodash"; de "lodash";
_ importar * como

A partir do TypeScript 2.1, as regras foram ainda mais relaxadas. Agora, desde que exista um módulo em seu diretório
node_modules , o TypeScript permitirá que você o importe, mesmo sem nenhuma declaração de módulo em nenhum lugar. (Observe que,
se estiver usando a opção do compilador --noImplicitAny , o seguinte ainda gerará um aviso.)

// Funcionará se `node_modules/ someModule/ index.js` existir, ou se `node_modules/

someModule/ package.json` tiver um ponto de entrada "principal" válido import { foo }
from "someModule";

Seção 14.3: Usando bibliotecas externas globais sem digitações

Embora os módulos sejam ideais, se a biblioteca que você está usando for referenciada por uma variável global (como $ ou _), porque foi
carregada por uma tag de script , você pode criar uma declaração de ambiente para se referir a ela:

declarar const _: qualquer;

Seção 14.4: Encontrando arquivos de definição com TypeScript 2.x

Com as versões 2.x do TypeScript, as tipagens agora estão disponíveis no repositório npm @types. Eles são resolvidos
automaticamente pelo compilador TypeScript e são muito mais simples de usar.

Para instalar uma definição de tipo, basta instalá-la como uma dependência dev em seu pacote de projetos.json

por exemplo

npm i -S lodash
npm i -D @tipos/ lodash

após a instalação, basta usar o módulo como antes

Notas TypeScript do GoalKicker.com para Profissionais 47

Machine Translated by Google

importar * como _ de 'lodash'

Notas TypeScript do GoalKicker.com para Profissionais 48

Machine Translated by Google

Capítulo 15: Módulos - exportando e importando

Seção 15.1: Módulo Hello World

// hello.ts
export function hello(name: string)
{ console.log(`Hello ${name}!`);

} function helloES(nome: string){

console.log(`Hola ${name}!`);

} export {oláES}; olá

padrão de exportação ;

Carregar usando o índice do diretório

Se o diretório contiver um arquivo denominado index.ts , ele poderá ser carregado usando apenas o nome do diretório (para index.ts, o nome do arquivo
é opcional).

// welcome/ index.ts
export function welcome(name: string)
{ console.log(`Welcome ${name}!`);
}

Exemplo de uso de módulos definidos

importar {olá, oláES} de "./olá"; // carregar elementos especificados import defaultHello

from "./hello"; importar * como Bundle de "./ // carrega a exportação padrão no nome defaultHello //
hello"; importar {bem-vindo} de "./bem-vindo"; carrega todas as exportações como
Bundle // note index.ts é omitido

Olá Mundo"); // Olá Mundo!

olaES("Mundo"); // Olá mundo!
padrãoOlá("Mundo"); // Olá Mundo!

Bundle.hello("Mundo"); // Olá Mundo!

Bundle.helloES("Mundo"); // Olá mundo!

bem-vindo("Humano"); // Bem-vindo Humano!

Seção 15.2: Reexportação

O TypeScript permite reexportar declarações.

// Operator.ts
interface Operator { eval(a:
número, b: número): número;

} Operador padrão de exportação ;

// Add.ts
import Operator from "./Operator"; classe de
exportação Adicionar implementa Operador {
eval(a: número, b: número): número {
retornar a + b;
}

Notas TypeScript do GoalKicker.com para Profissionais 49

Machine Translated by Google

// Mul.ts
import Operator from "./Operator"; classe
de exportação Mul implementa Operador {
eval(a: número, b: número): número {
retornar a * b;
}
}

Você pode agrupar todas as operações em uma única biblioteca

// Operators.ts
importa {Add} de "./Add"; importar
{Mul} de "./Mul";

exportar {Adicionar, Mul};

Declarações nomeadas podem ser reexportadas usando sintaxe mais curta

// NamedOperators.ts
exportam {Add} de "./Add";
exportar {Mul} de "./Mul";

As exportações padrão também podem ser exportadas, mas nenhuma sintaxe curta está disponível. Lembre-se, apenas uma exportação padrão por

módulo é possível.

// Calculator.ts
export {Add} de "./Add"; exportar
{Mul} de "./Mul"; importar
Operador de "./Operator";

Operador padrão de exportação ;

Possível é a reexportação da importação agrupada

// RepackedCalculator.ts
exporta * de "./Operators";

Ao reexportar o pacote, as declarações podem ser substituídas quando declaradas explicitamente.

// FixedCalculator.ts
export * from "./Calculator" import
Operator from "./Calculator"; classe de
exportação Adicionar implementa Operador {
eval(a: número, b: número): número { return
42;
}
}

Exemplo de uso

// run.ts
importa {Add, Mul} de "./FixedCalculator";

const add = new Add();

const mul = new Mul();

Notas TypeScript do GoalKicker.com para Profissionais 50

Machine Translated by Google

console.log(add.eval(1, 1)); // 42
console.log(mul.eval(3, 4)); // 12

Seção 15.3: Declarações de exportação/importação

Qualquer declaração (variável, const, função, classe, etc.) pode ser exportada do módulo para ser importada em outro módulo.

O TypeScript oferece dois tipos de exportação: nomeado e padrão.

exportação nomeada

// adams.ts
export function hello(name: string)
{ console.log(`Hello ${name}!`);

} export const answerToLifeTheUniverseAndEverything = 42;

exportação constante não utilizada = 0;

Ao importar exportações nomeadas, você pode especificar quais elementos deseja importar.

importar {olá, answerToLifeTheUniverseAndEverything} de "./adams"; olá

(respostaToLifeTheUniverseAndEverything); // Olá 42!

exportação padrão

Cada módulo pode ter uma exportação padrão

// dent.ts
const defaultValue = 54;
exportar valor padrão padrão ;

que podem ser importados usando

importar dentValue de "./dent";

console.log(dentValue); // 54

Importação agregada

TypeScript oferece método para importar módulo inteiro para variável

// adams.ts
export function hello(name: string)
{ console.log(`Hello ${name}!`);

} export const answerToLifeTheUniverseAndEverything = 42;

importar * como Bundle de "./adams";

Bundle.hello(Bundle.answerToLifeTheUniverseAndEverything); // Olá 42!
console.log(Bundle.unused); // 0

Notas TypeScript do GoalKicker.com para Profissionais 51

Machine Translated by Google

Capítulo 16: Publicar arquivos de definição TypeScript

Seção 16.1: Incluir arquivo de definição com biblioteca no npm

Adicione digitações ao seu package.json

{
...
"typings": "caminho/arquivo.d.ts"
...
}

Agora, sempre que essa biblioteca for importada, o typescript carregará o arquivo de digitação

Notas TypeScript do GoalKicker.com para Profissionais 52

Machine Translated by Google

Capítulo 17: Usando TypeScript com webpack

Seção 17.1: webpack.config.js
instalar carregadores npm install --save-dev ts-loader source-map-loader

tsconfig.json

{
"compilerOptions":
{ "sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es5", "jsx":
"react" // se você quiser usar react jsx
}
}

module.exports =
{ entrada: "./src/index.ts",
saída:
{ nome do arquivo: "./dist/bundle.js",
},

// Habilita mapas de origem para depurar a saída do webpack.

devtool: "mapa de origem",

resolver: {
// Adicionar '.ts' e '.tsx' como extensões resolvíveis. extensões:
["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
},

module:
{ loaders: [ //
Todos os arquivos com extensão '.ts' ou '.tsx' serão gerenciados por 'ts-loader'. {teste: /\.tsx?$/,
carregador: "ts-loader"}
],

preLoaders: [ //
Todos os arquivos '.js' de saída terão quaisquer mapas de origem reprocessados pelo 'source-map-loader'.
{teste: /\.js$/, carregador: "source-map-loader"}
]

}, /*****************************
*Caso queira use react*
****************************/

// Ao importar um módulo cujo caminho corresponda a um dos seguintes, apenas // assuma

que existe uma variável global correspondente e use-a.
// Isso é importante porque nos permite evitar agrupar todas as nossas // dependências, o
que permite que os navegadores armazenem essas bibliotecas em cache entre as compilações. //
externals: { //
"react": "React", "react-dom":
"ReactDOM"
// // },
};

Notas TypeScript do GoalKicker.com para Profissionais 53

Machine Translated by Google

Capítulo 18: Mixins

Parâmetro Descrição
derivadoCtor A classe que você deseja usar como a classe de composição
baseCtors Um array de classes a serem adicionadas à classe de composição

Seção 18.1: Exemplo de Mixins

Para criar mixins, basta declarar classes leves que podem ser usadas como "comportamentos".

class Voa { fly()

{ alert('É
um pássaro? É um avião?');
}
}

class Climbs
{ escalar ()
{ alert ('Meu sentido de aranha está formigando.');
}
}

class À prova de balas

{ deflect() {
alert('Minhas asas são um escudo de aço.');
}
}

Você pode aplicar esses comportamentos a uma classe de composição:

class BeetleGuy implementa Subidas, Bulletproof { escalar: () => void;

desviar: () => void;

} applyMixins (BeetleGuy, [Climbs, Bulletproof]);

A função applyMixins é necessária para fazer o trabalho de composição.

function applyMixins(derivedCtor: any, baseCtors: any[]) {

baseCtors.forEach(baseCtors => {
Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
if (nome !== 'construtor') {
derivadoCtor.prototype[nome] = baseCtor.prototype[nome];
}
});
});
}

Notas TypeScript do GoalKicker.com para Profissionais 54

Machine Translated by Google

Capítulo 19: Como usar uma biblioteca

JavaScript sem um arquivo de definição de tipo
Embora algumas bibliotecas JavaScript existentes tenham arquivos de definição de tipo, há muitos que não.

O TypeScript oferece alguns padrões para lidar com declarações ausentes.

Seção 19.1: Tornar um módulo que exporta um padrão qualquer

Para projetos mais complicados, ou em casos onde você pretende digitar gradualmente uma dependência, pode ser mais simples criar um módulo.

Usando JQuery (embora tenha digitações disponíveis) como um exemplo:

// coloque em jquery.d.ts
declare let $: any;
padrão de exportação $;

E então, em qualquer arquivo do seu projeto, você pode importar esta definição com:

// algum outro arquivo .ts

importa $ de "jquery";

Após esta importação, $ será digitado como qualquer.

Se a biblioteca tiver várias variáveis de nível superior, exporte e importe por nome:

// coloque em jquery.d.ts
declare módulo "jquery" { let $:
any; deixe
jQuery: qualquer;

exportar { $ };
exportar { jQuery };
}

Você pode então importar e usar os dois nomes:

// algum outro arquivo .ts

importa {$, jQuery} de "jquery";

$.fazerCoisa();
jQuery.doOutraCoisa();

Seção 19.2: Declarar qualquer

Às vezes é mais fácil apenas declarar um global do tipo any, especialmente em projetos simples.

Se o jQuery não tivesse declarações de tipo (tem), você poderia colocar

declarar var $: qualquer;

Agora qualquer uso de $ será digitado any.

Notas TypeScript do GoalKicker.com para Profissionais 55

Machine Translated by Google

Seção 19.3: Use um módulo de ambiente

Se você deseja apenas indicar a intenção de uma importação (para não declarar um global), mas não deseja se preocupar
com definições explícitas, pode importar um módulo de ambiente.

// em um arquivo de declarações (como declares.d.ts) declara

o módulo "jquery"; // observe que não há exportações definidas

Você pode então importar do módulo ambiente.

// algum outro arquivo .ts

importa {$, jQuery} de "jquery";

Qualquer coisa importada do módulo declarado (como $ e jQuery) acima será do tipo any

Notas TypeScript do GoalKicker.com para Profissionais 56

Machine Translated by Google

Capítulo 20: TypeScript instalando o typescript e

executando o compilador typescript tsc

Como instalar o TypeScript e executar o compilador TypeScript em um arquivo .ts da linha de comando.

Seção 20.1: Etapas

Instalando o TypeScript e executando o compilador typescript.

Para instalar o Compilador TypeScript

npm install -g digitado

Para verificar com a versão datilografada

tsc -v

Baixe o Visual Studio Code para Linux/Windows

Link de download do código visual

1. Abra o Visual Studio Code 2.

Abra a mesma pasta onde você instalou o compilador TypeScript 3. Adicione o
arquivo clicando no ícone de adição no painel esquerdo 4.
Crie uma classe básica.

5. Compile seu arquivo de script de tipo e gere a saída.

Notas TypeScript do GoalKicker.com para Profissionais 57

Machine Translated by Google

Veja o resultado em javascript compilado do código typescript escrito.

Obrigado.

Notas TypeScript do GoalKicker.com para Profissionais 58

Machine Translated by Google

Capítulo 21: Configure o projeto typescript para compilar todos os

arquivos no typescript.
criando seu primeiro arquivo de configuração .tsconfig que dirá ao compilador TypeScript como tratar seus arquivos .ts

Seção 21.1: Configuração do arquivo de configuração do TypeScript

Digite o comando "tsc --init" e pressione enter.

Antes disso, precisamos compilar o arquivo ts com o comando "tsc app.ts" agora está tudo definido no arquivo de configuração abaixo
automaticamente.

Agora, você pode compilar todos os textos datilografados pelo comando "tsc". ele criará automaticamente o arquivo ".js" do seu arquivo
typescript.

Notas TypeScript do GoalKicker.com para Profissionais 59

Machine Translated by Google

Se você criar outro typescript e pressionar o comando "tsc" no prompt de comando ou o arquivo javascript do terminal será
criado automaticamente para o arquivo typescript.

Obrigado,

Notas TypeScript do GoalKicker.com para Profissionais 60

Machine Translated by Google

Capítulo 22: Integração com ferramentas de construção

Seção 22.1: Browserify

Instalar

npm instalar tsify

Usando a interface de linha de comando

browserify main.ts -p [ tsify --noImplicitAny ] > bundle.js

Usando a
API var browserify = require("browserify"); var tsify
= require("tsify");

browserify() .add("main.ts") .plugin("tsify", { noImplicitAny:

true }) .bundle() .pipe(process.stdout);

Mais detalhes: smrq/tsify

Seção 22.2: Webpack

Instalar

npm install ts-loader --save-dev

Webpack básico
webpack.config.js 2.x, 3.x
module.exports =
{ resolver: {
extensões: ['.ts', '.tsx', '.js']
},
módulo:
{ regras:
[{
// Configure ts-loader para arquivos .ts/.tsx e exclua qualquer importação de node_modules. teste: /\.tsx?
$/, carregadores: ['ts-
loader'], exclua: /node_modules/

}
]
},
entry: [ //
Definir index.tsx como ponto de entrada do aplicativo. './
index.tsx'
],
saída:
{ nome do arquivo: "bundle.js"
}
};

webpack 1.x
module.exports =
{ entrada: "./src/index.tsx", saída:
{ nome do
arquivo: "bundle.js"

Notas TypeScript do GoalKicker.com para Profissionais 61

Machine Translated by Google

},
resolva: {
// Adicionar '.ts' e '.tsx' como uma extensão resolvível.
extensões: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
},
module:
{ loaders: [ //
todos os arquivos com extensão '.ts' ou '.tsx' serão manipulados por 'ts-loader' { test: / \.ts(x)?$/,
loader: " ts-loader", exclua: /node_modules/ }
]
}
}

Veja mais detalhes sobre o ts-loader aqui.

Alternativas:

incrível-typescript-loader

Seção 22.3: Grunhido

Instalar

npm instalar grunhido-ts

Básico Gruntfile.js
module.exports = function(grunt)
{ grunt.initConfig({ ts:

{ default : {
src: ["**/*.ts", "!node_modules/**/*.ts"]
}
}
});
grunt.loadNpmTasks("grunt-ts");
grunt.registerTask("padrão", ["ts"]);
};

Mais detalhes: TypeStrong/grunt-ts

Seção 22.4: Gulp

Instalar

npm install gulp-typescript

Basic gulpfile.js
var gulp = require("gulp"); var ts =
require("gulp-typescript");

gulp.task("padrão", função () {
var tsResult = gulp.src("src/*.ts") .pipe(ts({

noImplicitAny: true, out:

"output.js"
}));
return tsResult.js.pipe(gulp.dest("construído/local"));
});
gulpfile.js usando um tsconfig.json existente
var gole = require("gole");

Notas TypeScript do GoalKicker.com para Profissionais 62

Machine Translated by Google

var ts = require("gulp-typescript");

var tsProject = ts.createProject('tsconfig.json', { noImplicitAny: true //

Você pode adicionar e substituir parâmetros aqui
});

gulp.task("default", function () { var tsResult

= tsProject.src() .pipe(tsProject()); return

tsResult.js.pipe(gulp.dest('release'));
});

Mais detalhes: ivogabe/gulp-typescript

Seção 22.5: MSBuild

Atualize o arquivo de projeto para incluir os arquivos Microsoft.TypeScript.Default.props (na parte superior) e Microsoft.TypeScript.targets (na parte

inferior) instalados localmente :

<?xml version="1.0" encoding="utf-8"?> <Project

ToolsVersion="4.0" DefaultTargets="Build" xmlns="http://
schemas.microsoft.com/developer/msbuild/2003"> < !-- Incluir adereços padrão
na parte inferior --> <Importar

Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Micr osoft.TypeScript.Default.props"

Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeS
cript\Microsoft.TypeScript.Default.props')" / >

<!-- Configurações do TypeScript vão aqui -->

<PropertyGroup Condition="'$(Configuration)' == 'Debug'">
<TypeScriptRemoveComments>false</TypeScriptRemoveComments>
<TypeScriptSourceMap>true</TypeScriptSourceMap>
</PropertyGroup>
<PropertyGroup Condition="'$(Configuration)' == 'Liberar'">
<TypeScriptRemoveComments>true</TypeScriptRemoveComments>
<TypeScriptSourceMap>falso</TypeScriptSourceMap>
</PropertyGroup>

<!-- Incluir destinos padrão na parte inferior --> <Importar

Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Micr osoft.TypeScript.targets"

Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeS cript\Microsoft.TypeScript.targets')" /
> </Project>

Mais detalhes sobre como definir as opções do compilador do MSBuild: Configurando opções do compilador em projetos do MSBuild

Seção 22.6: NuGet

Clique com o botão direito do mouse -> Gerenciar

pacotes NuGet Pesquisar por Microsoft.TypeScript.MSBuild
Hit Install

Quando a instalação estiver concluída, reconstrua!

Notas TypeScript do GoalKicker.com para Profissionais 63

Machine Translated by Google

Mais detalhes podem ser encontrados na caixa de diálogo Gerenciador de pacotes e usando compilações noturnas com NuGet

Seção 22.7: Instalar e configurar webpack + carregadores

Instalação

npm install -D webpack typescript ts-loader

webpack.config.js

module.exports =
{ entrada:
{ app: ['./src/'], },

saída:
{ path: __dirname,
filename: './dist/[name].js', }, resolver:

{ extensions:
[ '', '.js', '.ts'], }, módulo: { carregadores:

[{ teste: /
\.ts(x)$/,
carregadores: ['ts-loader'], exclua: /node_modules/ }],

} };

Notas TypeScript do GoalKicker.com para Profissionais 64

Machine Translated by Google

Capítulo 23: Usando TypeScript com

RequireJS
RequireJS é um arquivo JavaScript e carregador de módulo. Ele é otimizado para uso no navegador, mas pode ser usado em
outros ambientes JavaScript, como Rhino e Node. Usar um carregador de script modular como o RequireJS melhorará a velocidade
e a qualidade do seu código.

O uso de TypeScript com RequireJS requer a configuração de tsconfig.json e a inclusão de um snippet em qualquer arquivo HTML.
O compilador traduzirá as importações da sintaxe do TypeScript para o formato RequireJS.

Seção 23.1: Exemplo de HTML usando RequireJS CDN para incluir

um arquivo TypeScript já compilado
<body onload="__init();">
...
<script src="http://requirejs.org/docs/release/2.3.2/comments/require.js"></script> <script> function __init()

{ require(["view/index.js" ]);

} </script>
</body>

Seção 23.2: exemplo de tsconfig.json para compilar para exibir a pasta

usando o estilo de importação RequireJS
{
"module": "amd", // Usando o gerador de código do módulo AMD que funciona com o RequireJS
"rootDir": "./src", // Altere para sua pasta de origem "outDir": "./view",

...
}

Notas TypeScript do GoalKicker.com para Profissionais 65

Machine Translated by Google

Capítulo 24: TypeScript com AngularJS

Nome Description
controllerAs é um nome alternativo, ao qual variáveis ou funções podem ser atribuídas. @ver:
https://docs.angularjs.org/guide/directive Lista de

$injetar Injeção de Dependência, ela é resolvida por angular e passando como argumento para funções
construtoras.

Seção 24.1: Diretiva

interface IMyDirectiveController { // especifica

métodos e propriedades do controlador exposto aqui getUrl(): string;

class MyDirectiveController implementa IMyDirectiveController {

// Injeções internas, por cada diretiva public static

$inject = ["$location", "toaster"];

constructor(private $location: ng.ILocationService, private toaster: any) { // $location e toaster agora

são propriedades do controlador
}

public getUrl(): string {

return this.$location.url(); // utiliza $location para recuperar a URL
}
}

/*
* Injeções externas, para controle executado uma vez.
* Por exemplo, temos todos os modelos em um valor e queremos usá-lo. */

função de exportação myDirective(templatesUrl: ITemplates): ng.IDirective {

return
{ controller: MyDirectiveController,
controllerAs: "vm",

link: (escopo: ng.IScope,

elemento: ng.IAugmentedJQuery,
atributos: ng.IAttributes, controlador:
IMyDirectiveController): void => {

deixe url = controller.getUrl();

element.text(" URL atual: + url); "

},

substituir:
verdadeiro, exigir:
"ngModel",
restringir: "A", templateUrl: templatesUrl.myDirective,
};
}

myDirective.$inject =
[ Templates.prototype.slug,
];

Notas TypeScript do GoalKicker.com para Profissionais 66

Machine Translated by Google

// O uso de nomenclatura slug nos projetos simplifica a alteração do nome da diretiva

myDirective.prototype.slug = "myDirective";

// Você pode colocar isso em algum arquivo bootstrap, ou tê-los no mesmo arquivo
angular.module("myApp").
diretiva(minhaDiretiva.prototype.slug, minhaDiretiva);

Seção 24.2: Exemplo simples

função de exportação myDirective($location: ng.ILocationService): ng.IDirective {
retornar {

link: (escopo: ng. IScope,

elemento: ng. IAugmentedJQuery,
atributos: ng. IAttributes): void => {

element.text(" URL atual: " + $localização.url());

},

substituir:
verdadeiro, exigir:
"ngModel",
restringir: "A", templateUrl: templatesUrl.myDirective,
};
}

// O uso de nomenclatura slug nos projetos simplifica a alteração do nome da diretiva

myDirective.prototype.slug = "myDirective";

// Você pode colocar isso em algum arquivo bootstrap, ou tê-los no mesmo arquivo
angular.module("myApp").
diretiva(minhaDiretiva.prototype.slug,
[ Templates.prototype.slug,
minhaDiretiva
]);

Seção 24.3: Componente

Para uma transição mais fácil para o Angular 2, é recomendável usar o Componente, disponível desde o Angular 1.5.8

myModule.ts

importar { MyModuleComponent } de "./components/myModuleComponent"; importar

{ MyModuleService } de "./services/MyModuleService";

angular .module("myModule",
[]) .component("myModuleComponent", new
MyModuleComponent()) .service("myModuleService", MyModuleService);

componentes/meuModuleComponent.ts

importar IComponentOptions = angular.IComponentOptions; importar

IControllerConstructor = angular.IControllerConstructor; import Injectable =
angular.Injectable; importar { MyModuleController }
de "../controller/MyModuleController";

classe de exportação MyModuleComponent implementa IComponentOptions {

Notas TypeScript do GoalKicker.com para Profissionais 67

Machine Translated by Google

public templateUrl: string = "./app/myModule/templates/myComponentTemplate.html"; controlador público:

Injectable<IControllerConstructor> = MyModuleController; vinculações públicas: {[boundProperty:
string]: string} = {};
}

templates/myModuleComponent.html

<div class="my-module-component">
{{$ctrl.someContent}} </
div>

controller/MyModuleController.ts

importar IController = angular.IController; importar

{ MyModuleService } de "../services/MyModuleService";

classe de exportação MyModuleController implementa IController { public

static readonly $inject: string[] = ["$element", "myModuleService"]; public someContent: string =
"Olá, mundo";

constructor($element: JQuery, private myModuleService: MyModuleService)

{ console.log("element", $element);
}

public doSomething(): void { //

implementação..
}
}

services/MyModuleService.ts

export class MyModuleService { public

static readonly $inject: string[] = [];

construtor() { }

public doSomething(): void { // faça

alguma coisa
}
}

em algum lugar.html

<my-module-component></my-module-component>

Notas TypeScript do GoalKicker.com para Profissionais 68

Machine Translated by Google

Capítulo 25: TypeScript com SystemJS

Seção 25.1: Hello World no navegador com SystemJS
Instalar systemjs e plugin-typescript

npm install systemjs npm

install plugin-typescript

NOTA: isso instalará o compilador typescript 2.0.0 que ainda não foi lançado.

Para TypeScript 1.8 você deve usar o plugin-typescript 4.0.16

Criar arquivo hello.ts

função de exportação saudação (pessoa: String)

{ return 'Olá, ' + pessoa;
}

Criar arquivo hello.html

<!doctype html>
<html>
<head>
<title>Olá mundo em TypeScript</title> <script
src="node_modules/systemjs/dist/system.src.js"></script>

<script src="config.js"></script>

<script>
window.addEventListener('load', function() {
System.import('./hello.ts').then(function(hello) {
document.body.innerHTML = hello.greeter('Mundo');
});
});
</script>

</head>
<body>
</body>
</html>

Criar config.js - arquivo de configuração SystemJS

System.config({ pacotes: {
"plugin-typescript": { "main":
"plugin.js"
},
"typescript":
{ "main": "lib/typescript.js", "meta":
{ "lib/
typescript.js": { "exports":
"ts"
}
}
}

Notas TypeScript do GoalKicker.com para Profissionais 69

Machine Translated by Google

},
map:
{ "plugin-typescript": "node_modules/plugin-typescript/lib/",
/* NOTA: isto é para npm 3 (nó 6) */ /* para npm
2, o caminho do typescript será */ /* node_modules/
plugin-typescript/node_modules/typescript */ "typescript": "node_modules/
typescript/"
},
transpiler: "plugin-typescript", meta: { "./
hello.ts":
{ format: "esm",
loader: "plugin-
typescript"
}
},
typescriptOptions:
{ typeCheck: 'estrito'
}
});

NOTA: se você não quiser verificar o tipo, remova o carregador: "plugin-typescript" e typescriptOptions de config.js. Observe
também que ele nunca verificará o código javascript, em particular o código na tag <script> no exemplo html.

Teste-o

npm install live-server ./

node_modules/.bin/live-server --open=hello.html

Construa para produção

npm install systemjs-builder

Criar arquivo build.js :

var Builder = require('systemjs-builder'); var construtor

= new Construtor(); builder.loadConfig('./
config.js').then(function() {
builder.bundle('./hello.ts', './hello.js', {minify: true});
});

construir hello.js de hello.ts

node build.js

Use na produção

Basta carregar hello.js com uma tag de script antes do primeiro uso

arquivo hello-produção.html :

<!doctype html>
<html>
<head>
<title>Olá mundo em TypeScript</title> <script
src="node_modules/systemjs/dist/system.src.js"></script>

<script src="config.js"></script> <script

src="hello.js"></script>

Notas TypeScript do GoalKicker.com para Profissionais 70

Machine Translated by Google

<script>
window.addEventListener('load', function() {
System.import('./hello.ts').then(function(hello) {
document.body.innerHTML = hello.greeter('Mundo');
});
});
</script>

</head>
<body>
</body>
</html>

Notas TypeScript do GoalKicker.com para Profissionais 71

Machine Translated by Google

Capítulo 26: Usando TypeScript com React

(JS e nativo)
Seção 26.1: Componente ReactJS escrito em TypeScript
Você pode usar os componentes do ReactJS facilmente no TypeScript. Basta renomear a extensão do arquivo 'jsx' para 'tsx':

// helloMessage.tsx: var
HelloMessage = React.createClass({
renderizar: function() {
return <div>Olá {this.props.name}</div>;

} });

ReactDOM.render(<HelloMessage name="John" />, mountNode);

Mas, para fazer uso total do recurso principal do TypeScript (verificação estática de tipo), você deve fazer algumas coisas:

1) converter React.createClass para uma classe ES6:

// helloMessage.tsx:
class HelloMessage extends React.Component { render()
{ return
<div>Hello {this.props.name}</div>;
}
}

ReactDOM.render(<HelloMessage name="John" />, mountNode);

Para mais informações sobre a conversão para ES6, veja aqui

2) Adicione as interfaces Props e State:

interface Props
{ nome: string;
opcionalParam?:número;
}

estado da interface {
// vazio no nosso caso
}

class HelloMessage extends React.Component<Props, State> {

render()
{ return <div>Olá {this.props.name}</div>;
}
}
// O TypeScript permitirá que você crie sem o parâmetro opcional
ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode); // Mas
verifica se você passou um parâmetro opcional do tipo errado ReactDOM.render(<HelloMessage
name="Sebastian" opcionalParam='foo' />, mountNode);

Agora o TypeScript exibirá um erro se o programador esquecer de passar props. Ou se tentar passar props que não estão definidos na interface.

Notas TypeScript do GoalKicker.com para Profissionais 72

Machine Translated by Google

Seção 26.2: TypeScript, react e webpack

Instalando typescript, digitações e webpack globalmente

npm install -g typescript typescript webpack

Instalando carregadores e vinculando typescript

npm install --save-dev ts-loader source-map-loader npm link typescript

A vinculação do TypeScript permite que o ts-loader use sua instalação global do TypeScript em vez de precisar de um
documento typescript de cópia local separado

instalação de arquivos .d.ts com typescript 2.x

npm i @types/ react --save-dev npm i

@types/react-dom --save-dev

instalação de arquivos .d.ts com typescript 1.x

instalação de digitação --global --save dt~react

instalação de digitação --global --save dt~react-dom

arquivo de configuração tsconfig.json

{
"compilerOptions":
{ "sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es5", "jsx":
"react"
}
}

arquivo de configuração webpack.config.js

module.exports =
{ entry: "<path to entry point>",// por exemplo ./ src/ helloMessage.tsx output: { filename:
"<path to
bundle file>", // por exemplo ./ dist/ bundle .js
},

// Habilita mapas de origem para depurar a saída do webpack.

devtool: "mapa de origem",

resolver: {
// Adicionar '.ts' e '.tsx' como extensões resolvíveis. extensões:
["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
},

module:
{ loaders: [ //
Todos os arquivos com extensão '.ts' ou '.tsx' serão gerenciados por 'ts-loader'. {teste: /\.tsx?$/,
carregador: "ts-loader"}
],

Notas TypeScript do GoalKicker.com para Profissionais 73

Machine Translated by Google

pré-carregadores: [
// Todos os arquivos '.js' de saída terão quaisquer mapas de origem reprocessados pelo 'source-map-loader'.
{teste: /\.js$/, carregador: "source-map-loader"}
]
},

// Ao importar um módulo cujo caminho corresponda a um dos seguintes, apenas // assuma

que existe uma variável global correspondente e use-a.
// Isso é importante porque nos permite evitar agrupar todas as nossas // dependências,
o que permite que os navegadores armazenem essas bibliotecas em cache entre as compilações.
externals:
{ "react": "React",
"react-dom": "ReactDOM"
},
};

finalmente execute webpack ou webpack -w (para o modo de observação)

Nota: React e ReactDOM são marcados como externos

Notas TypeScript do GoalKicker.com para Profissionais 74

Machine Translated by Google

Capítulo 27: TSLint - garantindo qualidade e

consistência do código
O TSLint executa a análise estática do código e detecta erros e possíveis problemas no código.

Seção 27.1: Configuração para menos erros de programação

Este exemplo tslint.json contém um conjunto de configurações para impor mais digitações, detectar erros comuns ou outras construções confusas que são

propensas a produzir bugs e seguir mais as Diretrizes de Codificação para Colaboradores TypeScript.

Para impor essas regras, inclua tslint em seu processo de compilação e verifique seu código antes de compilá-lo com tsc.

{
"rules": { //
TypeScript Specific "member-
access": true, // Requer declarações de visibilidade explícitas para membros de classe. "no-any": true, //
Proíbe o uso de qualquer como uma declaração de tipo.
// Funcionalidade
"label-position": true, // Só permite etiquetas em locais sensatos. "no-bitwise": true, //
Não permite operadores bit a bit. "no-eval": true, // Não permite
chamadas de função eval. "no-null-keyword": true, // Não permite o uso
da palavra-chave null literal. "no-unsafe-finally": true, // Não permite instruções de fluxo
de controle, como return, continue,
break e joga blocos de finalização.
"no-var-keyword": true, // Não permite o uso da palavra-chave var. "radix":
true, // Requer que o parâmetro radix seja especificado ao chamar parseInt. "triple-equals": true, // Requer
=== e !== no lugar de == e !=. "use-isnan": true, // Impõe o uso da função isNaN() para
verificar referências NaN
de uma comparação com a constante NaN.
// Estilo
"class-name": true, // Aplica nomes de classe e interface PascalCased. "interface-name":
[ true, "never-prefix" ], // Requer que nomes de interface comecem com maiúscula
'EU'

"no-angle-bracket-type-assertion": true, // Requer o uso de as Type para declarações de tipo em vez de <Type>.

"one-variable-per-declaration": true, // Não permite várias definições de variáveis na mesma instrução de declaração.
"quotemark": [ true, "double",
"avoid-escape" ], // Requer aspas duplas para strings literais. "ponto e vírgula": [ true, "always" ], // Impõe o uso consistente
de ponto e vírgula no final de cada
declaração.

"variable-name": [true, "ban-keywords", "check-format", "allow-leading-underscore"] // Verifica

nomes de variáveis para vários erros. Não permite o uso de determinadas palavras-chave do TypeScript (any, Number,
number, String, string, Boolean, boolean, undefined) como variável ou parâmetro. Permite apenas nomes de variáveis camelCased
ou UPPER_CASED. Permite sublinhados no início (só tem efeito se for especificado "verificar formato" ).

}
}

Seção 27.2: Instalação e configuração

Para instalar tslint comando de execução

npm install -g tslint

O Tslint é configurado por meio do arquivo tslint.json. Para inicializar a configuração padrão, execute o comando

Notas TypeScript do GoalKicker.com para Profissionais 75

Machine Translated by Google

tslint -- calor

Para verificar o arquivo quanto a possíveis erros no comando de execução do arquivo

nome do arquivo tslint.ts

Seção 27.3: Conjuntos de Regras TSLint

tslint-microsoft-contrib
tslint-eslint-regras

codelyzer

O gerador Yeoman suporta todas essas predefinições e também pode ser estendido:

gerador-tslint

Seção 27.4: Configuração básica do tslint.json

Esta é uma configuração básica do tslint.json que

impede o uso de
qualquer requer chaves para instruções if/else/for/do/while requer
aspas duplas (") para serem usadas para strings

{
"rules": { "no-
any": verdadeiro,
"curly": verdadeiro,
"aspas": [verdadeiro, "duplo"]
}
}

Seção 27.5: Usando um conjunto de regras predefinido como padrão

O tslint pode estender um conjunto de regras existente e é fornecido com os padrões tslint:recommended e tslint:latest.

tslint:recommended é um conjunto de regras estável e um tanto obstinado que encorajamos para a programação geral do
TypeScript. Essa configuração segue semver, portanto, não haverá alterações importantes em versões secundárias ou de patch.

tslint:latest estende tslint:recommended e é continuamente atualizado para incluir a configuração das regras mais recentes em cada
versão do TSLint. O uso dessa configuração pode introduzir alterações importantes em versões secundárias, pois novas
regras são habilitadas, o que causa falhas de lint em seu código. Quando TSLint atingir um aumento de versão principal,
tslint:recommended será atualizado para ser idêntico a tslint:latest.

Documentos e código-fonte do conjunto de regras predefinido

Assim, pode-se simplesmente usar:

{
"estende": "tslint:recomendado"
}

Notas TypeScript do GoalKicker.com para Profissionais 76

Machine Translated by Google

para ter uma configuração inicial sensata.

Pode-se então sobrescrever as regras dessa predefinição por meio de regras, por exemplo, para desenvolvedores de nós, fazia sentido definir no-console
para falso:

{
"extends": "tslint:recommended", "rules":
{ "no-
console": false
}
}

Notas TypeScript do GoalKicker.com para Profissionais 77

Machine Translated by Google

Capítulo 28: tsconfig.json

Seção 28.1: Criar projeto TypeScript com tsconfig.json
A presença de um arquivo tsconfig.json indica que o diretório atual é a raiz de um projeto habilitado para TypeScript.

A inicialização de um projeto TypeScript, ou melhor colocar o arquivo tsconfig.json, pode ser feita através do seguinte comando:

tsc --init

A partir do TypeScript v2.3.0 e superior, isso criará o seguinte tsconfig.json por padrão:

{
"opções do compilador": {
/ * Opções básicas */
"target": "es5", / * Especifique a versão de destino do ECMAScript: 'ES3' (padrão),
'ES5', 'ES2015', 'ES2016', 'ES2017' ou 'ESNEXT'. */
"module": "commonjs", 'system', / * Especifique a geração do código do módulo: 'commonjs', 'amd',
'umd' ou 'es2015'. */ // "lib": [], compilação:
*/ // "allowJs": / * Especifica os arquivos de biblioteca a serem incluídos no
true, // "checkJs": true, //
"jsx": "preservar", / * Permite que arquivos javascript sejam compilados. */ / * Relatar
erros em arquivos .js. */ / * Especifique a geração
de código JSX: 'preservar', 'reagir
nativo', ou 'reagir'. */
// "declaration": true, // / * Gera o arquivo '.d.ts' correspondente. */ / * Gera o arquivo
"sourceMap": true, // "outFile": '.map' correspondente. */ / * Concatena e emite a saída para
"./", // "outDir": "./", // um único arquivo. */ / * Redireciona a estrutura de saída para o diretório.
"rootDir": "./", controle a */ / * Especifique o diretório raiz dos arquivos de entrada. Use para
estrutura do diretório de
saída com --outDir. */ / * Não emite comentários para a saída. */ / * Não emite
// "removeComments": true, // saídas. */ / * Importar auxiliares de emissão de 'tslib'.
"noEmit": true, // */ / * Forneça suporte completo para
"importHelpers": true, // iteráveis em 'for-of', spread e destructuring ao direcionar
"downlevelIteration": true, 'ES5' ou 'ES3'. */ // "isolatedModules": true, / * Transpila cada arquivo
como um módulo separado (semelhante a 'ts.transpileModule'). */

/ * Opções de verificação estrita de tipo */ "strict":

true // "noImplicitAny": / * Habilita todas as opções de verificação de tipo estritas. */
true, tipo 'qualquer' implícito. */ // / * Gera erro em expressões e declarações com um
"strictNullChecks": verdadeiro, //
"noImplicitThis": verdadeiro, 'qualquer' / * Ativar verificações nulas estritas. */ / * Gera
tipo. */ // "alwaysStrict": verdadeiro, erro em expressões 'this' com um implícito
arquivo de origem.
*/ / * Analisa em modo estrito e emite "usar estrito" para cada

/ * Verificações Adicionais */ //
"noUnusedLocals": true, // / * Relatar erros em locais não utilizados. */ / * Relata
"noUnusedParameters": true, // erros em parâmetros não utilizados. */ / * Relatar erro quando
"noImplicitReturns": true, retorna um valor. nem todos os caminhos de código na função
*/ //
"noFallthroughCasesInSwitch": true, declaração. */ / * Reportar erros para casos de fallthrough no switch

/ * Opções de resolução do módulo */ //

"moduleResolution": "node", / * Especifique a estratégia de resolução do módulo: 'node' (Node.js)

Notas TypeScript do GoalKicker.com para Profissionais 78

Machine Translated by Google

ou 'clássico' (TypeScript pré-1.6). */ // "baseUrl": "./",

/ * Diretório base para resolver nomes de módulo não absolutos.
*/
// "caminhos": {}, / * Uma série de entradas que mapeiam novamente as importações para pesquisa
locais relativos ao 'baseUrl'. */
// "rootDirs": [], representa / * Lista de pastas raiz cujo conteúdo combinado
a estrutura do projeto em tempo de execução. */ // "typeRoots": [], // "tipos": [],
compilação. */ // / * Lista de pastas para incluir as definições de tipo. */ / * Arquivos de declaração
de tipo a serem incluídos

"allowSyntheticDefaultImports": true, / * Permitir importações padrão de módulos sem padrão

exportar. Isso não afeta a emissão do código, apenas a verificação de tipo. */

/ * Opções do mapa de origem */ //

"sourceRoot": "./", / * Especifica o local onde o depurador deve localizar
Arquivos TypeScript em vez de locais de origem. */
// "mapRoot": "./", arquivos / * Especifica o local onde o depurador deve localizar
de mapa em vez de locais gerados. */ // "inlineSourceMap":
verdadeiro, / * Emite um único arquivo com mapas de origem em vez de
ter um arquivo separado. */
// "inlineSources": verdadeiro, / * Emite a fonte junto com os mapas de origem em um único arquivo; requer
'--inlineSourceMap' ou '--sourceMap' para ser definido. */

/ * Opções experimentais */ //
"experimentalDecorators": true, // / * Habilita suporte experimental para decoradores ES7. */ / * Habilita suporte
"emitDecoratorMetadata": true, metadados para experimental para emissão de tipo
decoradores. */
}
}

A maioria, se não todas, as opções são geradas automaticamente com apenas as necessidades básicas deixadas sem comentários.

Versões mais antigas do TypeScript, como por exemplo v2.0.xe inferior, gerariam um tsconfig.json como este:

{
"compilerOptions": { "module":
"commonjs", "target": "es5",
"noImplicitAny": falso,
"sourceMap": falso

}
}

Seção 28.2: Configuração para menos erros de programação

Existem configurações muito boas para forçar digitações e obter erros mais úteis que não são ativados por padrão.

{
"opções do compilador": {

"alwaysStrict": true, // Analisa em modo estrito e emite "usar estrito" para cada arquivo de origem.

// Se você tiver maiúsculas e minúsculas incorretas em arquivos referenciados, por exemplo, o nome do arquivo é Global.ts e você tem um ///
<reference path="global.ts" / > para fazer referência a este arquivo, isso pode causar erros inesperados.
Visite: http:// stackoverflow.com/ questions/ 36628612/ typescript-transpiler-casing-issue
"forceConsistentCasingInFileNames": true, // Não permite referências inconsistentes ao mesmo arquivo.

// "allowUnreachableCode": false, // Não relatar erros em código inacessível. (Padrão: False) // "allowUnusedLabels": false, // Não relatar
erros em rótulos não utilizados. (Padrão: Falso)

Notas TypeScript do GoalKicker.com para Profissionais 79

Machine Translated by Google

"noFallthroughCasesInSwitch": true, // Relata erros para casos de falha na instrução switch. "noImplicitReturns": true, //
Relata erro quando nem todos os caminhos de código na função retornam um valor.

"noUnusedParameters": true, // Relata erros em parâmetros não utilizados.

"noUnusedLocals": true, // Relata erros em locais não utilizados.

"noImplicitAny": true, // Gera erro em expressões e declarações com um tipo "qualquer" implícito. "noImplicitThis":

true, // Aumenta o erro nestas expressões com um tipo "qualquer" implícito.

"strictNullChecks": true, // Os valores null e undefined não estão no domínio de cada tipo
e são apenas atribuíveis a si mesmos e a qualquer um.

// Para aplicar essas regras, adicione esta configuração.

"noEmitOnError": verdadeiro // Não emite saídas se algum erro for relatado.
}
}

Insuficiente? Se você é um hard coder e deseja mais, pode estar interessado em verificar seus arquivos TypeScript com tslint antes de compilá-
los com tsc. Verifique como configurar o tslint para um código ainda mais rígido.

Seção 28.3: compileOnSave

Definir uma propriedade de nível superior compileOnSave indica ao IDE para gerar todos os arquivos para um determinado tsconfig.json
ao salvar.

{
"compileOnSave":
verdadeiro, "compilerOptions": {
...
},
"excluir": [
...
]
}

Esse recurso está disponível desde o TypeScript 1.8.4 em diante, mas precisa ser suportado diretamente pelos IDEs. Atualmente, exemplos
de IDEs suportados são:

Visual Studio 2015 com atualização 3

JetBrains WebStorm
Atom com Atom-typescript

Seção 28.4: Comentários

Um arquivo tsconfig.json pode conter comentários de linha e de bloco, usando as mesmas regras do ECMAScript.

// Comentário inicial {

"compilerOptions": { //este
é um comentário de linha
"module": "commonjs", //comentário de linha eol
"target" /*bloco inline*/ : "es5",
/ * Este é um
bloco
Comente */
}
}

Notas TypeScript do GoalKicker.com para Profissionais 80

Machine Translated by Google

/ * comentário final */

Seção 28.5: preserveConstEnums

TypeScript oferece suporte a enumeráveis constantes, declarados por meio de const enum.

Isso geralmente é apenas um açúcar de sintaxe, pois as enumerações constantes são embutidas no JavaScript compilado.

Por exemplo o seguinte código

const enum Tristate {

Verdadeiro,

Falso,
Desconhecido

var algo = Tristate.True;

compila para

var algo = 0;

Embora o desempenho se beneficie do inlining, você pode preferir manter os enums mesmo que constantes (ou seja: você pode desejar legibilidade no

código de desenvolvimento), para fazer isso, você deve definir em tsconfig.json a cláusula preserveConstEnums nas opções do compilador como true .

{
"opções do compilador": {
"preserveConstEnums" = verdadeiro,
...
},
"excluir": [
...
]
}

Dessa forma, o exemplo anterior seria compilado como qualquer outra enumeração, conforme mostrado no trecho a seguir.

var Tristate;
(função (Tristate) {
Tristate[Tristate["Verdadeiro"] = 0] = "Verdadeiro";
Tristate[Tristate["False"] = 1] = "Falso";
Tristate[Tristate["Desconhecido"] = 2] = "Desconhecido";
})(Tristate || (Tristate = {}));

var algo = Tristate.True

Notas TypeScript do GoalKicker.com para Profissionais 81

Machine Translated by Google

Capítulo 29: Depuração

Existem duas maneiras de executar e depurar o TypeScript:

Transpile para JavaScript, execute no nó e use mapeamentos para vincular de volta aos arquivos de origem do TypeScript

ou

Execute o TypeScript diretamente usando ts-node

Este artigo descreve as duas maneiras de usar o Visual Studio Code e WebStorm. Todos os exemplos presumem que seu arquivo principal seja
index.ts.

Seção 29.1: TypeScript com ts-node no WebStorm

Adicione este script ao seu package.json:

"start:idea": "ts-node %NODE_DEBUG_OPTION% --ignore false index.ts",

Clique com o botão direito no script e selecione Create 'test:idea'... e confirme com 'OK' para criar a configuração de depuração:

Notas TypeScript do GoalKicker.com para Profissionais 82

Machine Translated by Google

Inicie o depurador usando esta configuração:

Seção 29.2: TypeScript com ts-node no Visual Studio Code

Adicione ts-node ao seu projeto TypeScript:

npm i ts-node

Adicione um script ao seu package.json:

"start:debug": "ts-node --inspect=5858 --debug-brk --ignore false index.ts"

Notas TypeScript do GoalKicker.com para Profissionais 83

Machine Translated by Google

O launch.json precisa ser configurado para usar o tipo node2 e iniciar o npm executando o script start:debug :

{
"versão": "0.2.0",
"configurações": [ {

"type": "node2",
"request": "launch",
"name": "Launch Program",
"runtimeExecutable": "npm",
"windows":
{ "runtimeExecutable": "npm.cmd"
},
"runtimeArgs": [ "run-
script",
"start:debug"
],
"cwd": "${workspaceRoot}/server",
"outFiles": [],
"porta": 5858,
"sourceMaps": verdadeiro
}
]
}

Seção 29.3: JavaScript com SourceMaps no Visual Studio

Code
No conjunto tsconfig.json

"sourceMap": verdadeiro,

para gerar mapeamentos juntamente com arquivos js das fontes TypeScript usando o comando tsc .
o launch.json arquivo:

{
"versão": "0.2.0",
"configurações": [ {

"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceRoot}\\index.js", "cwd": "$
{workspaceRoot} ", "outFiles": [],
"sourceMaps":
verdadeiro
}
]
}

Isso inicia o nó com o arquivo index.js gerado (se seu arquivo principal for index.ts) e o depurador no Visual Studio Code, que para em
pontos de interrupção e resolve valores de variáveis em seu código TypeScript.

Seção 29.4: JavaScript com SourceMaps no WebStorm

Crie uma configuração de depuração do Node.js e use index.js como parâmetros do Node.

Notas TypeScript do GoalKicker.com para Profissionais 84

Machine Translated by Google

Notas TypeScript do GoalKicker.com para Profissionais 85

Machine Translated by Google

Capítulo 30: Teste de unidade

Seção 30.1: fita
fita é uma estrutura de teste de JavaScript minimalista, que produz em conformidade com TAP marcação.

Para instalar a fita usando o comando npm run

npm install --save-dev tape @tipos/fita

Para usar fita com TypeScript, você precisa instalar ts-node como pacote global, para fazer isso execute o comando

npm install -g ts-node

Agora você está pronto para escrever seu primeiro teste

// math.test.ts
importa * como teste de "fita";

test("Teste matemático", (t) =>

{ t.equal(4, 2 + 2);
t.true(5 > 2 + 2);

tratar();
});

Para executar o comando de execução de teste

ts-node node_modules/tape/bin/tape math.test.ts

Na saída, você deve ver

TAP versão 13
# Teste de
matemática ok 1 deve ser
igual ok 2 deve ser verdadeiro

1..2
# testes 2 #
passa 2

# OK

Bom trabalho, você acabou de executar seu teste TypeScript.

Execute vários arquivos de teste

Você pode executar vários arquivos de teste de uma só vez usando curingas de caminho. Para executar todos os testes TypeScript no comando de execução do
diretório de testes

ts-node node_modules/tape/bin/tape tests/ **/ *.ts

Notas TypeScript do GoalKicker.com para Profissionais 86

Machine Translated by Google

Seção 30.2: is (ts-is)

brincadeira é uma estrutura de teste de JavaScript indolor do Facebook, com ts-jest pode ser usado para testar o código TypeScript.

Para instalar o jest usando o comando npm run

npm install --save-dev é @types/is ts-is typescript

Para facilitar o uso, instale jest como pacote global

npm install -g é

Para fazer o jest funcionar com o TypeScript, você precisa adicionar a configuração ao package.json

// pacote.json {

...
"é":
{ "transformar": {
".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js" }, "testRegex": "(/

__tests__/.*|\\.(test|spec))\\. (ts|tsx|js)$", "moduleFileExtensions": ["ts", "tsx", "js"]

}
}

Agora jest está pronto. Suponha que temos amostra fizz buz para testar

// fizzBuzz.ts
função de exportação fizzBuzz(n: número): string { let
output = ""; for (let i
= 1; i <= n; i++) { if (i % 5 && i % 3)
{ output += i + ' ';

} if (i % 3 === 0) { output
+= 'Fizz ';

} if (i % 5 === 0) { output
+= 'Buzz ';
}

} retorna a saída;
}

O teste de exemplo pode parecer

// FizzBuzz.test.ts ///
<tipos de referência="é" / >

importar {fizzBuzz} de "./fizzBuzz"; test("Teste

FizzBuzz", ()
=>{ expect(fizzBuzz(2)).toBe("1 2 ");
expect(fizzBuzz(3)).toBe("1 2 Fizz ");
});

Para executar o teste de execução

Notas TypeScript do GoalKicker.com para Profissionais 87

Machine Translated by Google

Na saída, você deve ver

PASS ./fizzBuzz.test.ts
ÿ Teste FizzBuzz (3ms)

Conjuntos de teste: 1 aprovado, 1 total

Testes: 1 aprovado, 1 total Instantâneos:
0 total Tempo: executou
todos 1,46s, estimado 2s
os conjuntos de teste.

Cobertura de código

jest oferece suporte à geração de relatórios de cobertura de código.

Para usar a cobertura de código com TypeScript, você precisa adicionar outra linha de configuração a package.json.

{
...
"é": {
...
"testResultsProcessor": "<rootDir>/node_modules/ts-jest/coverageprocessor.js"
}
}

Para executar testes com geração de relatório de cobertura, execute

é --cobertura

Se usado com nosso exemplo fizz buzz, você deve ver

PASS ./fizzBuzz.test.ts
ÿ Teste FizzBuzz (3ms)

-------------|----------|----------|----------|--- -------|----------------| Arquivo | % Stmts | % Filial | % Funções | %

Linhas |Linhas Descobertas | -------------|----------|----------|----------|--- -------|----------------| Todos os arquivos |
92.31 | 91,67 | | fizzBuzz.ts | 92.31 | 91,67 | 13 | -------------|----------|----------|----------|--- -------|----------------|
Conjuntos de teste: 1 aprovado, 1 total Testes: 87,5 1| aprovado, 1100 total| Snapshots: 0 tempo total: 1,857s
Executa todos os conjuntos de teste. 87,5 | 100 |

jest também criou a pasta coverage que contém o relatório de cobertura em vários formatos, incluindo um relatório
html amigável em coverage/lcov-report/index.html

Notas TypeScript do GoalKicker.com para Profissionais 88

Machine Translated by Google

Seção 30.3: alsaciano

alsaciano é uma estrutura de teste de unidade escrita em TypeScript. Ele permite o uso de casos de teste e produz resultados compatíveis com TAP marcação.

Para usá-lo, instale-o a partir do npm:

npm install alsatian --save-dev

Em seguida, configure um arquivo de teste:

import { Expect, Test, TestCase } de "alsatian"; importar

{ SomeModule } de "../src/some-module";

export SomeModuleTests {

@Test()
public statusShouldBeTrueByDefault() { let
instance = new SomeModule();

Expect(instance.status).toBe(true);
}

@Test("Nome deve ser nulo por padrão") public

nameShouldBeNullByDefault() { let instance =
new SomeModule();

Expect(instance.name).toBe(null);
}

@TestCase("primeiro nome")
@TestCase("maçãs")
public shouldSetNameCorrectly(nome: string) { let instance
= new SomeModule();

instância.setName(nome);

Expect(instância.nome).toBe(nome);
}

Para obter uma documentação completa, consulte o repositório GitHub da Alsácia.

Seção 30.4: plug-in imutável chai

Notas TypeScript do GoalKicker.com para Profissionais 89

Machine Translated by Google

1. Instale a partir de npm chai, chai-immutable e ts-node

npm install --save-dev chai chai-immutable ts-node

2. Instale tipos para mocha e chai

npm install --save-dev @types/ mocha @types/chai

3. Escreva um arquivo de teste simples:

importar {List, Set} de 'imutável'; importar *

como chai de 'chai'; importar * como
chaiImmutable de 'chai-immutable';

chai.use(chaiImmutable);

describe(' exemplo imutável chai', () => {

it('exemplo', () =>
{ expect(Set.of(1,2,3)).to.not.be.empty;

expect(Set.of(1,2,3)).to.include(2);
expect(Set.of(1,2,3)).to.include(5); }) })

4. Execute-o no console:

mocha --compilers ts:ts-node/register,tsx:ts-node/register 'test/**/*.spec.@(ts|tsx)'

Notas TypeScript do GoalKicker.com para Profissionais 90

Machine Translated by Google

Créditos
Muito obrigado a todas as pessoas da Stack Overflow Documentation que ajudaram a fornecer este conteúdo, mais alterações
podem ser enviadas para [email protected] para novos conteúdos a serem publicados ou atualizados

2426021684 Capítulos 1, 14 e 16
Os Babins Capítulo 9
Alec Hansen Capítulo 1
Alex Filatov Capítulos 22 e 27
Amêndoa Capítulo 14
Aminadav Capítulo 9
para Capítulo 9
artem Capítulos 9, 14 e 25
Blackus Capítulo 14
bnieland Capítulo 28
br4d Capítulo 6
BrunoLM Capítulos 1, 17 e 22
brutus Capítulo 14
ChanceM Capítulo 1
Cobus Kruger Capítulo 9
danvk Capítulos 1, 2 e 11
dimitrisli capítulo 5
duplicador Capítulo 14
Equiman Capítulo 7
Fenton Capítulos 3 e 18
Florian Haemmerle capítulo 5
Fylax Capítulos 1, 3 e 28
indo Capítulo 28
hansmaad Capítulos 7 e 10
Harry Capítulo 14
irakli khitarishvili Capítulos 17 e 26
islandman93 Capítulos 1, 6, 9, 14 e 26
James Monger Capítulos 7, 27 e 30
JKillian Capítulos 11 e 14
Joel dia Capítulo 14
John Ruddell Capítulo 22
Joshua Breeden Capítulos 1 e 9
Julien Capítulos 3 e 28
Justin Niles Capítulo 7
k0pernikus Capítulos 1 e 27
Kevin Montrose Capítulos 5, 12 e 19
Kewin Dousse Capítulo 22
KnottytOmo Capítulos 1, 10 e 14
Cordeiro cubano Capítulo 1
lekhnath Capítulo 1
leonidv Capítulo 30
lilezek Capítulo 23
Crescendo Capítulos 3, 27 e 28
Matt Lishman Capítulo 1
Matthew Harwood Capítulo 30
Mikhail Capítulos 1 e 3
mleko Capítulos 1, 15, 22, 27 e 30

Notas TypeScript do GoalKicker.com para Profissionais 91

Machine Translated by Google
muetzerich Capítulo 6
Muhammad Awais Capítulo 10
Paulo Boutes Capítulo 9
Peopleware Capítulo 29
Rahul Capítulos 20 e 21
Rajab Shakirov Capítulos 14 e 26
RationalDev Capítulos 1 e 3
Remo H. Jansen Capítulo 8
Robin Capítulo 7
Roman M. Koss Capítulo 24
Roy disse Capítulo 1
Saiful Azad Capítulos 1 e 9
Ele mesmo Capítulo 1
samAlvin Capítulo 1
Lupin Silencioso Capítulo 6
Slava Shpitalny Capítulos 6, 9, 10 e 14
smnbbrv capítulo 5
Stephen Rein Capítulo 24
Ensolarado Capítulo 9
Pai Capítulo 10
Udlei Nati Capítulo 4
usuário3893988 Capítulo 28
Vashishtha Capítulo 13
Ventilador Wasabi Capítulo 1

Notas TypeScript do GoalKicker.com para Profissionais 92

Machine Translated by Google

você pode gostar