Skip to content

Commit adfc093

Browse files
authored
Fix duplicated/missing sections (#512)
* Add missing non-ts-files section * Remove duplicate resources section
1 parent 5bd3043 commit adfc093

File tree

2 files changed

+40
-51
lines changed

2 files changed

+40
-51
lines changed

README.md

Lines changed: 39 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -2787,60 +2787,36 @@ You can see examples of these included in the built in type declarations in the
27872787
27882788
<!--START-SECTION:non-ts-files-->
27892789
2790-
# Time to Really Learn TypeScript
2790+
# Troubleshooting Handbook: Globals, Images and other non-TS files
27912791
2792-
Believe it or not, we have only barely introduced TypeScript here in this cheatsheet. If you are still facing TypeScript troubleshooting issues, it is likely that your understanding of TS is still too superficial.
2792+
Use [declaration merging](https://www.typescriptlang.org/docs/handbook/declaration-merging.html).
27932793
2794-
There is a whole world of generic type logic that you will eventually get into, however it becomes far less dealing with React than just getting good at TypeScript so it is out of scope here. But at least you can get productive in React now :)
2794+
If, say, you are using a third party JS script that attaches on to the `window` global, you can extend `Window`:
27952795
2796-
It is worth mentioning some resources to help you get started:
2796+
```ts
2797+
declare global {
2798+
interface Window {
2799+
MyVendorThing: MyVendorType;
2800+
}
2801+
}
2802+
```
27972803
2798-
- Step through the 40+ examples under [the playground's](http://www.typescriptlang.org/play/index.html) Examples section, written by @Orta
2799-
- Anders Hejlsberg's overview of TS: https://www.youtube.com/watch?v=ET4kT88JRXs
2800-
- Marius Schultz: https://blog.mariusschulz.com/series/typescript-evolution with an [Egghead.io course](https://egghead.io/courses/advanced-static-types-in-typescript)
2801-
- Basarat's Deep Dive: https://basarat.gitbook.io/typescript/
2802-
- Axel Rauschmeyer's [Tackling TypeScript](https://exploringjs.com/tackling-ts/)
2803-
- Rares Matei: [Egghead.io course](https://egghead.io/courses/practical-advanced-typescript)'s advanced TypeScript course on Egghead.io is great for newer typescript features and practical type logic applications (e.g. recursively making all properties of a type `readonly`)
2804-
- Learn about [Generics, Conditional types and Mapped types](https://www.youtube.com/watch?v=PJjeHzvi_VQ&feature=youtu.be)
2805-
- Shu Uesugi: [TypeScript for Beginner Programmers](https://ts.chibicode.com/)
2806-
- Here is another [TypeScript Error Guide](https://github.com/threehams/typescript-error-guide/) that you can check for your errors.
2804+
Likewise if you wish to "import" an image or other non TS/TSX file:
28072805
2808-
<!--END-SECTION:non-ts-files-->
2806+
```ts
2807+
// declaration.d.ts
2808+
// anywhere in your project, NOT the same name as any of your .ts/tsx files
2809+
declare module "*.png";
28092810

2810-
<!--START-SECTION:resources-->
2811+
// importing in a tsx file
2812+
import * as logo from "./logo.png";
2813+
```
28112814
2812-
# Other React + TypeScript resources
2815+
Note that `tsc` cannot bundle these files for you, you will have to use Webpack or Parcel.
28132816
2814-
- me! <https://twitter.com/swyx>
2815-
- https://www.freecodecamp.org/news/how-to-build-a-todo-app-with-react-typescript-nodejs-and-mongodb/
2816-
- <https://github.com/piotrwitek/react-redux-typescript-guide> - **HIGHLY HIGHLY RECOMMENDED**, i wrote this repo before knowing about this one, this has a lot of stuff I don't cover, including **REDUX** and **JEST**.
2817-
- [10 Bad TypeScript Habits](https://startup-cto.net/10-bad-typescript-habits-to-break-this-year/):
2818-
1. not using `"strict": true`
2819-
2. using `||` for default values when we have `??`
2820-
3. Using `any` instead of `unknown` for API responses
2821-
4. using `as` assertion instead of Type Guards (`function isFoo(obj: unknown): obj is Foo {}`)
2822-
5. `as any` in tests
2823-
6. Marking optional properties instead of modeling which combinations exist by extending interfaces
2824-
7. One letter generics
2825-
8. Non-boolean `if (nonboolean)` checks
2826-
9. bangbang checks `if (!!nonboolean)`
2827-
10. `!= null` to check for `null` and `undefined`
2828-
- [Ultimate React Component Patterns with TypeScript 2.8](https://levelup.gitconnected.com/ultimate-react-component-patterns-with-typescript-2-8-82990c516935)
2829-
- [Basarat's TypeScript gitbook has a React section](https://basarat.gitbook.io/typescript/tsx/react) with an [Egghead.io course](https://egghead.io/courses/use-typescript-to-develop-react-applications) as well.
2830-
- [Palmer Group's TypeScript + React Guidelines](https://github.com/palmerhq/typescript) as well as Jared's other work like [disco.chat](https://github.com/jaredpalmer/disco.chat)
2831-
- [Sindre Sorhus' TypeScript Style Guide](https://github.com/sindresorhus/typescript-definition-style-guide)
2832-
- [TypeScript React Starter Template by Microsoft](https://github.com/Microsoft/TypeScript-React-Starter) A starter template for TypeScript and React with a detailed README describing how to use the two together. Note: this doesn't seem to be frequently updated anymore.
2833-
- [Steve Kinney's React and TypeScript course on Frontend Masters (paid)](https://frontendmasters.com/courses/react-typescript/)
2834-
- [Brian Holt's Intermediate React course on Frontend Masters (paid)](https://frontendmasters.com/courses/intermediate-react/converting-the-app-to-typescript/) - Converting App To TypeScript Section
2835-
- [Mike North's Production TypeScript course on Frontend Masters (paid)](https://frontendmasters.com/courses/production-typescript/)
2836-
- [TSX Guide](https://jenil.github.io/chota/) by [gojutin](https://github.com/gojutin/www.tsx.guide)
2837-
- TypeScript conversion:
2838-
- [Lyft's React-To-TypeScript conversion CLI](https://github.com/lyft/react-javascript-to-typescript-transform)
2839-
- [Gustav Wengel's blogpost - converting a React codebase to TypeScript](http://www.gustavwengel.dk/converting-typescript-to-javascript-part-1)
2840-
- [Microsoft React TypeScript conversion guide](https://github.com/Microsoft/TypeScript-React-Conversion-Guide#typescript-react-conversion-guide)
2841-
- [You?](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/issues/new).
2817+
Related issue: https://github.com/Microsoft/TypeScript-React-Starter/issues/12 and [StackOverflow](https://stackoverflow.com/a/49715468/4216035)
28422818
2843-
<!--END-SECTION:resources-->
2819+
<!--END-SECTION:non-ts-files-->
28442820
28452821
<!--START-SECTION:editor-integration-->
28462822
@@ -2976,27 +2952,40 @@ If you're looking for information on Prettier, check out the [Prettier](https://
29762952
29772953
<!--END-SECTION:linting-->
29782954
2979-
<!--START-SECTION:other-resources-->
2955+
<!--START-SECTION:resources-->
29802956
29812957
# Other React + TypeScript resources
29822958
29832959
- me! <https://twitter.com/swyx>
2960+
- https://www.freecodecamp.org/news/how-to-build-a-todo-app-with-react-typescript-nodejs-and-mongodb/
29842961
- <https://github.com/piotrwitek/react-redux-typescript-guide> - **HIGHLY HIGHLY RECOMMENDED**, i wrote this repo before knowing about this one, this has a lot of stuff I don't cover, including **REDUX** and **JEST**.
2962+
- [10 Bad TypeScript Habits](https://startup-cto.net/10-bad-typescript-habits-to-break-this-year/):
2963+
1. not using `"strict": true`
2964+
2. using `||` for default values when we have `??`
2965+
3. Using `any` instead of `unknown` for API responses
2966+
4. using `as` assertion instead of Type Guards (`function isFoo(obj: unknown): obj is Foo {}`)
2967+
5. `as any` in tests
2968+
6. Marking optional properties instead of modeling which combinations exist by extending interfaces
2969+
7. One letter generics
2970+
8. Non-boolean `if (nonboolean)` checks
2971+
9. bangbang checks `if (!!nonboolean)`
2972+
10. `!= null` to check for `null` and `undefined`
29852973
- [Ultimate React Component Patterns with TypeScript 2.8](https://levelup.gitconnected.com/ultimate-react-component-patterns-with-typescript-2-8-82990c516935)
29862974
- [Basarat's TypeScript gitbook has a React section](https://basarat.gitbook.io/typescript/tsx/react) with an [Egghead.io course](https://egghead.io/courses/use-typescript-to-develop-react-applications) as well.
29872975
- [Palmer Group's TypeScript + React Guidelines](https://github.com/palmerhq/typescript) as well as Jared's other work like [disco.chat](https://github.com/jaredpalmer/disco.chat)
2988-
- [Stefan Baumgartner's TypeScript + React Guide](https://fettblog.eu/typescript-react), which serves as a side-by-side guide to the official docs with extra articles on styling, custom hooks and patterns
29892976
- [Sindre Sorhus' TypeScript Style Guide](https://github.com/sindresorhus/typescript-definition-style-guide)
2990-
- [TypeScript React Starter Template by Microsoft](https://github.com/Microsoft/TypeScript-React-Starter) A starter template for TypeScript and React with a detailed README describing how to use the two together. Note: this doesnt seem to be frequently updated anymore.
2977+
- [TypeScript React Starter Template by Microsoft](https://github.com/Microsoft/TypeScript-React-Starter) A starter template for TypeScript and React with a detailed README describing how to use the two together. Note: this doesn't seem to be frequently updated anymore.
2978+
- [Steve Kinney's React and TypeScript course on Frontend Masters (paid)](https://frontendmasters.com/courses/react-typescript/)
29912979
- [Brian Holt's Intermediate React course on Frontend Masters (paid)](https://frontendmasters.com/courses/intermediate-react/converting-the-app-to-typescript/) - Converting App To TypeScript Section
2980+
- [Mike North's Production TypeScript course on Frontend Masters (paid)](https://frontendmasters.com/courses/production-typescript/)
2981+
- [TSX Guide](https://jenil.github.io/chota/) by [gojutin](https://github.com/gojutin/www.tsx.guide)
29922982
- TypeScript conversion:
29932983
- [Lyft's React-To-TypeScript conversion CLI](https://github.com/lyft/react-javascript-to-typescript-transform)
29942984
- [Gustav Wengel's blogpost - converting a React codebase to TypeScript](http://www.gustavwengel.dk/converting-typescript-to-javascript-part-1)
29952985
- [Microsoft React TypeScript conversion guide](https://github.com/Microsoft/TypeScript-React-Conversion-Guide#typescript-react-conversion-guide)
2996-
- [DefinitelyTyped React source code](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react)
29972986
- [You?](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/issues/new).
29982987
2999-
<!--END-SECTION:other-resources-->
2988+
<!--END-SECTION:resources-->
30002989
30012990
<!--START-SECTION:talks-->
30022991

genReadme.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -263,7 +263,7 @@ async function main(argv) {
263263
from: currentReadme,
264264
to: pendingReadme,
265265
name: "non-ts-files",
266-
path: "docs/basic/troubleshooting/learn-ts.md",
266+
path: "docs/basic/troubleshooting/non-ts-files.md",
267267
headingLevel: 1,
268268
});
269269
pendingReadme = await updateSectionWith({

0 commit comments

Comments
 (0)