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

1. Instale o typescript e crie um arquivo .ts:
   
   Default

   npm i -g typescript touch index.ts

   1 2 3

   npm i -g typescript touch index.ts

2. Escreva algum código javascript:
   
   Default

   const cube = (number) => Math.pow(number, 3)

   1 2	const cube = (number) => Math.pow(number, 3)

3. Compile o código para javascript (ES3):
   
   Default

   npx tsc index.ts

   1 2	npx tsc index.ts

4. Escreva o código:
   
   Default

   let x = 2 // Inferido como number let text = 'Hello, world!' // Inferido como string let value // Inferido como any x = 3 // Funciona text = 5 // Não funciona value = 5 // Funciona value = true // Funciona value = 'Hello, world!' // Funciona

   1 2 3 4 5 6 7 8 9 10

   let x = 2 // Inferido como number let text = 'Hello, world!' // Inferido como string let value // Inferido como any   x = 3 // Funciona text = 5 // Não funciona value = 5 // Funciona value = true // Funciona value = 'Hello, world!' // Funciona

5. Podemos anotar os tipos explicitamente:
   
   Default

   let x = 2 // Inferido como number let text = 'Hello, world!' // Inferido como string let value: number // Inferido como any x = 3 // Funciona text = 5 // Não funciona value = 5 // Funciona value = true // Deixa de funcionar value = 'Hello, world!' // Deixa de funcionar

   1 2 3 4 5 6 7 8 9 10

   let x = 2 // Inferido como number let text = 'Hello, world!' // Inferido como string let value: number // Inferido como any   x = 3 // Funciona text = 5 // Não funciona value = 5 // Funciona value = true // Deixa de funcionar value = 'Hello, world!' // Deixa de funcionar

6. E também podemos criar tipos:
   
   Default

   type Color = string // Alias type Color = 'black' | 'white' // Union type ColorList = Color[] // Arrays type Cartesian = [number, number] // Tuplas

   1 2 3 4 5

   type Color = string // Alias type Color = 'black' | 'white' // Union type ColorList = Color[] // Arrays type Cartesian = [number, number] // Tuplas

7. Agora escreva o código:
   
   Default

   const dog1 = { name: 'Lady', race: 'Cocker Spaniel' } const dog2 = { name: 'Max', race: 'Golden Retriever', color: 'white' }

   1 2 3 4 5 6 7 8 9 10 11

   const dog1 = { name: 'Lady', race: 'Cocker Spaniel' }   const dog2 = { name: 'Max', race: 'Golden Retriever', color: 'white' }

8. Podemos criar uma interface da seguinte forma:
   
   Default

   interface Dog { name: string race: string color: 'black' | 'white' | 'brown' | 'mixed' } const dog1 = { name: 'Lady', race: 'Cocker Spaniel' } const dog2 = { name: 'Max', race: 'Golden Retriever', color: 'white' }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

   interface Dog { name: string race: string color: 'black' | 'white' | 'brown' | 'mixed' }   const dog1 = { name: 'Lady', race: 'Cocker Spaniel' }   const dog2 = { name: 'Max', race: 'Golden Retriever', color: 'white' }

9. Também podemos nos beneficiar dos tipos em funções:
   
   Default

   function 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 }

   1 2 3 4 5 6 7 8 9 10 11 12

   function 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 }