Um guia prático para TypeScript

[ad_1]

TypeScript é um superconjunto que precisa compilar para JavaScript simples. Ele oferece mais controle sobre seu código, pois usa anotações de tipo, interfaces, classes e verificação de tipo estático para gerar erros em tempo de compilação. O TypeScript ajuda a melhorar a qualidade e a compreensibilidade do código, especialmente com uma grande base de código.

Neste guia, guiaremos você pelo TypeScript, aprendendo primeiro todos os conceitos básicos necessários para começar com essa excelente linguagem e, em seguida, finalize este artigo criando um aplicativo do zero usando HTML, CSS e TypeScript.

Vamos mergulhar

O que é o TypeScript?

O TypeScript é uma linguagem de programação orientada a objetos desenvolvida e mantida pela Microsoft. É um superconjunto de JavaScript, o que significa que qualquer código JavaScript válido também será executado conforme o esperado no TypeScript. Possui todas as funcionalidades do JavaScript e alguns recursos adicionais. Ele precisa ser compilado para JavaScript simples durante o tempo de execução; portanto, é necessário um compilador para recuperar o código JS.

O TypeScript usa digitação estática, o que significa que você pode atribuir um tipo a uma variável durante a declaração. E é algo que não pode ser feito com JavaScript porque é uma linguagem de tipo dinâmico, ele não conhece o tipo de dados de uma variável até que atribua um valor a essa variável em tempo de execução.

A verificação de tipo estático torna o TypeScript ótimo, pois ajuda a gerar um erro no tempo de compilação se a variável não for usada ou reatribuída com uma anotação de tipo diferente. No entanto, o erro não impede a execução do código, o código JavaScript ainda será gerado.

A digitação estática é opcional no TypeScript e, se nenhum tipo for definido, mas a variável tiver um valor, o TypeScript inferirá o valor como tipo. E se a variável não tiver valor, o tipo será definido como qualquer por padrão.

Agora, vamos começar a usar o TypeScript na próxima seção para vê-lo em ação.

Configurando o TypeScript

Como eu disse anteriormente, o TypeScript precisa compilar para JavaScript simples, portanto, precisamos usar uma ferramenta para fazer a compilação. E para ter acesso a essa ferramenta, você precisa instalar o TypeScript executando este comando no terminal.

  yarn add -g typescript

Ou se você estiver usando o npm:

  npm install -g typescript

Note que aqui eu uso o -g para instalar o TypeScript globalmente, para que eu possa acessá-lo de qualquer lugar.

Ao instalar o TypeScript, agora temos acesso ao compilador e podemos compilar nosso código para JavaScript. Mais tarde, vamos mergulhar nele e no que ele faz, mas por enquanto vamos adicionar um arquivo de configuração ao nosso projeto. Não é obrigatório adicionar um arquivo de configuração – Mas, em muitos casos, é útil tê-lo, pois permite definir conjuntos de regras para o compilador.

Configurando o TypeScript com tsconfig

tsconfig é um arquivo JSON que ajuda a configurar o TypeScript. Ter um arquivo de configuração é melhor, pois ajuda a controlar o comportamento do compilador. E para criar o arquivo de configuração, você primeiro precisa criar um novo diretório chamado Pokedex e navegue até a raiz da pasta. Em seguida, abra-o no terminal ou em um IDE e execute este comando para gerar um novo arquivo de configuração TypeScript.

  tsc --init

Depois que o arquivo é gerado, agora podemos explorá-lo em um IDE.

{    "compilerOptions": {        "target": "es5",        "module": "commonjs",        "outDir": "public/js"        "rootDir": "src",        "strict": true,        "esModuleInterop": true        "forceConsistentCasingInFileNames": true    },    "include": ["src"]}

Esse arquivo de configuração é muito detalhado, removi os comentários e os valores não utilizados para facilitar a leitura. Dito isto, agora podemos decompor esses valores, explicar cada um e o que ele faz.

target: especifica a versão de destino do ECMAScript ao compilar o código TypeScript. Aqui, alvejamos es5 para oferecer suporte a todos os navegadores, você pode alterá-lo para ES6, ES3 (é o padrão se nenhum destino for especificado), ES2020 etc.

module: define o módulo do código compilado. O módulo pode ser JS comum, ES2015, ES2020, etc.

outDir: especifica o diretório de saída para o código compilado em JavaScript.

rootDir: define o local em que os arquivos TypeScript que precisam ser compilados estão localizados.

