You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: MIGRANDO.md
+54-46
Original file line number
Diff line number
Diff line change
@@ -32,13 +32,13 @@ Este Cheatsheet recopila consejos y utilidades de casos de estudios reales de eq
32
32
> ⚠️ Este Cheatsheet es extremadamente nuevo y podría usar toda la ayuda que podamos obtener. Consejos sólidos, resultados, y contenido actualizado son bienvenidos.
33
33
34
34
## Prerrequisitos
35
-
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).
35
+
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).
36
36
37
37
## Enfoques de conversión general
38
38
39
39
- Nivel 0: No uses TypeScript, usa JSDoc
40
40
- Mira nuestra [seccion de JSDoc](#JSDoc)
41
-
- Nivel 1A: Majority JavaScript, increasingly strict TypeScript
41
+
- Nivel 1A: JavaScript mayoritario, TypeScript cada vez más estricto
42
42
- como recomienda la [guía oficial de TS](https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html)
43
43
- usa `allowJS` (Experiencias: [clayallsop][clayallsop], [pleo][pleo])
44
44
- Nivel 1B: Renombrar todo a TypeScript desde el principio
@@ -48,34 +48,34 @@ Lee la [Guía oficial de TypeScript para migrar desde JS](https://www.typescript
48
48
- 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.
49
49
- 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.
50
50
51
-
Misc tips/approaches successful companies have taken
51
+
Varios consejos/enfoques que las empresas exitosas han tomado
52
52
53
-
-`@ts-ignore`on compiler errors for libraries with no typedefs
54
-
-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).
55
-
-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])
53
+
-`@ts-ignore`en errores del compilador para librerias sin typedefs.
54
+
-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).
55
+
-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])
56
56
57
57
<details>
58
58
<summary>
59
59
<b>
60
-
Webpack tips
60
+
Consejos para Webpack
61
61
</b>
62
62
</summary>
63
63
64
-
- 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))
65
-
-Webpack config:
64
+
- 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))
65
+
-configuración de Webpack:
66
66
67
-
```
67
+
```js
68
68
module.exports= {
69
69
70
70
resolve: {
71
71
- extensions: ['.js', '.jsx']
72
72
+ extensions: ['.ts', '.tsx', '.js', '.jsx']
73
73
},
74
74
75
-
// Source maps support ('inline-source-map' also works)
75
+
//Soporte para source maps ('inline-source-map' también funciona)
76
76
devtool:'source-map',
77
77
78
-
// Add the loader for .ts files.
78
+
//Añadir el loader para archivos .ts.
79
79
module: {
80
80
loaders: [{
81
81
- test:/\.jsx?$/,
@@ -93,38 +93,38 @@ module: {
93
93
};
94
94
```
95
95
96
-
Special note on`ts-loader`and 3rd party libraries: https://twitter.com/acemarke/status/1091150384184229888
96
+
Nota especial sobre`ts-loader`y librerias de terceros: https://twitter.com/acemarke/status/1091150384184229888
-webpack's codebase uses JSDoc with linting by TS https://twitter.com/TheLarkInn/status/984479953927327744 (some crazy hack: https://twitter.com/thelarkinn/status/996475530944823296)
103
+
-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)
104
104
105
-
Problems to be aware of:
105
+
Problemas a tener en cuenta:
106
106
107
-
-`object`is converted to`any`for some reason.
108
-
-If you have an error in the jsdoc, you get no warning/error. TS just silently doesn't type annotate the function.
109
-
-[casting can be verbose](https://twitter.com/bahmutov/status/1089229349637754880)
107
+
-`object`se convierte a`any`por alguna razón.
108
+
-Si tiene un error en el JSDoc, no recibes ningún warning/error. TS just silently doesn't type annotate the function.
109
+
-[El casteo puede ser detallado](https://twitter.com/bahmutov/status/1089229349637754880)
(_gracias[Gil Tayar](https://twitter.com/giltayar/status/1089228919260221441)y[Gleb Bahmutov](https://twitter.com/bahmutov/status/1089229196247908353)por compartir el comentario anterior_)
112
112
113
-
## From JS
113
+
## Desde JS
114
114
115
-
### Automated JS to TS Conversion
115
+
### Conversión automatizada de JS a TS
116
116
117
-
-[TypeStat](https://github.com/JoshuaKGoldberg/TypeStat) ([used by Codecademy](https://mobile.twitter.com/JoshuaKGoldberg/status/1159090281314160640))
117
+
-[TypeStat](https://github.com/JoshuaKGoldberg/TypeStat) ([usado por Codecademy](https://mobile.twitter.com/JoshuaKGoldberg/status/1159090281314160640))
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:
127
+
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:
128
128
129
129
```json
130
130
{
@@ -134,7 +134,7 @@ You can either load typescript files with webpack, or use the `tsc` compiler to
134
134
}
135
135
```
136
136
137
-
Then you will want to enable it to check JS:
137
+
Luego querrás habilitarlo para validar JS:
138
138
139
139
```json
140
140
{
@@ -145,25 +145,26 @@ Then you will want to enable it to check JS:
145
145
}
146
146
```
147
147
148
-
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.
148
+
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.
149
149
150
-
TypeScript should throw up some egregious errors here which should be easy to fix.
150
+
TypeScript debería arrojar algunos errores atroces aquí que deberían ser fáciles de solucionar.
151
151
152
-
Once you are done, swallow the red pill by turning off implicit `any`'s:
152
+
Una vez que haya terminado, trague la píldora roja apagando los `any` implícitos:
153
153
154
154
```js
155
155
{
156
156
"compilerOptions": {
157
157
"allowJs":true,
158
158
"checkJs":true,
159
-
"noImplicitAny":true//or "strict": true
159
+
"noImplicitAny":true//o "strict": true
160
160
}
161
161
}
162
162
```
163
163
164
-
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.
164
+
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.
165
165
166
-
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:
166
+
167
+
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.
167
168
168
169
```ts
169
170
typeTODO_TYPEME=any;
@@ -172,7 +173,7 @@ export function myFunc(foo: TODO_TYPEME, bar: TODO_TYPEME): number {
172
173
}
173
174
```
174
175
175
-
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:
176
+
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:
-[Adopting TypeScript at Scale - AirBnB's conversion story and strategy](https://www.youtube.com/watch?v=P-J9Eg7hJwE)
188
189
-[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`
-[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
194
195
195
-
Old content that is possibly out of date
196
+
Contenido antiguo que posiblemente esté desactualizado
196
197
197
198
-[Incrementally Migrating JS to TS][clayallsop] (old)
- 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)
203
+
- 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)
203
204
-[Incremental Migration to TypeScript on a Flowtype codebase][entria] at Entria
204
-
-[MemSQL's Studio's migration](https://davidgom.es/porting-30k-lines-of-code-from-flow-to-typescript/) - blogpost with many useful tips
205
+
-[MemSQL's Studio's migration](https://davidgom.es/porting-30k-lines-of-code-from-flow-to-typescript/) - blogpost con muchos tips útiles
-[Migrating a 50K SLOC Flow + React Native app to TypeScript](https://blog.usejournal.com/migrating-a-flow-react-native-app-to-typescript-c74c7bceae7d)
209
210
210
-
## Results
211
+
## Resultados
212
+
213
+
- El número de despliegues de producción se duplicó para [Hootsuite][hootsuite]
214
+
- Se encontraron globals accidentales para [Tiny][tiny]
215
+
- Se encontraron llamadas a funciones incorrectas para [Tiny][tiny]
216
+
- Se encontró un código de error poco utilizado que no se probó [Tiny][tiny]
217
+
218
+
## Estudios Académicos de Migración
219
+
220
+
-[To Type or Not to Type: Quantifying Detectable Bugs in JavaScript](http://earlbarr.com/publications/typestudy.pdf)
221
+
222
+
> 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%.
211
223
212
-
- Number of production deploys doubled for [Hootsuite][hootsuite]
213
-
- Found accidental globals for [Tiny][tiny]
214
-
- Found incorrect function calls for [Tiny][tiny]
215
-
- Found rarely used, buggy code that was untested for [Tiny][tiny]
224
+
## Diversas historias de migración de compañías notables y fuentes abiertas
216
225
217
-
## Misc migration stories by notable companies and open source
218
226
219
227
-[Adopting TypeScript at Scale - AirBnB's conversion story and strategy](https://www.youtube.com/watch?v=P-J9Eg7hJwE)
0 commit comments