Skip to content

Commit c276d9f

Browse files
committed
Add missing non-ts-files section
1 parent 87a758f commit c276d9f

File tree

2 files changed

+25
-14
lines changed

2 files changed

+25
-14
lines changed

README.md

Lines changed: 24 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2788,23 +2788,34 @@ You can see examples of these included in the built in type declarations in the
27882788
27892789
<!--START-SECTION:non-ts-files-->
27902790
2791-
# Time to Really Learn TypeScript
2791+
# Troubleshooting Handbook: Globals, Images and other non-TS files
27922792
2793-
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.
2793+
Use [declaration merging](https://www.typescriptlang.org/docs/handbook/declaration-merging.html).
27942794
2795-
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 :)
2795+
If, say, you are using a third party JS script that attaches on to the `window` global, you can extend `Window`:
27962796
2797-
It is worth mentioning some resources to help you get started:
2797+
```ts
2798+
declare global {
2799+
interface Window {
2800+
MyVendorThing: MyVendorType;
2801+
}
2802+
}
2803+
```
27982804
2799-
- Step through the 40+ examples under [the playground's](http://www.typescriptlang.org/play/index.html) Examples section, written by @Orta
2800-
- Anders Hejlsberg's overview of TS: https://www.youtube.com/watch?v=ET4kT88JRXs
2801-
- Marius Schultz: https://blog.mariusschulz.com/series/typescript-evolution with an [Egghead.io course](https://egghead.io/courses/advanced-static-types-in-typescript)
2802-
- Basarat's Deep Dive: https://basarat.gitbook.io/typescript/
2803-
- Axel Rauschmeyer's [Tackling TypeScript](https://exploringjs.com/tackling-ts/)
2804-
- 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`)
2805-
- Learn about [Generics, Conditional types and Mapped types](https://www.youtube.com/watch?v=PJjeHzvi_VQ&feature=youtu.be)
2806-
- Shu Uesugi: [TypeScript for Beginner Programmers](https://ts.chibicode.com/)
2807-
- Here is another [TypeScript Error Guide](https://github.com/threehams/typescript-error-guide/) that you can check for your errors.
2805+
Likewise if you wish to "import" an image or other non TS/TSX file:
2806+
2807+
```ts
2808+
// declaration.d.ts
2809+
// anywhere in your project, NOT the same name as any of your .ts/tsx files
2810+
declare module "*.png";
2811+
2812+
// importing in a tsx file
2813+
import * as logo from "./logo.png";
2814+
```
2815+
2816+
Note that `tsc` cannot bundle these files for you, you will have to use Webpack or Parcel.
2817+
2818+
Related issue: https://github.com/Microsoft/TypeScript-React-Starter/issues/12 and [StackOverflow](https://stackoverflow.com/a/49715468/4216035)
28082819
28092820
<!--END-SECTION:non-ts-files-->
28102821

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)