include: ajuda a definir qual diretório precisa ser compilado, porque se você não tiver esse valor, o compilador terá todos os .ts e compilá-lo em JavaScript, mesmo que um diretório de saída esteja definido.

Com isso, agora podemos mergulhar em uma das partes mais importantes do TypeScript: os Tipos

Tipos TypeScript

Os tipos fornecem uma maneira de aprimorar a qualidade e a compreensibilidade do código, pois define os tipos de variáveis. Eles são opcionais e ajudam primeiro a definir o que uma determinada variável deve ter como valor e também permite ao compilador detectar erros antes do tempo de execução.

O TypeScript possui vários tipos, como número, sequência, booleano, enum, nulo, nulo, indefinido, qualquer, nunca, matriz e tupla. Não veremos todos os tipos neste guia, mas lembre-se de que eles existem.

Agora, vamos ver alguns exemplos de tipos básicos.

Tipos básicos de TypeScript

let foo: string = "test"let bar: number = 1let baz: string[] = ["This", "is", "a", "Test"]

Como você pode ver aqui, temos três variáveis com tipos diferentes. foo espera uma string, bar, um número e baz, uma matriz de sequência. Se eles receberem algo além do tipo declarado, um erro será gerado pelo TypeScript.

Você também pode declarar baz Curtiu isso: let baz: Array = ["This", "is", "a", "Test"].

Agora, vamos tentar reatribuir uma dessas variáveis e ver como o TypeScript se comporta.

let foo: string = "test"foo = 1

Type '1' is not assignable to type 'string'

TypeScript lançará um erro porque já declaramos foo esperar uma string como valor. E esse erro é detectado em tempo de compilação, o que torna o TypeScript excelente e útil.

Com o TypeScript, os tipos podem ser explícitos, como fizemos acima, no entanto, eles também podem estar implícitos. É melhor definir explicitamente o tipo de um determinado valor, pois ajuda o compilador e o próximo desenvolvedor que herda o código. Mas você também pode declarar variáveis com uma anotação implícita de tipo.

let foo = "test"let bar = 1let baz = ["This", "is", "a", "Test"]

O TypeScript tentará aqui inferir o máximo possível para fornecer segurança de digitação com menos código. Ele pegará o valor e o definirá como um tipo para a variável. E nada vai mudar em relação aos erros.

Vamos tentar reatribuir essas variáveis para ver o que vai acontecer.

foo = 7bar = "updated"baz = [2, true, "a", 10]

O TypeScript captura os erros como antes, mesmo que os tipos de variáveis sejam declarados implicitamente.

Type '7' is not assignable to type 'string'.Type '"updated"' is not assignable to type 'number'.Type 'true' is not assignable to type 'string'.

Ao lidar com um objeto de várias propriedades, pode ser complicado e irritante definir os tipos. Mas, felizmente, o TypeScript tem algo para ajudá-lo junto com esse caso de uso. Então, vamos mergulhar nas interfaces TypeScript e aliases de tipo na próxima seção.

Interfaces e aliases de tipo

Interfaces e aliases de tipo ajudam a definir a forma de estruturas de dados semelhantes a objetos. Eles parecem os mesmos em relação à sua estrutura, mas lembre-se de que são diferentes.
No entanto, o consenso entre os desenvolvedores é usar interface sempre que puder, pois está no padrão tslint conjunto de regras.

Agora, vamos criar uma interface e um alias de tipo na próxima seção para vê-los em ação.

interface ITest {  id: number;  name?: string;}type TestType = {  id: number,  name?: string,}function myTest(args: ITest): string {  if (args.name) {    return `Hello ${args.name}`  }  return "Hello Word"}myTest({ id: 1 })

Como você pode ver, a estrutura de uma interface e um alias de tipo se parece com um objeto JavaScript. Eles precisam definir a forma de um dado dado com o TypeScript.

Observe que aqui, eu uso um campo opcional name adicionando um ponto de interrogação (?) Permite fazer a propriedade name opcional. Isso significa que se nenhum valor for passado para a propriedade name, retornará undefined como valor.

Em seguida, usamos a interface ITest como um tipo para o argumento recebido pela função myTest. E, como nas variáveis, as funções também podem ser definidas para retornar um tipo específico. E aqui, o valor de retorno deve ser uma sequência, caso contrário, um erro será gerado pelo TypeScript.

Até agora, cobrimos todo o conhecimento básico necessário para iniciar o TypeScript. Agora, vamos usá-lo para criar um Pokedex com HTML e CSS.

Vamos mergulhar

