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.
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.
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 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.
const num = 123
Objetos com Tipos e Interfaces
Existem dois jeitos de definir um tipo para um objeto.
Você pode usar type
prop1: number
prop2: string
}
Ou usar interface
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:
prop1: 123,
prop2: ‘abc‘
}
Você pode definir uma propriedade opcional no tipo do seu objeto usando o ? antes do :.
prop1: number
prop2?: string
}
Assim, você poderia criar um objeto sem passar prop2, pois ela é opcional
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.
const strs: string[] = [‘foo‘, ‘FOO‘]
// / Array de “Foo”s
const foos: Foo[] = [{ … }]
Você também pode definir uma matrix (array de array) passando [] novamente
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.
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.
Você pode definir quantos elementos quiser na sua Tupla, basta continuar acrescentando tipos.
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.
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.
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
