Não oficial reaja o TypeScript nativo

John Tucker Blocked Unblock Seguir Seguindo 28 de dezembro de 2018

Uma configuração para usar o TypeScript com o React Native (usando o Expo ).

No ano passado, adotei projetos de desenvolvimento da Web do TypeScript for React ; sentindo-se especialmente bem com essa decisão como Create React App agora (a partir deste outono ) apóia oficialmente isto. Escrevi um artigo separado sobre este tópico: Hello Create React App (CRA) – TypeScript .

Ao mesmo tempo, continuei usando JavaScript para projetos React Native . Meu próximo passo óbvio é passar a usar o TypeScript para eles.

Devido à sua simplicidade, o meu ambiente de desenvolvimento React Native preferido é o Expo ; então minha situação ideal seria encontrar documentação oficial da Expo no TypeScript .

O que eu encontrei em vez disso:

Não encontrando a documentação oficial da Expo no TypeScript , pensei em seguir a configuração mais simples; fazendo observações ao longo do caminho.

Nota : Em algum momento, espero que em breve, eu espero que este artigo seja irrelevante, já que a Expo irá, oficialmente, apoiar o TypeScript (com documentação).

Pré-requisitos

Nós começamos com um projeto da Expo ; documentado em Início rápido – Como começar – Reagir nativo .

Nota : Este artigo foi escrito com a última versão da Expo ; a partir desta redação 31.0.2 .

Como o processo de inicialização da Expo parece preferir o Yarn over npm , usaremos o Yarn para o nosso projeto.

Embora não seja obrigatório, o uso de um editor compatível com TypeScript , como o código do Visual Studio gratuito , é extremamente útil; neste caso também é recomendado adicionar o TSLint e Formatador de código Prettier extensões.

Também não é necessário qualquer entendimento do TypeScript , mas não será possível ir muito longe sem ele. Recomendar outro artigo que escrevi; TypeScript: The Hard (er) Parts: Parte 1 .

Começo rápido

As seções restantes deste artigo, passam por detalhes sobre o que e porquês para cada uma das alterações de configuração para suportar o TypeScript com o Expo.

Nota : Um exemplo de trabalho está disponível para download .

Para um começo rápido, no entanto, pode-se fazer o seguinte:

  1. Comece a partir de um projeto da Expo ; validado na versão 31.0.2
  2. Crie uma pasta src e copie o App.js para src / App.tsx
  3. Criar App.ts
  4. Instale as dependências:
 adicionar fio datilografado -D 
adicionar fio @ tipos / reagir
adicionar fio @ tipos / reagir-nativo
adicionar fio @ tipos / expo
fio adicionar tslint -D
fio adicionar prettier -D
fio adicionar tslint-config-prettier -D
fio adicionar tslint-plugin-prettier -D
adicionar fio tslint-reagir -D
fio adicionar chokidar-cli -D
o fio adiciona o gracejo -D
adicionar fio @ tipos / brincadeira -D
fio adicionar ts-jest -D
fio adicionar jest-expo -D
o fio adiciona reagir-teste-renderizador -D
adicionar fio @ tipos / react-test-renderer -D

5. Crie o tsconfig.json

6. Criar tslint.json

7. Criar .prettierrc

8. Crie jest.config.js

9. Adicione novas entradas de script ao package.json :

 { 
...
"scripts": {
...
"ts": "tsc",
"ts-watch": "tsc -w",
"ts-lint": "tslint -c tslint.json 'src / ** / *. {ts, tsx}'",
"ts-lint-watch": "fios ts-lint; chokidar 'src / ** / *. {ts, tsx}' -c 'fio ts-lint'",
"teste": "brincadeira",
"test-watch": "brincadeira - relógio"
}
...
}

10. Crie um teste de amostra, por exemplo, src / App.test.tsx

Com essas mudanças, você ainda pode executar todos os comandos da Expo , por exemplo,

 início do fio 