Crie um aplicativo Pokedex usando TypeScript

O projeto que vamos construir buscará dados remotos do API Pokemon e exiba cada pokemon com TypeScript.

Então, vamos começar criando três novos arquivos na raiz da pasta Pokedex: index.html, style.csse src/app.ts. E para a configuração do TypeScript, usaremos o mesmo tsconfig.json arquivo criado anteriormente.

Agora, vamos para a parte de marcação e adicione algum conteúdo ao arquivo HTML.

Marcação

                  TypeScript Pokedex              Pokedex digitado

Como você pode ver, temos uma marcação relativamente simples. Há duas coisas importantes a serem mantidas: o id app do div tag que será usada para anexar o conteúdo usando o TypeScript e o script tag que aponta para o public e, para ser mais preciso, o arquivo JavaScript que o TypeScript criará para nós durante o tempo de compilação.

Além disso, o arquivo CSS é um pouco longo, então não o cobrirei para não perder tempo e manter o foco no TypeScript. Dito isso, agora podemos mergulhar nele e começar a buscar dados da API.

Buscar e exibir dados usando o TypeScript

Começamos a parte TS selecionando o id app qual é o id da div tag.

const container: HTMLElement | any = document.getElementById("app")const pokemons: number = 100interface IPokemon {  id: number;  name: string;  image: string;  type: string;}

Aqui, temos uma anotação de tipo que ainda não foi abordada. Este é um tipo de união que permite ter tipos alternativos para uma determinada variável. Isso significa que se container não é do tipo HTMLElement, O TypeScript verificará novamente se o valor é igual ao tipo após o canal (|) e assim por diante, porque você pode ter vários tipos.

Em seguida, temos uma interface IPokemon que define a forma de um objeto pokemon que será usado a seguir na função responsável pela exibição do conteúdo.

const fetchData = (): void => {  for (let i = 1; i <= pokemons; i++) {
    getPokemon(i)
  }
}

const getPokemon = async (id: number): Promise => {  const data: Response = await fetch(`https://pokeapi.co/api/v2/pokemon/${id}`)  const pokemon: any = await data.json()  const pokemonType: string = pokemon.types    .map((poke: any) => poke.type.name)    .join(", ")  const transformedPokemon = {    id: pokemon.id,    name: pokemon.name,    image: `${pokemon.sprites.front_default}`,    type: pokemonType,  }  showPokemon(transformedPokemon)}

A função fetchData nos permite percorrer o número de pokemon para recuperar e para cada chamada de objeto getPokemon com o número do pokemon.

Pode levar algum tempo para buscar dados, portanto, usamos uma função assíncrona que retorna um Promise do tipo void. Isso significa que a função não retornará um valor.

E uma vez que os dados foram buscados, agora podemos criar um novo objeto transformedPokemon que espelha a interface IPokemone, em seguida, passe-o como argumento para showPokemon().

const showPokemon = (pokemon: IPokemon): void => {  let output: string = `                    #${pokemon.id}                        ${pokemon.name}
            ${pokemon.type}        
    `  container.innerHTML += output}fetchData()

Como você pode ver, a função showPokemon recebe como parâmetro o objeto pokemon do tipo IPokemon e retorna void ou nenhum valor para ser preciso. Ele apenas anexará o conteúdo ao arquivo HTML com a ajuda do ID container (lembre-se, é o div tag).

Ótimo! já fizemos muito, no entanto, algo ainda está faltando porque o index.html O arquivo não exibirá nada se você tentar iniciá-lo no navegador, pois o TypeScript precisa ser compilado para JavaScript simples. Então, vamos fazer isso na próxima seção.

Compilar TypeScript para JavaScript

No início deste tutorial, instalamos o compilador TypeScript, que permite compilar o código TS para JavaScript. E para fazer isso, você precisa procurar a raiz do projeto e executar o seguinte comando.

tsc

Este comando irá compilar todos os arquivos com .ts extensão para JavaScript. E já que temos um tsconfig arquivo, o compilador seguirá as regras definidas e compilará apenas os arquivos TS localizados no diretório src pasta e coloque o código JS no diretório public diretório.

O compilador também permite compilar apenas um único arquivo.

  tsc myFile.ts

E se você não especificar um nome após o arquivo TS (myFile.ts), o arquivo JS compilado terá o mesmo nome que o arquivo TS.

E se você não quiser executar o comando em todas as alterações, basta adicionar um -w para permitir que o compilador continue observando uma alteração e recompile o código quando necessário.