Cheatsheets para desarrolladores expertos en React que comienzan con TypeScript

Migrando (a TypeScript) Cheatsheet

Este Cheatsheet recopila consejos y utilidades de casos de estudios reales de equipos que mueven bases de código significativas de JS plano o Flow a Typescript. Esto no intenta convencer a la gente para que lo haga, pero recopilamos las pocas estadísticas que ofrecen las empresas después de su experiencia de migración.

⚠️ Este Cheatsheet es extremadamente nuevo y podría usar toda la ayuda que podamos obtener. Consejos sólidos, resultados, y contenido actualizado son bienvenidos.

Prerrequisitos

Leer la Guía oficial de TypeScript para migrar desde JS y también deberías estar familiarizado con la Guía de conversión de React.

Enfoques de conversión general

Nivel 0: No uses TypeScript, usa JSDoc
- Mira nuestra seccion de JSDoc
Nivel 1A: JavaScript mayoritario, TypeScript cada vez más estricto
- como recomienda la guía oficial de TS
- usa allowJS (Experiencias: clayallsop, pleo)
Nivel 1B: Renombrar todo a TypeScript desde el principio
- "Just rename all .js files to .ts"?
- usa lo mas simple, la configuración mas mínima para comenzar
Nivel 2: TypeScript estricto
- usa dts-gen de Microsoft para generar archivos .d.ts para tus archivos sin tipo. Esta respuesta de SO tiene mas información sobre el tema.
- usa la palabra clasve declare para declaraciones de ambiente - mira la declaración de fusión para parchear declaraciones de biblioteca en línea.

Varios consejos/enfoques que las empresas exitosas han tomado

@ts-ignore en errores del compilador para librerias sin typedefs.
elije ESLint sobre TSLint (fuente: ESLint y TS Roadmap). Puedes convertir TSlint a ESlint con esta herramienta.
El nuevo código siempre de escribirse en TypeScript. Sin excepciones. Para el código existente: Si tu tarea requiere cambiar el código JavaScript, debes volverlo a escribir. (Source: Hootsuite)

Consejos para Webpack

webpack loader: awesome-typescript-loader vs ts-loader? (Hay un cierto desacuerdo en la comunidad sobre esto - pero lee awesome's point of view)
configuración de Webpack:

module.exports = {

resolve: {
-    extensions: ['.js', '.jsx']
+    extensions: ['.ts', '.tsx', '.js', '.jsx']
},

// Soporte para source maps ('inline-source-map' también funciona)
devtool: 'source-map',

// Añadir el loader para archivos .ts.
module: {
  loaders: [{
-       test: /\.jsx?$/,
-       loader: 'babel-loader',
-       exclude: [/node_modules/],
+       test: /\.(t|j)sx?$/,
+       loader: ['awesome-typescript-loader?module=es6'],
+       exclude: [/node_modules/]
+   }, {
+       test: /\.js$/,
+       loader: 'source-map-loader',
+       enforce: 'pre'
  }]
}
};

Nota especial sobre ts-loader y librerias de terceros: https://twitter.com/acemarke/status/1091150384184229888

JSDoc

https://github.com/Microsoft/TypeScript/wiki/JsDoc-support-in-JavaScript
El código base de webpack usa JSDoc con linting de TS https://twitter.com/TheLarkInn/status/984479953927327744 (un truco loco: https://twitter.com/thelarkinn/status/996475530944823296)

Problemas a tener en cuenta:

object se convierte a any por alguna razón.
Si tiene un error en el JSDoc, no recibes ningún warning/error. TS just silently doesn't type annotate the function.
El casteo puede ser detallado

(gracias Gil Tayar y Gleb Bahmutov por compartir el comentario anterior)

Desde JS

Conversión automatizada de JS a TS

TypeStat (usado por Codecademy)
TypeWiz
js-to-ts-converter

Conversión manual de JS a TS

la estrategia de "Solo renombra"

OSX/Linux: find src -name "*.js" -exec sh -c 'mv"$0" "${0%.js}.tsx"' {} \;

Puede cargar archivos de TypeScript con webpack o usar el compilador tsc para compilar sus archivos TS en JS uno al lado del otro. El tsconfig.json básico es:

{
  "compilerOptions": {
    "allowJs": true
  }
}

Luego querrás habilitarlo para validar JS:

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

Si tiene una base de código grande y arroja demasiados errores a la vez, puedes optar por excluir archivos problemáticos con //@ts-nocheck o en su lugar desactivar checkJs y agregar una directiva // @ ts-check en la parte superior de cada archivo JS normal.

TypeScript debería arrojar algunos errores atroces aquí que deberían ser fáciles de solucionar.

Una vez que haya terminado, trague la píldora roja apagando los any implícitos:

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true,
    "noImplicitAny": true // o "strict": true
  }
}

