Introdução

Agora aprenderemos sobre TypeScript, uma importante ferramenta para desenvolvedores que desejam escrever códigos mais seguros e com menos erros. Abaixo discutiremos mais sobre a linguagem e como a usar de forma produtiva em seus projetos.

O que é?

O TypeScript é uma linguagem de programação desenvolvida pela Microsoft que adiciona tipagem estática ao JavaScript. Isso significa que o TypeScript permite definir tipos para variáveis, parâmetros de funções e objetos, tornando o código mais legível e seguro.

Além disso, o TypeScript é uma linguagem de código aberto desenvolvida pela Microsoft, que é um superconjunto do JavaScript. Isso significa que qualquer código JavaScript é um código TypeScript válido.

A linguagem resolve um dos maiores problemas do JavaScript, que é a tipagem dinâmica. Com o TypeScript, é possível definir tipos para variáveis, parâmetros de funções e objetos, tornando o código mais legível e seguro.

Instalação

A linguagem já está configurada no ambiente de desenvolvimento do projeto, então não é necessário instalar nada.

Entretanto, para a criação um novo projeto Typescript, basta executar o comando de instação do Typescript no seu projeto com o uso de um comando npm:

npm install--save - dev typescript @types / react @types / node

O comando instalará o TypeScript e os tipos de definição para o React e o Node.js. Com isso, você poderá começar a escrever código TypeScript em seu projeto.

Configuração

Podemos configurar o nosso projeto TypeScript no arquivo tsconfig.json. Este arquivo contém as configurações do compilador TypeScript, como o diretório de saída dos arquivos compilados, o nível de compatibilidade com o JavaScript, entre outras configurações.

1

A maioria das configurações do TypeScript são opcionais, mas é recomendado que você configure o seu projeto de acordo com as necessidades do seu projeto.

Importantes configurações do TypeScript:

• target: Define a versão do ECMAScript que o TypeScript irá compilar.
• lib: Define as bibliotecas padrão que estarão disponíveis no ambiente de execução.
• allowJs: Permite a inclusão de arquivos JavaScript no projeto.
• strict: Habilita todas as opções de checagem de tipos.
• module: Define o sistema de módulos que será utilizado.
• plugins: Define os plugins que serão utilizados, no nosso caso, o plugin do Next.js.
• paths: Define os caminhos de importação de módulos. No nosso caso, foi definido um alias, ou seja, um apelido para o diretório src.
• include: Define os arquivos que serão incluídos na compilação.
• exclude: Define os arquivos que serão excluídos da compilação. Colocamos o diretório node_modules para que os arquivos de terceiros não sejam compilados e pela tendência do tamanho do diretório.

Para mais informações detalhadas sobre as configurações do TypeScript, consulte a documentação oficial.

Tipos Básicos

As váriaveis criadas podem ser const (constantes) ou let (variáveis). As constantes são imutáveis e as variáveis podem ser alteradas.

Os tipos básicos do TypeScript são os mesmos do JavaScript, mas com a adição de tipos explícitos. Abaixo estão os tipos básicos do TypeScript:

• number: Representa números inteiros e decimais.
• string: Representa cadeias de caracteres.
• boolean: Representa valores booleanos (true ou false).
• array: Representa uma lista de valores de um mesmo tipo.
• tuple: Representa uma lista de valores de tipos diferentes e um número fixo de elementos.
• enum: Representa um conjunto de valores nomeados.
• unknown: Representa um tipo de valor desconhecido.
• any: Representa um tipo de valor dinâmico.
• void: Representa a ausência de tipo.
• null: Representa um valor nulo.
• undefined: Representa um valor indefinido.
• Object: Representa um objeto (tipo não primitivo) Javascript.

Type Assertion

O Type Assertion é uma forma de dizer ao TypeScript que você sabe o tipo de uma variável melhor do que ele. O Type Assertion é feito com a palavra-chave as ou com a sintaxe <Tipo>.

1

O ; é opcional no final de uma instrução em TypeScript.

Interfaces

As interfaces são uma forma de definir a estrutura de um objeto em TypeScript. Elas são usadas para definir um contrato que um objeto deve seguir, ou seja, quais propriedades e métodos um objeto deve ter.

Elas serão melhor apresentadas e utilizadas ao passar props para componentes React, veja em componentes.

Por enquanto, segue um exemplo de interface:

1

Podemos utilizar a ? para definir propriedades opcionais. Além disso, podemos utilizar a | para definir propriedades que podem ter mais de um tipo.

1

Ao definir uma váriavel como opcional, é equivalente a definir que ela pode ser undefined. Ou seja email?: string é equivalente a email: string | undefined.

Generics

Generics são uma forma de criar componentes, funções e classes que podem trabalhar com diferentes tipos de dados. Eles permitem que você escreva código que é reutilizável e flexível, sem sacrificar a segurança de tipos.

Os generics são muito utilizados em bibliotecas e frameworks, como o React, para criar componentes que podem trabalhar com diferentes tipos de dados.

Veja um exemplo de como criar uma função genérica:

1

Na função acima, o tipo T é um tipo genérico que pode ser qualquer tipo de dado. Isso permite que a função seja usada com diferentes tipos de dados, sem sacrificar a segurança de tipos.