From 5e6c96769384448317abe100046606032a7faa2d Mon Sep 17 00:00:00 2001 From: Dante Calderon Date: Sun, 15 Dec 2019 20:47:42 -0500 Subject: [PATCH 1/3] Add initial file --- MIGRANDO.md | 247 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 247 insertions(+) create mode 100644 MIGRANDO.md diff --git a/MIGRANDO.md b/MIGRANDO.md new file mode 100644 index 0000000..232da77 --- /dev/null +++ b/MIGRANDO.md @@ -0,0 +1,247 @@ +
+ + + react + ts logo + + +

Cheatsheets para desarrolladores expertos en React que comienzan con TypeScript

+ +[**Básico**](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet#basic-cheatsheet-table-of-contents) | +[**Avanzado**](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet-es/blob/master/AVANZADO.md) | +[**Migrando**](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/blob/master/MIGRATING.md) | +[**HOC**](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/blob/master/HOC.md) | +[**Inglés**](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet) | +[**中文翻译**](https://github.com/fi3ework/blog/tree/master/react-typescript-cheatsheet-cn) | +[Contribuir](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet-es/blob/master/CONTRIBUYENDO.md) | +[Preguntas](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet-es/issues/new) + +
+ +--- + +# Migrando (a TypeScript) Cheatsheet + +This Cheatsheet collates advice and utilities from real case studies of teams moving significant codebases from plain JS or Flow over to TypeScript. It makes no attempt to _convince_ people to do so, but we do collect what few statistics companies offer up after their conversion experience. + +> ⚠️ This Cheatsheet is extremely new and could use all the help we can get. Solid advice, results, and up to date content all welcome. + +## Prerequsite + +Read [TypeScript's official Guide for migrating from JS](https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html) and you should already be familiar with their [React conversion guide](https://github.com/Microsoft/TypeScript-React-Conversion-Guide#typescript-react-conversion-guide). + +## General Conversion approaches + +- Level 0: Don't use TypeScript, use JSDoc + - See our [JSDoc section](#JSDoc) +- Level 1A: Majority JavaScript, increasingly strict TypeScript + - as recommended by [official TS guide](https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html) + - use `allowJS` (Experiences: [clayallsop][clayallsop], [pleo][pleo]) +- Level 1B: Total rename to TypeScript from the start + - "[Just rename all .js files to .ts](https://twitter.com/jamonholmgren/status/1089241726303199232)"? + - use the loosest, bare minimum settings to start with +- Level 2: Strict TypeScript + - use Microsoft's [`dts-gen`](https://github.com/Microsoft/dts-gen) to generate `.d.ts` files for your untyped files. [This SO answer](https://stackoverflow.com/questions/12687779/how-do-you-produce-a-d-ts-typings-definition-file-from-an-existing-javascript) has more on the topic. + - use `declare` keyword for ambient declarations - see [declaration merging](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet#troubleshooting-handbook-bugs-in-official-typings) to patch library declarations inline + +Misc tips/approaches successful companies have taken + +- `@ts-ignore` on compiler errors for libraries with no typedefs +- pick ESLint over TSLint (source: [ESLint](https://eslint.org/blog/2019/01/future-typescript-eslint) and [TS Roadmap](https://github.com/Microsoft/TypeScript/issues/29288)). [You can convert TSlint to ESlint with this tool](https://github.com/typescript-eslint/tslint-to-eslint-config). +- New code must always be written in TypeScript. No exceptions. For existing code: If your task requires you to change JavaScript code, you need to rewrite it. (Source: [Hootsuite][hootsuite]) + +
+ + +Webpack tips + + + +- webpack loader: `awesome-typescript-loader` vs `ts-loader`? (there is some disagreement in community about this - but read [awesome's point of view](https://github.com/s-panferov/awesome-typescript-loader#differences-between-ts-loader)) +- Webpack config: + +``` +module.exports = { + +resolve: { +- extensions: ['.js', '.jsx'] ++ extensions: ['.ts', '.tsx', '.js', '.jsx'] +}, + +// Source maps support ('inline-source-map' also works) +devtool: 'source-map', + +// Add the loader for .ts files. +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' + }] +} +}; +``` + +Special note on `ts-loader` and 3rd party libraries: https://twitter.com/acemarke/status/1091150384184229888 + +
+ +## JSDoc + +- https://github.com/Microsoft/TypeScript/wiki/JsDoc-support-in-JavaScript +- webpack's codebase uses JSDoc with linting by TS https://twitter.com/TheLarkInn/status/984479953927327744 (some crazy hack: https://twitter.com/thelarkinn/status/996475530944823296) + +Problems to be aware of: + +- `object` is converted to `any` for some reason. +- If you have an error in the jsdoc, you get no warning/error. TS just silently doesn't type annotate the function. +- [casting can be verbose](https://twitter.com/bahmutov/status/1089229349637754880) + +(_thanks [Gil Tayar](https://twitter.com/giltayar/status/1089228919260221441) and [Gleb Bahmutov](https://twitter.com/bahmutov/status/1089229196247908353) for sharing above commentary_) + +## From JS + +### Automated JS to TS Conversion + +- [TypeStat](https://github.com/JoshuaKGoldberg/TypeStat) ([used by Codecademy](https://mobile.twitter.com/JoshuaKGoldberg/status/1159090281314160640)) +- [TypeWiz](https://github.com/urish/typewiz) +- [js-to-ts-converter](https://github.com/gregjacobs/js-to-ts-converter) + +### Manual JS to TS Conversion + +the "Just Renaming" strategy + +- OSX/Linux: `find src -name "*.js" -exec sh -c 'mv"$0" "${0%.js}.tsx"' {} \;` + +You can either load typescript files with webpack, or use the `tsc` compiler to compile your TS files to JS side by side. The basic `tsconfig.json` is: + +```json +{ + "compilerOptions": { + "allowJs": true + } +} +``` + +Then you will want to enable it to check JS: + +```json +{ + "compilerOptions": { + "allowJs": true, + "checkJs": true + } +} +``` + +If you have a large codebase and this throws too many errors at once, you can opt out problematic files with `//@ts-nocheck`, or instead turn off `checkJs` and add a `//@ts-check` directive at the top of each regular JS file. + +TypeScript should throw up some egregious errors here which should be easy to fix. + +Once you are done, swallow the red pill by turning off implicit `any`'s: + +```js +{ + "compilerOptions": { + "allowJs": true, + "checkJs": true, + "noImplicitAny": true // or "strict": true + } +} +``` + +This will raise a bunch of type errors and you can start converting files to TS or (optionally) use [JSDoc annotations](https://www.typescriptlang.org/docs/handbook/type-checking-javascript-files.html) in your JS. + +A common practice here is using an ambient TODO type alias for `any` so you can keep track of what you need to come back to: + +```ts +type TODO_TYPEME = any; +export function myFunc(foo: TODO_TYPEME, bar: TODO_TYPEME): number { + // ... +} +``` + +Gradually add [more `strict` mode flags](https://www.typescriptlang.org/docs/handbook/compiler-options.html) like `noImplicitThis`, `strictNullChecks`, and so on until you can eventually just run in full strict mode with no js files left: + +```js +{ + "compilerOptions": { + "strict": true + } +} +``` + +**More resources** + +- [Adopting TypeScript at Scale - AirBnB's conversion story and strategy](https://www.youtube.com/watch?v=P-J9Eg7hJwE) +- [Migrating a `create-react-app`/`react-scripts` app to TypeScript](https://facebook.github.io/create-react-app/docs/adding-typescript) - don't use `react-scripts-ts` +- [Migrating an EJECTED CRA app to TS](https://spin.atomicobject.com/2018/07/04/migrating-cra-typescript/) +- [Lyft's JS to TS migration tool](https://github.com/lyft/react-javascript-to-typescript-transform) (includes PropTypes migration) +- [Hootsuite][hootsuite] +- [Storybook's migration (PR)](https://github.com/storybooks/storybook/issues/5030) +- [How we migrated a 200K+ LOC project to TypeScript and survived to tell the story][coherentlabs] - Coherent Labs - using `grunt-ts`, jQuery and Kendo UI + +Old content that is possibly out of date + +- [Incrementally Migrating JS to TS][clayallsop] (old) +- [Microsoft's TypeScript React Conversion Guide][mstsreactconversionguide] (old) + +## From Flow + +- Try flow2ts: `npx flow2ts` - doesn't work 100% but saves some time ([see this and other tips from @braposo](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/pull/79#issuecomment-458227322) at TravelRepublic) +- [Incremental Migration to TypeScript on a Flowtype codebase][entria] at Entria +- [MemSQL's Studio's migration](https://davidgom.es/porting-30k-lines-of-code-from-flow-to-typescript/) - blogpost with many useful tips +- 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](https://gist.github.com/skovhus/c57367ce6ecbc3f70bb7c80f25727a11) +- [Ecobee's brief experience](https://mobile.twitter.com/alanhietala/status/1104450494754377728) +- [Migrating a 50K SLOC Flow + React Native app to TypeScript](https://blog.usejournal.com/migrating-a-flow-react-native-app-to-typescript-c74c7bceae7d) + +## Results + +- Number of production deploys doubled for [Hootsuite][hootsuite] +- Found accidental globals for [Tiny][tiny] +- Found incorrect function calls for [Tiny][tiny] +- Found rarely used, buggy code that was untested for [Tiny][tiny] + +## Misc migration stories by notable companies and open source + +- [Adopting TypeScript at Scale - AirBnB's conversion story and strategy](https://www.youtube.com/watch?v=P-J9Eg7hJwE) +- [Lyft](https://eng.lyft.com/typescript-at-lyft-64f0702346ea) +- [Google](http://neugierig.org/software/blog/2018/09/typescript-at-google.html) +- [Tiny][tiny] - [Talk from ForwardJS here](https://www.slideshare.net/tiny/porting-100k-lines-of-code-to-typescript) +- [Slack](https://slack.engineering/typescript-at-slack-a81307fa288d) ([podcast](https://softwareengineeringdaily.com/2017/08/11/typescript-at-slack-with-felix-rieseberg/)) +- [Priceline](https://medium.com/priceline-labs/trying-out-typescript-part-1-15a5267215b9) +- Dropbox - [Talk at React Loop](https://www.youtube.com/watch?v=veXkJq0Z2Qk) + +Open Source + +- [Jest's migration (PR)](https://github.com/facebook/jest/pull/7554#issuecomment-454358729) +- [Expo's migration (issue)](https://github.com/expo/expo/issues/2164) +- [Google Workbox migration](https://github.com/GoogleChrome/workbox/pull/2058) +- [Atlassian's migration (PR)](https://github.com/atlassian/react-beautiful-dnd/issues/982) +- [Yarn's migration (issue)](https://github.com/yarnpkg/yarn/issues/6953) +- [React Native CLI](https://github.com/react-native-community/cli/issues/683) +- [Next.js](https://nextjs.org/blog/next-9) +- [Redux](https://github.com/reduxjs/redux/pull/3536) + +## Links + +[hootsuite]: https://medium.com/hootsuite-engineering/thoughts-on-migrating-to-typescript-5e1a04288202 "Thoughts on migrating to TypeScript" +[clayallsop]: https://medium.com/@clayallsopp/incrementally-migrating-javascript-to-typescript-565020e49c88 "Incrementally Migrating JavaScript to TypeScript" +[pleo]: https://medium.com/pleo/migrating-a-babel-project-to-typescript-af6cd0b451f4 "Migrating a Babel project to TypeScript" +[mstsreactconversionguide]: https://github.com/Microsoft/TypeScript-React-Conversion-Guide "TypeScript React Conversion Guide" +[entria]: https://medium.com/entria/incremental-migration-to-typescript-on-a-flowtype-codebase-515f6490d92d "Incremental Migration to TypeScript on a Flowtype codebase" +[coherentlabs]: https://hashnode.com/post/how-we-migrated-a-200k-loc-project-to-typescript-and-survived-to-tell-the-story-ciyzhikcc0001y253w00n11yb "How we migrated a 200K+ LOC project to TypeScript and survived to tell the story" +[tiny]: https://go.tiny.cloud/blog/benefits-of-gradual-strong-typing-in-javascript/ "Benefits of gradual strong typing in JavaScript" \ No newline at end of file From 9e943782741b4fd494d8c51eb854b16d40f901d5 Mon Sep 17 00:00:00 2001 From: Dante Calderon Date: Sun, 15 Dec 2019 22:21:37 -0500 Subject: [PATCH 2/3] WIP translating MIGRATING.md --- MIGRANDO.md | 31 +++++++++++++++---------------- 1 file changed, 15 insertions(+), 16 deletions(-) diff --git a/MIGRANDO.md b/MIGRANDO.md index 232da77..678a4b4 100644 --- a/MIGRANDO.md +++ b/MIGRANDO.md @@ -27,27 +27,26 @@ # Migrando (a TypeScript) Cheatsheet -This Cheatsheet collates advice and utilities from real case studies of teams moving significant codebases from plain JS or Flow over to TypeScript. It makes no attempt to _convince_ people to do so, but we do collect what few statistics companies offer up after their conversion experience. +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. -> ⚠️ This Cheatsheet is extremely new and could use all the help we can get. Solid advice, results, and up to date content all welcome. +> ⚠️ Este Cheatsheet es extremadamente nuevo y podría usar toda la ayuda que podamos obtener. Consejos sólidos, resultados, y contenido actualizado son bienvenidos. -## Prerequsite +## Prerrequisitos +Lee la [Guía oficial de TypeScript para migrar desde JS](https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html) y también deberías estar familiarizado con la [Guía de conversión de React](https://github.com/Microsoft/TypeScript-React-Conversion-Guide#typescript-react-conversion-guide). -Read [TypeScript's official Guide for migrating from JS](https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html) and you should already be familiar with their [React conversion guide](https://github.com/Microsoft/TypeScript-React-Conversion-Guide#typescript-react-conversion-guide). +## Enfoques de conversión general -## General Conversion approaches - -- Level 0: Don't use TypeScript, use JSDoc - - See our [JSDoc section](#JSDoc) -- Level 1A: Majority JavaScript, increasingly strict TypeScript - - as recommended by [official TS guide](https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html) - - use `allowJS` (Experiences: [clayallsop][clayallsop], [pleo][pleo]) -- Level 1B: Total rename to TypeScript from the start +- Nivel 0: No uses TypeScript, usa JSDoc + - Mira nuestra [seccion de JSDoc](#JSDoc) +- Nivel 1A: Majority JavaScript, increasingly strict TypeScript + - como recomienda la [guía oficial de TS](https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html) + - usa `allowJS` (Experiencias: [clayallsop][clayallsop], [pleo][pleo]) +- Nivel 1B: Renombrar todo a TypeScript desde el principio - "[Just rename all .js files to .ts](https://twitter.com/jamonholmgren/status/1089241726303199232)"? - - use the loosest, bare minimum settings to start with -- Level 2: Strict TypeScript - - use Microsoft's [`dts-gen`](https://github.com/Microsoft/dts-gen) to generate `.d.ts` files for your untyped files. [This SO answer](https://stackoverflow.com/questions/12687779/how-do-you-produce-a-d-ts-typings-definition-file-from-an-existing-javascript) has more on the topic. - - use `declare` keyword for ambient declarations - see [declaration merging](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet#troubleshooting-handbook-bugs-in-official-typings) to patch library declarations inline + - usa lo mas simple, la configuración mas mínima para comenzar +- Nivel 2: TypeScript estricto + - usa [`dts-gen`](https://github.com/Microsoft/dts-gen) de Microsoft para generar archivos `.d.ts` para tus archivos sin tipo. [Esta respuesta de SO](https://stackoverflow.com/questions/12687779/how-do-you-produce-a-d-ts-typings-definition-file-from-an-existing-javascript) tiene mas información sobre el tema. + - usa la palabra clasve `declare` para declaraciones de ambiente - mira la [declaración de fusión](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet#troubleshooting-handbook-bugs-in-official-typings) para parchear declaraciones de biblioteca en línea. Misc tips/approaches successful companies have taken From 53b307a2507f3ce7b59c8a61f01043e1d2791189 Mon Sep 17 00:00:00 2001 From: Dante Calderon Date: Mon, 16 Dec 2019 23:08:27 -0500 Subject: [PATCH 3/3] Add webpack section tranlation --- MIGRANDO.md | 100 ++++++++++++++++++++++++++++------------------------ 1 file changed, 54 insertions(+), 46 deletions(-) diff --git a/MIGRANDO.md b/MIGRANDO.md index 678a4b4..d8aa4fb 100644 --- a/MIGRANDO.md +++ b/MIGRANDO.md @@ -32,13 +32,13 @@ Este Cheatsheet recopila consejos y utilidades de casos de estudios reales de eq > ⚠️ 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 -Lee la [Guía oficial de TypeScript para migrar desde JS](https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html) y también deberías estar familiarizado con la [Guía de conversión de React](https://github.com/Microsoft/TypeScript-React-Conversion-Guide#typescript-react-conversion-guide). +Leer la [Guía oficial de TypeScript para migrar desde JS](https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html) y también deberías estar familiarizado con la [Guía de conversión de React](https://github.com/Microsoft/TypeScript-React-Conversion-Guide#typescript-react-conversion-guide). ## Enfoques de conversión general - Nivel 0: No uses TypeScript, usa JSDoc - Mira nuestra [seccion de JSDoc](#JSDoc) -- Nivel 1A: Majority JavaScript, increasingly strict TypeScript +- Nivel 1A: JavaScript mayoritario, TypeScript cada vez más estricto - como recomienda la [guía oficial de TS](https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html) - usa `allowJS` (Experiencias: [clayallsop][clayallsop], [pleo][pleo]) - Nivel 1B: Renombrar todo a TypeScript desde el principio @@ -48,23 +48,23 @@ Lee la [Guía oficial de TypeScript para migrar desde JS](https://www.typescript - usa [`dts-gen`](https://github.com/Microsoft/dts-gen) de Microsoft para generar archivos `.d.ts` para tus archivos sin tipo. [Esta respuesta de SO](https://stackoverflow.com/questions/12687779/how-do-you-produce-a-d-ts-typings-definition-file-from-an-existing-javascript) tiene mas información sobre el tema. - usa la palabra clasve `declare` para declaraciones de ambiente - mira la [declaración de fusión](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet#troubleshooting-handbook-bugs-in-official-typings) para parchear declaraciones de biblioteca en línea. -Misc tips/approaches successful companies have taken +Varios consejos/enfoques que las empresas exitosas han tomado -- `@ts-ignore` on compiler errors for libraries with no typedefs -- pick ESLint over TSLint (source: [ESLint](https://eslint.org/blog/2019/01/future-typescript-eslint) and [TS Roadmap](https://github.com/Microsoft/TypeScript/issues/29288)). [You can convert TSlint to ESlint with this tool](https://github.com/typescript-eslint/tslint-to-eslint-config). -- New code must always be written in TypeScript. No exceptions. For existing code: If your task requires you to change JavaScript code, you need to rewrite it. (Source: [Hootsuite][hootsuite]) +- `@ts-ignore` en errores del compilador para librerias sin typedefs. +- elije ESLint sobre TSLint (fuente: [ESLint](https://eslint.org/blog/2019/01/future-typescript-eslint) y [TS Roadmap](https://github.com/Microsoft/TypeScript/issues/29288)). [Puedes convertir TSlint a ESlint con esta herramienta](https://github.com/typescript-eslint/tslint-to-eslint-config). +- 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][hootsuite])
-Webpack tips +Consejos para Webpack -- webpack loader: `awesome-typescript-loader` vs `ts-loader`? (there is some disagreement in community about this - but read [awesome's point of view](https://github.com/s-panferov/awesome-typescript-loader#differences-between-ts-loader)) -- Webpack config: +- webpack loader: `awesome-typescript-loader` vs `ts-loader`? (Hay un cierto desacuerdo en la comunidad sobre esto - pero lee [awesome's point of view](https://github.com/s-panferov/awesome-typescript-loader#differences-between-ts-loader)) +- configuración de Webpack: -``` +```js module.exports = { resolve: { @@ -72,10 +72,10 @@ resolve: { + extensions: ['.ts', '.tsx', '.js', '.jsx'] }, -// Source maps support ('inline-source-map' also works) +// Soporte para source maps ('inline-source-map' también funciona) devtool: 'source-map', -// Add the loader for .ts files. +// Añadir el loader para archivos .ts. module: { loaders: [{ - test: /\.jsx?$/, @@ -93,38 +93,38 @@ module: { }; ``` -Special note on `ts-loader` and 3rd party libraries: https://twitter.com/acemarke/status/1091150384184229888 +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 -- webpack's codebase uses JSDoc with linting by TS https://twitter.com/TheLarkInn/status/984479953927327744 (some crazy hack: https://twitter.com/thelarkinn/status/996475530944823296) +- 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) -Problems to be aware of: +Problemas a tener en cuenta: -- `object` is converted to `any` for some reason. -- If you have an error in the jsdoc, you get no warning/error. TS just silently doesn't type annotate the function. -- [casting can be verbose](https://twitter.com/bahmutov/status/1089229349637754880) +- `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](https://twitter.com/bahmutov/status/1089229349637754880) -(_thanks [Gil Tayar](https://twitter.com/giltayar/status/1089228919260221441) and [Gleb Bahmutov](https://twitter.com/bahmutov/status/1089229196247908353) for sharing above commentary_) +(_gracias [Gil Tayar](https://twitter.com/giltayar/status/1089228919260221441) y [Gleb Bahmutov](https://twitter.com/bahmutov/status/1089229196247908353) por compartir el comentario anterior_) -## From JS +## Desde JS -### Automated JS to TS Conversion +### Conversión automatizada de JS a TS -- [TypeStat](https://github.com/JoshuaKGoldberg/TypeStat) ([used by Codecademy](https://mobile.twitter.com/JoshuaKGoldberg/status/1159090281314160640)) +- [TypeStat](https://github.com/JoshuaKGoldberg/TypeStat) ([usado por Codecademy](https://mobile.twitter.com/JoshuaKGoldberg/status/1159090281314160640)) - [TypeWiz](https://github.com/urish/typewiz) - [js-to-ts-converter](https://github.com/gregjacobs/js-to-ts-converter) -### Manual JS to TS Conversion +### Conversión manual de JS a TS -the "Just Renaming" strategy +la estrategia de "Solo renombra" - OSX/Linux: `find src -name "*.js" -exec sh -c 'mv"$0" "${0%.js}.tsx"' {} \;` -You can either load typescript files with webpack, or use the `tsc` compiler to compile your TS files to JS side by side. The basic `tsconfig.json` is: +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: ```json { @@ -134,7 +134,7 @@ You can either load typescript files with webpack, or use the `tsc` compiler to } ``` -Then you will want to enable it to check JS: +Luego querrás habilitarlo para validar JS: ```json { @@ -145,25 +145,26 @@ Then you will want to enable it to check JS: } ``` -If you have a large codebase and this throws too many errors at once, you can opt out problematic files with `//@ts-nocheck`, or instead turn off `checkJs` and add a `//@ts-check` directive at the top of each regular JS file. +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 should throw up some egregious errors here which should be easy to fix. +TypeScript debería arrojar algunos errores atroces aquí que deberían ser fáciles de solucionar. -Once you are done, swallow the red pill by turning off implicit `any`'s: +Una vez que haya terminado, trague la píldora roja apagando los `any` implícitos: ```js { "compilerOptions": { "allowJs": true, "checkJs": true, - "noImplicitAny": true // or "strict": true + "noImplicitAny": true // o "strict": true } } ``` -This will raise a bunch of type errors and you can start converting files to TS or (optionally) use [JSDoc annotations](https://www.typescriptlang.org/docs/handbook/type-checking-javascript-files.html) in your JS. +Esto generará un montón de errores de tipo y puedes comenzar a convertir archivos a TS u (opcionalmente) usar [anotaciones JSDoc](https://www.typescriptlang.org/docs/handbook/type-checking-javascript-files.html) en tu JS. -A common practice here is using an ambient TODO type alias for `any` so you can keep track of what you need to come back to: + +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. ```ts type TODO_TYPEME = any; @@ -172,7 +173,7 @@ export function myFunc(foo: TODO_TYPEME, bar: TODO_TYPEME): number { } ``` -Gradually add [more `strict` mode flags](https://www.typescriptlang.org/docs/handbook/compiler-options.html) like `noImplicitThis`, `strictNullChecks`, and so on until you can eventually just run in full strict mode with no js files left: +Gradualmente agrega [mas banderas de modo `strict`](https://www.typescriptlang.org/docs/handbook/compiler-options.html) como `noImplicitThis`, `strictNullChecks`, y así sucesivamente hasta que finalmente pueda correr por completo en modo estricto sin que queden archivos js: ```js { @@ -182,7 +183,7 @@ Gradually add [more `strict` mode flags](https://www.typescriptlang.org/docs/han } ``` -**More resources** +**Más recursos** - [Adopting TypeScript at Scale - AirBnB's conversion story and strategy](https://www.youtube.com/watch?v=P-J9Eg7hJwE) - [Migrating a `create-react-app`/`react-scripts` app to TypeScript](https://facebook.github.io/create-react-app/docs/adding-typescript) - don't use `react-scripts-ts` @@ -192,29 +193,36 @@ Gradually add [more `strict` mode flags](https://www.typescriptlang.org/docs/han - [Storybook's migration (PR)](https://github.com/storybooks/storybook/issues/5030) - [How we migrated a 200K+ LOC project to TypeScript and survived to tell the story][coherentlabs] - Coherent Labs - using `grunt-ts`, jQuery and Kendo UI -Old content that is possibly out of date +Contenido antiguo que posiblemente esté desactualizado - [Incrementally Migrating JS to TS][clayallsop] (old) - [Microsoft's TypeScript React Conversion Guide][mstsreactconversionguide] (old) -## From Flow +## Desde Flow -- Try flow2ts: `npx flow2ts` - doesn't work 100% but saves some time ([see this and other tips from @braposo](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/pull/79#issuecomment-458227322) at TravelRepublic) +- Try flow2ts: `npx flow2ts` - doesn't work 100% but saves some time ([mira este y otros tips de @braposo](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/pull/79#issuecomment-458227322) at TravelRepublic) - [Incremental Migration to TypeScript on a Flowtype codebase][entria] at Entria -- [MemSQL's Studio's migration](https://davidgom.es/porting-30k-lines-of-code-from-flow-to-typescript/) - blogpost with many useful tips +- [MemSQL's Studio's migration](https://davidgom.es/porting-30k-lines-of-code-from-flow-to-typescript/) - 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](https://gist.github.com/skovhus/c57367ce6ecbc3f70bb7c80f25727a11) - [Ecobee's brief experience](https://mobile.twitter.com/alanhietala/status/1104450494754377728) - [Migrating a 50K SLOC Flow + React Native app to TypeScript](https://blog.usejournal.com/migrating-a-flow-react-native-app-to-typescript-c74c7bceae7d) -## Results +## Resultados + +- El número de despliegues de producción se duplicó para [Hootsuite][hootsuite] +- Se encontraron globals accidentales para [Tiny][tiny] +- Se encontraron llamadas a funciones incorrectas para [Tiny][tiny] +- Se encontró un código de error poco utilizado que no se probó [Tiny][tiny] + +## Estudios Académicos de Migración + +- [To Type or Not to Type: Quantifying Detectable Bugs in JavaScript](http://earlbarr.com/publications/typestudy.pdf) + +> 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%. -- Number of production deploys doubled for [Hootsuite][hootsuite] -- Found accidental globals for [Tiny][tiny] -- Found incorrect function calls for [Tiny][tiny] -- Found rarely used, buggy code that was untested for [Tiny][tiny] +## Diversas historias de migración de compañías notables y fuentes abiertas -## Misc migration stories by notable companies and open source - [Adopting TypeScript at Scale - AirBnB's conversion story and strategy](https://www.youtube.com/watch?v=P-J9Eg7hJwE) - [Lyft](https://eng.lyft.com/typescript-at-lyft-64f0702346ea) @@ -224,7 +232,7 @@ Old content that is possibly out of date - [Priceline](https://medium.com/priceline-labs/trying-out-typescript-part-1-15a5267215b9) - Dropbox - [Talk at React Loop](https://www.youtube.com/watch?v=veXkJq0Z2Qk) -Open Source +Código abierto - [Jest's migration (PR)](https://github.com/facebook/jest/pull/7554#issuecomment-454358729) - [Expo's migration (issue)](https://github.com/expo/expo/issues/2164) @@ -235,7 +243,7 @@ Open Source - [Next.js](https://nextjs.org/blog/next-9) - [Redux](https://github.com/reduxjs/redux/pull/3536) -## Links +## Enlaces [hootsuite]: https://medium.com/hootsuite-engineering/thoughts-on-migrating-to-typescript-5e1a04288202 "Thoughts on migrating to TypeScript" [clayallsop]: https://medium.com/@clayallsopp/incrementally-migrating-javascript-to-typescript-565020e49c88 "Incrementally Migrating JavaScript to TypeScript"