👉🏼 👨‍👦‍👦 🕢 Usando TypeScript em JavaScript sem escrever TypeScript 🍪 🔙 🧑🏾‍🤝‍🧑🏻

Sou um grande fã do TypeScript. Sempre que possível, tento usar esse idioma em meus projetos. O TypeScript fornece ao desenvolvedor relatórios de erro e verificação de tipo no código JavaScript e TypeScript. Além disso, quem escreve o TypeScript pode usar os recursos convenientes para a conclusão do código e pode executar a refatoração de maneira rápida e confiável. TypeScript é a primeira linha de defesa contra erros no código. Outro ponto forte dessa linguagem é que ela permite que você use os recursos mais recentes do JavaScript ao escrever programas. Ao mesmo tempo, o que é obtido pela conversão do código TypeScript em JavaScript será suportado por todos os navegadores. É muito legal.

É verdade que nem todos os projetos front-end incluem TypeScript. E se você pudesse usar os recursos do TypeScript, mas não converter o projeto inteiro (e toda a equipe) nele e adicionar uma nova ferramenta ao pipeline de montagem do projeto? Isso é possível graças ao VS Code e ao JSDoc.

Configurando o ambiente de trabalho

▍ Opção número 1. Configurações de código VS (validação global)

A primeira maneira de usar o TypeScript (TS) em projetos escritos em JavaScript simples (JS) é usar o TS para validar todos os arquivos JS. Isso é feito incluindo um parâmetro global VS Code. Este parâmetro pode ser ativado nas configurações do usuário ou da área de trabalho:

"javascript.implicitProjectConfig.checkJs": true

Se você é um dos que prefere usar a interface gráfica, é possível ativá-la como mostrado abaixo.

Habilitando a validação JS do TypeScript

Ption Opção número 2. Usando o arquivo jsconfig.json (validação global)

Outra opção para ativar a validação global do código JS usando o TS é usar um arquivo jsconfig.json. Se esse arquivo existir, as configurações especificadas nele substituirão as configurações especificadas no Código VS.

{
  "compilerOptions": {
    "checkJs": true
  }
}

▍ Opção número 3. Ativar validação para arquivos individuais

Uma terceira maneira de usar o TypeScript para controlar o código JS é habilitar a verificação no nível do arquivo individual. Consiste em adicionar o comentário correspondente ao início do arquivo:

// @ts-check
let itsAsEasyAs = 'abc';
itsAsEasyAs = 123; // Error: Type '123' is not assignable to type 'string'

Usando a mesma idéia, você pode desativar a verificação de TS para um único arquivo JS. Isso é feito se a verificação TS for ativada globalmente usando os métodos descritos acima. Um comentário especial também é usado aqui:

// @ts-nocheck
let easy = 'abc';
easy = 123; //

E se você deseja que o TypeScript ignore apenas parte do arquivo, você pode fazer o seguinte:

let easy = 'abc';
// @ts-ignore
easy = 123; //

Digitação de código usando JSDoc

Acabamos de falar sobre como habilitar a verificação TS no nível do arquivo. Isso fornece recursos básicos de verificação de tipo. Eles podem ser estendidos descrevendo tipos usando comentários no formato JSDoc.

Tipificação de funções

Você pode começar a digitar o código usando JSDoc com uma descrição do que as funções aceitam como entrada:

/**
 * @param {number} shippingVal
 */
updateShipping(shippingVal) {
    ...
}

Depois disso, o editor poderá fornecer dicas por tipo.

Dica sobre o tipo de valor aceito pela função

Esse método é adequado para tipos simples, mas e se o desenvolvedor precisar descrever seus próprios tipos? Isso pode ser feito usando a tag@typedef. Eu recomendo colocar descrições de tipo no início do arquivo. Isso facilitará a detecção de tais descrições no decorrer do trabalho:

/**
* @typedef {Object} CreditNoteTaxResponseViewModel
* @property {number} feeAmount
* @property {number} inclGst
* @property {number} subTotal
* @property {number} total
*
* @typedef {Object} ApiResponse
* @property {string} status
* @property {string} message
* @property {CreditNoteTaxResponseViewModel} response
*/

Tais descrições podem ser usadas sempre que necessário:

/**
                * @param {CreditNoteTaxRequestViewModel} req
                * @returns {Promise<ApiResponse>}
                */
                createCreditNoteTaxApiCall(req) {
        ...
                }

Outro caso de uso para essa técnica é mover as declarações de tipo para arquivos especiais. Digamos que esse arquivo possa ser chamado main.d.ts.

export interface ICreditNoteTaxRequestViewModel{
    orderID: number;
    shippingCredit: number;
    lines: IICreditNoteTaxLineViewModel[]
}

export interface ICreditNoteTaxLineViewModel{
    originalOrderLineID:number;
    creditQuantity: number;
}

export interface ICreditNoteTaxResponseViewModel{
    feeAmount: number;
    inclGst: number;
    subTotal: number;
    total: number;
}

export interface IApiResponse{
    status: string;
    status: message;
    response: ICreditNoteTaxResponseViewModel;
}

Esses tipos podem ser usados no JavaScript:

/**
   * @param {import("./main").ICreditNoteTaxRequestViewModel} req
   * @returns {Promise<import("./main").IApiResponse>}
   */
  function createCreditNoteTaxApiCall(req) {
    ///  
    return;
  }

YpTipificação de código regular

Os exemplos acima resolvem o problema de digitar os valores de entrada e saída de funções. Algo semelhante pode ser feito usando os comentários JSDoc internos.

Digitando uma variável regular

▍Tipificação de bibliotecas

O VS Code possui um sistema para obter automaticamente tipos para bibliotecas de terceiros. O procedimento correspondente se aplica a todos os pacotes descritos no arquivo package.json. Mas, se alguém preferir definir isso explicitamente, ele poderá fazer as configurações apropriadas em jsconfig.json:

{
  "typeAcquisition": {
    "include": ["jquery"]
  }
}

Após o sistema de obtenção de tipo processar a biblioteca, os tipos podem ser usados no JSDoc:

/**
 * @param {JQuery<HTMLElement>} $itemRow
 */
initRow($itemRow) {
    ...
}

Mudando para TypeScript

Se você decidir converter em um projeto do texto dactilografado JavaScript, em algumas partes da qual typescript é usado, você pode simplesmente mudar o nome jsconfig.jsonpara tsconfig.jsone incluir o parâmetro nele allowJs:

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true
  }
}

Depois disso, você pode começar a renomear os *.jsarquivos -files para *.ts-files e digitar o código desses arquivos. O processo de tradução de um projeto para o TypeScript pode ocorrer gradualmente.

Sumário

Depois de ler este material, você pode perceber como é fácil tirar proveito dos recursos do TypeScript em um projeto JavaScript. Para fazer isso, basta configurar o código VS de acordo. A abordagem descrita aqui permite que você não faça alterações no processo de montagem do projeto, não arrisque violar esse processo e não force a equipe de desenvolvimento a mudar urgentemente para um novo idioma.

Se o projeto JS, que usa apenas alguns dos recursos do TypeScript, for completamente transferido para o TS, isso também é fácil. Além disso, essa transição pode ser realizada em etapas.

Aqui está o repositório do GitHub, onde você pode encontrar os exemplos de código usados neste artigo.

Queridos leitores! Como você se sente com a idéia de verificação de tipo no código JS usando os recursos do TypeScript?

Usando TypeScript em JavaScript sem escrever TypeScript