🧙‍♂️ Tutorial Typescript para Iniciantes · MagoAcademico

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