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: MIGRATING.md
+15-10Lines changed: 15 additions & 10 deletions
Original file line number
Diff line number
Diff line change
@@ -4,24 +4,28 @@ This Cheatsheet collates advice and utilities from real case studies of teams mo
4
4
5
5
> ⚠️ This Cheatsheet is extremely new and could use all the help we can get. Solid advice, results, and up to date content all welcome.
6
6
7
+
## Prerequsite
8
+
9
+
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).
10
+
7
11
## General Conversion approaches
8
12
9
13
- Level 0: Don't use TypeScript, use JSDoc
10
14
- See our [JSDoc section](#JSDoc)
11
-
- Level 1: Unstrict TypeScript
12
-
-`"noImplicitAny": false`
13
-
- "[Just rename all .js files to .ts](https://twitter.com/jamonholmgren/status/1089241726303199232)"
14
-
- installing all missing typings with [types-installer](https://www.npmjs.com/package/types-installer)
15
-
- consider using `allowJS`? (Source: [clayallsop][clayallsop], [pleo][pleo])
- as recommended by [official TS guide](https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html)
17
+
- use `allowJS` (Experiences: [clayallsop][clayallsop], [pleo][pleo])
18
+
- Level 1B: Total rename to TypeScript from the start
19
+
- "[Just rename all .js files to .ts](https://twitter.com/jamonholmgren/status/1089241726303199232)"?
20
+
- use the loosest, bare minimum settings to start with
16
21
- Level 2: Strict TypeScript
17
22
- 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.
18
-
- use `declare` keyword for ambient declarations
19
-
23
+
- use `declare` keyword for ambient declarations - see [declaration merging](https://github.com/sw-yx/react-typescript-cheatsheet#troubleshooting-handbook-bugs-in-official-typings) to patch library declarations inline
20
24
21
25
Misc tips/approaches successful companies have taken
22
26
23
27
-`@ts-ignore` on compiler errors for libraries with no typedefs
24
-
- pick ESLint over TSLint ([source](https://eslint.org/blog/2019/01/future-typescript-eslint))
28
+
- 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))
25
29
- 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])
26
30
27
31
@@ -32,7 +36,7 @@ Webpack tips
32
36
</b>
33
37
</summary>
34
38
35
-
- webpack loader: `awesome-typescript-loader` vs `ts-loader`? (there is some disagreement in community about this)
39
+
- 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))
36
40
- Webpack config:
37
41
38
42
```
@@ -64,6 +68,8 @@ module: {
64
68
};
65
69
```
66
70
71
+
Special note on `ts-loader` and 3rd party libraries: https://twitter.com/acemarke/status/1091150384184229888
72
+
67
73
</details>
68
74
69
75
## JSDoc
@@ -88,7 +94,6 @@ the "Just Renaming" strategy
88
94
89
95
More resources
90
96
91
-
-[TypeScript's official Guide for migrating from JS](https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html)
92
97
-[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`
93
98
-[Migrating an EJECTED CRA app to TS](https://spin.atomicobject.com/2018/07/04/migrating-cra-typescript/)
94
99
-[Lyft's JS to TS migration tool](https://github.com/lyft/react-javascript-to-typescript-transform) (includes PropTypes migration)
0 commit comments