Esto generará un montón de errores de tipo y puedes comenzar a convertir archivos a TS u (opcionalmente) usar anotaciones JSDoc en tu JS.

Una práctica común es usar alias de tipo TODO para any, para que puedas hacer un seguimiento de lo que necesita hacer luego.

type TODO_TYPEME = any;
export function myFunc(foo: TODO_TYPEME, bar: TODO_TYPEME): number {
  // ...
}

Gradualmente agrega mas banderas de modo strict como noImplicitThis, strictNullChecks, y así sucesivamente hasta que finalmente pueda correr por completo en modo estricto sin que queden archivos js:

{
  "compilerOptions": {
    "strict": true
  }
}

Más recursos

Adopting TypeScript at Scale - AirBnB's conversion story and strategy
Migrating a create-react-app/react-scripts app to TypeScript - don't use react-scripts-ts
Migrating an EJECTED CRA app to TS
Lyft's JS to TS migration tool (includes PropTypes migration)
Hootsuite
Storybook's migration (PR)
How we migrated a 200K+ LOC project to TypeScript and survived to tell the story - Coherent Labs - using grunt-ts, jQuery and Kendo UI

Contenido antiguo que posiblemente esté desactualizado

Incrementally Migrating JS to TS (old)
Microsoft's TypeScript React Conversion Guide (old)

Desde Flow

Try flow2ts: npx flow2ts - doesn't work 100% but saves some time (mira este y otros tips de @braposo at TravelRepublic)
Incremental Migration to TypeScript on a Flowtype codebase at Entria
MemSQL's Studio's migration - blogpost con muchos tips útiles
Retail-UI's Codemod: https://github.com/skbkontur/retail-ui/tree/master/packages/react-ui-codemodes/flow-to-ts
Quick-n-dirty Flow to TS Codemod
Ecobee's brief experience
Migrating a 50K SLOC Flow + React Native app to TypeScript

Resultados

El número de despliegues de producción se duplicó para Hootsuite
Se encontraron globals accidentales para Tiny
Se encontraron llamadas a funciones incorrectas para Tiny
Se encontró un código de error poco utilizado que no se probó Tiny

Estudios Académicos de Migración

To Type or Not to Type: Quantifying Detectable Bugs in JavaScript

Nuestro hallazgo central es que ambos sistemas de tipos estáticos encuentran un porcentaje importante de errores públicos: tanto Flow 0.30 como TypeScript 2.0 detectan con éxito el 15%.

Diversas historias de migración de compañías notables y fuentes abiertas

Adopting TypeScript at Scale - AirBnB's conversion story and strategy
Lyft
Google
Tiny - Talk from ForwardJS here
Slack (podcast)
Historia de adopción de Netflix
Priceline
Dropbox - Talk at React Loop

Código abierto

Jest's migration (PR)
Expo's migration (issue)
Google Workbox migration
Atlassian's migration (PR)
Yarn's migration (issue)
React Native CLI
Next.js
Redux
Dojo 1 -> 2 migration

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier! Saves Data!