🧙‍♂️ Tutorial Typescript para Iniciantes
Tags: typescript, webdev, javascript, beginners
Published: 2024-04-09 07:28:45

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.

```ts
//  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.


```ts
//         \/ 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:

```ts
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.

```ts
// 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`

```ts
type Foo = {
   prop1: number
   prop2: string
}
```

Ou usar `interface`

```ts
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: 

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

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

```ts
interface Foo {
   prop1: number
   prop2?: string
}
```

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

```ts
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.

```ts
//                \/ 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

```ts
//                \../ 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](https://youtu.be/Gf9vS0yu7zc) que explica desde como surgiu e para o que server Generics que irá ficar bem fácil de entender.


```ts
//           \/ 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.

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

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

```ts
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.

```ts
//   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.

```ts
//   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](https://youtu.be/k7JFBZ2nHhI)