Nós podemos digitar cheque:

 fio ts 

Anexar -watch, por exemplo, y -ts-watch, a este e a qualquer um dos comandos restantes, executa continuamente o comando nas alterações do arquivo.

Nós podemos deixar:

 fio ts-lint 

Linting irá reportar erros, por exemplo, src / App.tsx terá alguns erros.

Nós podemos testar:

 teste de fio 

É isso, agora podemos continuar nosso desenvolvimento usando o TypeScript .

Transpilar

Precisamos transpilar (converter) o TypeScript para JavaScript antes que ele possa ser executado no mecanismo React Native JavaScript .

Começamos renomeando App.js para App.tsx . Agora, simplesmente usamos o comando normal do Expo para iniciar o aplicativo:

 início do fio 

O que?!? ?

Primeiro, porque o TypeScript é um superconjunto de JavaScript e, como o código é muito simples, o App.tsx é um TypeScript válido.

Segundo, a Expo usa a biblioteca @babel / plugin-transform-typescript para transformar o TypeScript em JavaScript .

Verificação de tipo

Acontece que a nossa solução, embora fácil, não reforça a verificação de tipos.

Não insere o tipo de entrada. Para isso, você precisará instalar e configurar o TypeScript.

@ babel / plugin-transform-typescript

Como o uso do TypeScript não é muito útil sem a verificação de tipos, seguiremos seus conselhos e instalaremos e configuraremos uma biblioteca, datilografada , para impor a verificação de tipos.

 adicionar fio datilografado -D 

o typescript é configurado em um arquivo, tsconfig.json :

Nota : Configurar o typescript é um pouco de arte; Existem muitas opções . Eu ainda tenho que ver duas pessoas produzirem a mesma configuração.

Observações:

  • Essa configuração é a configuração mínima absoluta para digitar App.tsx .
  • esModuleInterop : Permitir importações padrão de módulos sem exportação padrão (para transpilação do babel ); Reagir é um desses módulos. Inclui o sinalizador allowSyntheticDefaultImports (para transpilação de typescript )
  • jsx : suporte a JSX em arquivos .tsx
  • lib : Lista de arquivos de biblioteca a serem incluídos na compilação; a configuração do Expo Babel está aparentemente atualizada, por isso incluímos o esnext (presumivelmente inclui todas as versões do JavaScript até o ES2018). Além disso, ao incluir explicitamente as bibliotecas, evitamos incluir algumas bibliotecas padrão que entram em conflito com @ types / react -native ( DOM e ScriptHost ).
  • noEmit : não emite saídas; estamos usando apenas o typescript para executar a verificação de tipo
  • include : especifica quais arquivos devem ser verificados

Como algumas bibliotecas não fornecem seus próprios tipos, precisamos instalá-las separadamente:

 adicionar fio @ tipos / reagir 
adicionar fio @ tipos / reagir-nativo
adicionar fio @ tipos / expo

Nota : Embora o App.tsx não use nenhuma das APIs de expo , precisaremos mais tarde.

Finalmente, movemos o App.tsx para uma pasta src para que o typescript possa verificá-lo. Para continuar a construir o aplicativo da Expo , precisamos criar um arquivo App.ts :

Com isso, ainda podemos executar o aplicativo, iniciar o fio e digitá-lo usando:

 ./node_modules/.bin/tsc 

Podemos validar que a verificação de tipos está funcionando, adicionando um erro de TypeScript em src / App.tsx :

 importar Reagir de 'reagir'; 
import {StyleSheet, Text, View} de 'react-native';
 vamos testar = 'Olá mundo'; 
teste = 1;
...
  • Este erro aparecerá em um editor habilitado para TypeScript , por exemplo, Visual Studio Code
  • Este erro também aparecerá quando você executar o comando tsc
  • Como este é apenas um erro de digitação, o projeto ainda transpila e roda com início de fio

