Skip to content

Commit 324dbd8

Browse files
authored
improve the conversion approaches notes abit. still not great :(
1 parent ddf2394 commit 324dbd8

File tree

1 file changed

+15
-10
lines changed

1 file changed

+15
-10
lines changed

MIGRATING.md

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,24 +4,28 @@ This Cheatsheet collates advice and utilities from real case studies of teams mo
44

55
> ⚠️ This Cheatsheet is extremely new and could use all the help we can get. Solid advice, results, and up to date content all welcome.
66
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+
711
## General Conversion approaches
812

913
- Level 0: Don't use TypeScript, use JSDoc
1014
- 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])
15+
- Level 1A: Majority JavaScript, increasingly strict TypeScript
16+
- 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
1621
- Level 2: Strict TypeScript
1722
- 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
2024

2125
Misc tips/approaches successful companies have taken
2226

2327
- `@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))
2529
- 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])
2630

2731

@@ -32,7 +36,7 @@ Webpack tips
3236
</b>
3337
</summary>
3438

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))
3640
- Webpack config:
3741

3842
```
@@ -64,6 +68,8 @@ module: {
6468
};
6569
```
6670

71+
Special note on `ts-loader` and 3rd party libraries: https://twitter.com/acemarke/status/1091150384184229888
72+
6773
</details>
6874

6975
## JSDoc
@@ -88,7 +94,6 @@ the "Just Renaming" strategy
8894

8995
More resources
9096

91-
- [TypeScript's official Guide for migrating from JS](https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html)
9297
- [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`
9398
- [Migrating an EJECTED CRA app to TS](https://spin.atomicobject.com/2018/07/04/migrating-cra-typescript/)
9499
- [Lyft's JS to TS migration tool](https://github.com/lyft/react-javascript-to-typescript-transform) (includes PropTypes migration)

0 commit comments

Comments
 (0)