
TypeScript na prática
Resumo TypeScrip
-
O que é Typescript?
- “Typescript é javascript com sintaxe para tipos.”
- Uma linguagem de programação
- Um superset do javascript
-
Por que usar?
- Ferramentas mais inteligentes
- Curva de aprendizado reduzida
- Uso de recursos modernos do javascript e outros que não existem nativamente nele
-
Como usar?
- Não funciona no node ou no browser
- Deve ser compilado para javascript
-
Tipos e interfaces
- Inferência pela IDE
- Principais tipos
- Anotação de tipos
- Criação de tipos e interfaces
-
Funções
- Parâmetros
- Retorno
- Callbacks
Snippets
- Instale o typescript e crie um arquivo .ts:
123npm i -g typescripttouch index.ts - Escreva algum código javascript:
12const cube = (number) => Math.pow(number, 3) - Compile o código para javascript (ES3):
12npx tsc index.ts - Escreva o código:
12345678910let x = 2 // Inferido como numberlet text = 'Hello, world!' // Inferido como stringlet value // Inferido como anyx = 3 // Funcionatext = 5 // Não funcionavalue = 5 // Funcionavalue = true // Funcionavalue = 'Hello, world!' // Funciona - Podemos anotar os tipos explicitamente:
12345678910let x = 2 // Inferido como numberlet text = 'Hello, world!' // Inferido como stringlet value: number // Inferido como anyx = 3 // Funcionatext = 5 // Não funcionavalue = 5 // Funcionavalue = true // Deixa de funcionarvalue = 'Hello, world!' // Deixa de funcionar - E também podemos criar tipos:
12345type Color = string // Aliastype Color = 'black' | 'white' // Uniontype ColorList = Color[] // Arraystype Cartesian = [number, number] // Tuplas - Agora escreva o código:
1234567891011const dog1 = {name: 'Lady',race: 'Cocker Spaniel'}const dog2 = {name: 'Max',race: 'Golden Retriever',color: 'white'} - Podemos criar uma interface da seguinte forma:
1234567891011121314151617interface Dog {name: stringrace: stringcolor: 'black' | 'white' | 'brown' | 'mixed'}const dog1 = {name: 'Lady',race: 'Cocker Spaniel'}const dog2 = {name: 'Max',race: 'Golden Retriever',color: 'white'} - Também podemos nos beneficiar dos tipos em funções:
123456789101112function sum(x: number, y: number): number {return x + y}function concat(x: number, y: number): string {return x + y // Sinaliza erro}function concat(x: number, y: number): string {return x.toString() + y.toString() // Não sinaliza erro}
Grato Professor @Isaac Pontes