🧙‍♂️ Tutorial Typescript para Iniciantes

Nesse artigo você irá aprender o básico do Typescript.

Está incluso:

• Declarar variáveis
• Objetos com tipos e interfaces
• Arrays e tuplas
• Funções

É bom que você saiba pelo menos o básico do Javascript ou de alguma outra linguagem de programação.

Tipos Básicos do Typescript.

O primeiro conceito que você precisa entender são os tipos básicos do Typescript.

No Javascript, existem classes (que não são a mesma coisa que tipos) para strings, booleans, arrays, etc. Essas classes do Javascript são diferentes do tipos do Typescript.

As classes do Javascript começam com letra maiúscula e os tipos do Typescript com letra minúscula.

//  Tipo TS \/    
cont foo: string = String('foo') 
//                   /\ Class JS

Você até pode usar a classe como sendo o tipo no Typescript, mas o recomendado é usar com letra minúscula.

//         \/ Funciona, mas não é recomendado    
cont foo: String = String('foo') 

E os tipos básicos do Typescript são

• string
• boolean
• number
• null
• undefined

Existem outros tipos, mas por enquanto esses são os básicos

Declarando Variáveis

Com esses tipos básicos, você pode declarar variáveis da seguinte forma:

const foo: string = 'foo'
const num: number = 123
const check: boolean = true

Na maioria dos casos, se você não passar o tipo da variável, o Typescript vai inferir o tipo automaticamente.

// Typescript já saberá que 'num' é do tipo number
const num = 123

Objetos com Tipos e Interfaces

Existem dois jeitos de definir um tipo para um objeto.

Você pode usar type

type Foo = {
   prop1: number
   prop2: string
}

Ou usar interface

interface Foo {
   prop1: number
   prop2: string
}

Existe uma certa diferença entre type e interface, mas os dois podem ser usados um no lugar do outro na maioria dos casos. Para iniciantes eu recomendo usar qual você preferir e aprender depois a diferença quando chegar em algo mais avançado.

E você usa esses tipos ao declarar objetos da seguinte forma:

const foo: Foo = {
  prop1: 123,
  prop2: 'abc'
}

Você pode definir uma propriedade opcional no tipo do seu objeto usando o ? antes do :.

interface Foo {
   prop1: number
   prop2?: string
}

Assim, você poderia criar um objeto sem passar prop2, pois ela é opcional

const foo: Foo = {
  prop1: 123,
  // não da erro se você não passar prop2
}

Definindo Array e Tuplas

Para definir um array, você pode passar [] depois do tipo do array.

//                \/ Array de string
const strs: string[] = ['foo', 'FOO']

//             \/ Array de "Foo"s
const foos: Foo[] = [{ ... }]

Você também pode definir uma matrix (array de array) passando [] novamente

//                \../ Matrix de strings
const strs: string[][] = [['foo'], ['FOO']]

//             \../ Matrix de "Foo"s
const foos: Foo[][] = [[{ ... }], [{ ... }]]

Outra forma de criar um array é usando o tipo Array, que ira receber o tipo do array através de um parâmetro genérico.

Talvez essa parte já seja um pouco mais avançada, mas Generics é um conceito muito importante para aprender que existem em varias linguagens de programação. Eu fiz um video no youtube sobre Generics que explica desde como surgiu e para o que server Generics que irá ficar bem fácil de entender.

//           \/ Array de string
const strs: Array<string> = ['foo', 'FOO']

//           \/ Array de "Foo"s
const foos: Array<Foo> = ['foo', 'FOO']

Uma outra forma de definir um array é definindo uma Tupla (Tuple em inglês).

Uma Tupla é um array em que o numero de elementos é fixo e os tipos de cada elemento também são fixos

Abaixo temos uma tupla, que possui dois elementos, onde o primeiro é uma string e o segundo é um numero.

const tupla: [string, number] = ['foo', 123]

Você pode definir quantos elementos quiser na sua Tupla, basta continuar acrescentando tipos.

const tupla: [string, number, boolean, Foo, ...] = [ ... ]

Funções

Ao criar uma função no Typescript, você pode definir os tipos dos parâmetros e o tipo do retorno da função.

//   Tipo do parâmetro \/      \/ Tipo do retorno da função   
const setFoo = (bar: string): void => {}

void é um tipo especial que significa que a função não retorna nada.

Se você não passar o tipo do retorno da função o Typescript irá inferir automaticamente o que está sendo retornado.

//   Sem o tipo do retorno \/ 
const getFoo = (bar: string) => {
  // Typescript irá inferir que essa função retorna 'number'
  return 123
}

Se você tiver alguma duvida, comente aqui em baixo que eu vou responder você pessoalmente.

Se você prefere assistir o conteúdo desse artigo, eu fiz um video no youtube com o mesmo conteúdo:

• Tutorial Typescript Iniciantes: Aprenda o Básico do Typescript