Para simplificar a execução do tsc , atualizamos o package.json :

 { 
...
"scripts": {
...
"ts": "tsc",
"ts-watch": "tsc -w"
}
...
}

Então agora podemos apenas executá-lo com:

 fio ts 

O script ts-watch executa continuamente tsc nas alterações de arquivo.

Verificação do tipo de aperto

Por padrão, a configuração do typescript é frouxa; vamos aplicar a configuração mais rigorosa; atualizando o tsconfig.json :

 { 
"compiladorOptions": {
...
"forceConsistentCasingInFileNames": true
...
"noFallthroughCasesInSwitch": true,
"noImplicitReturns": true,
"noUnusedLocals": verdadeiro
"noUnusedParameters": true,
"estrito": true
}
...
}

Nota : Adicionadas todas as opções do compilador typescript que apertam a verificação; a opção estrita permite uma combinação deles.

Linting

Enquanto a verificação de tipo detecta muitos problemas no código, o linting com TSLint captura ainda mais.

O TSLint é uma ferramenta de análise estática extensível que verifica o código do TypeScript quanto a erros de legibilidade, manutenibilidade e funcionalidade. É amplamente suportado por editores modernos e sistemas de construção e pode ser personalizado com suas próprias regras, configurações e formatadores de cotão.

– TSLint – TSLint

Acoplando TSLint com Prettier , com foco na formatação de código, adicionamos guarda-corpos bastante rígidas para o nosso código.

 fio adicionar tslint -D 
fio adicionar prettier -D
fio adicionar tslint-config-prettier -D
fio adicionar tslint-plugin-prettier -D
adicionar fio tslint-reagir -D

Criamos uma configuração TSLint ; tslint.json :

Observações:

  • A desativação do nome da interface remove o requisito de exigir nomes de interface para iniciar com a letra I

e uma configuração mais bonita : .prettierrc :

Agora podemos soltar nossa aplicação com o comando:

 node_modules / .bin / tslint -c tslint.json 'src / ** / *. {ts, tsx}' 

e, como antes, para simplificar, podemos atualizar o package.json :

 { 
...
"scripts": {
...
"ts-lint": "tslint -c tslint.json 'src / ** / *. {ts, tsx}'",
"ts-lint-watch": "fios ts-lint; chokidar 'src / ** / *. {ts, tsx}' -c 'fios ts-lint'"
}
...
}

Precisamos instalar o chokidar-cli para permitir que usemos o script ts-lint-watch para alterar permanentemente os arquivos.

 fio adicionar chokidar-cli -D 

note : Precisamos corrigir dois erros encontrados em src / App.tsx .

Testando

Finalmente, queremos poder testar nosso código. Nós instalamos as bibliotecas necessárias:

 o fio adiciona o gracejo -D 
adicionar fio @ tipos / brincadeira -D
fio adicionar ts-jest -D
fio adicionar jest-expo -D
o fio adiciona reagir-teste-renderizador -D
adicionar fio @ tipos / react-test-renderer -D

Nós configuramos o Jest ; jest.config.js :

Observações:

  • O uso de preprocessor.js é descrito em um problema conhecido
  • O uso do ts-jest é transformar testes escritos em TypeScript em JavaScript para serem executados pelo Jest
  • O valor para moduleFileName é recomendado pelo Jest for TypeScript

Com isso, podemos escrever nossos testes:

e execute-o com:

 ./node_modules/.bin/jest 

Para simplificar a execução dos testes, atualizamos o package.json :

 { 
...
"scripts": {
...
"teste": "brincadeira",
"test-watch": "brincadeira - relógio"
}
...
}

Embrulhar

Espero que eu esteja fazendo ajustes nessa configuração quando começar a usar mais o TypeScript com o React Native . Além disso, se você descobrir algum problema, por favor, sinta-se adicionar um comentário para que eu possa trabalhar para resolver.