Skip to content

Latest commit

 

History

History
255 lines (192 loc) · 13.1 KB

MIGRANDO.md

File metadata and controls

255 lines (192 loc) · 13.1 KB
Raw
react + ts logo

Cheatsheets para desarrolladores expertos en React que comienzan con TypeScript

Básico | Avanzado | Migrando | HOC | Inglés | 中文翻译 | Contribuir | Preguntas

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
  • Nivel 1A: JavaScript mayoritario, TypeScript cada vez más estricto
  • Nivel 1B: Renombrar todo a TypeScript desde el principio
  • 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

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

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

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

Contenido antiguo que posiblemente esté desactualizado

Desde Flow

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

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

Código abierto

Enlaces