Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 0 additions & 15 deletions .github/ISSUE_TEMPLATE/migrating-cheatsheet.md

This file was deleted.

12 changes: 1 addition & 11 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,6 @@ Cheatsheet for using React with TypeScript.
- It also has miscellaneous tips and tricks for pro users.
- Advice for contributing to DefinitelyTyped.
- The goal is to take _full advantage_ of TypeScript.
- [The Migrating Cheatsheet](https://react-typescript-cheatsheet.netlify.app/docs/migration) helps collate advice for incrementally migrating large codebases from JS or Flow, **from people who have done it**.
- We do not try to convince people to switch, only to help people who have already decided.
- ⚠️This is a new cheatsheet, all assistance is welcome.
- [The HOC Cheatsheet](https://react-typescript-cheatsheet.netlify.app/docs/hoc) specifically teaches people to write HOCs with examples.
- Familiarity with [Generics](https://www.typescriptlang.org/docs/handbook/2/generics.html) is necessary.
- ⚠️This is the newest cheatsheet, all assistance is welcome.
Expand Down Expand Up @@ -2433,8 +2430,6 @@ npm install -g dts-gen
dts-gen -m <your-module>
```

There are other automated JS to TS conversion tools and migration strategies - see [our MIGRATION cheatsheet](https://react-typescript-cheatsheet.netlify.app/docs/migration/from_js).

##### Typing Exported Hooks

Typing Hooks is just like typing pure functions.
Expand Down Expand Up @@ -2540,8 +2535,6 @@ declare module "use-dark-mode" {

In case of typing untyped class components, there's almost no difference in approach except for the fact that after declaring the types, you export the extend the type using `class UntypedClassComponent extends React.Component<UntypedClassComponentProps, any> {}` where `UntypedClassComponentProps` holds the type declaration.

For instance, [sw-yx's Gist on React Router 6 types](https://gist.github.com/sw-yx/37a6a3d248c2d4031801f0d568904df8) implemented a similar method for typing the then untyped RR6.

```ts
declare module "react-router-dom" {
import * as React from 'react';
Expand All @@ -2556,8 +2549,6 @@ declare module "react-router-dom" {
// ...
```

For more information on creating type definitions for class components, you can refer to this [post](https://templecoding.com/blog/2016/03/31/creating-typescript-typings-for-existing-react-components) for reference.

#### Frequent Known Problems with TypeScript

Just a list of stuff that React developers frequently run into, that TS has no solution for. Not necessarily TSX only.
Expand Down Expand Up @@ -2943,7 +2934,7 @@ If you're looking for information on Prettier, check out the [Prettier](https://
9. bangbang checks `if (!!nonboolean)`
10. `!= null` to check for `null` and `undefined`
- [Ultimate React Component Patterns with TypeScript 2.8](https://levelup.gitconnected.com/ultimate-react-component-patterns-with-typescript-2-8-82990c516935)
- [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.
- [Basarat's TypeScript gitbook has a React section](https://basarat.gitbook.io/typescript/tsx/react).
- [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)
- [Sindre Sorhus' TypeScript Style Guide](https://github.com/sindresorhus/typescript-definition-style-guide)
- [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.
Expand Down Expand Up @@ -2993,7 +2984,6 @@ It is worth mentioning some resources to help you get started:
- Anders Hejlsberg's overview of TS: https://www.youtube.com/watch?v=ET4kT88JRXs
- Marius Schultz: https://blog.mariusschulz.com/series/typescript-evolution with an [Egghead.io course](https://egghead.io/courses/advanced-static-types-in-typescript)
- Basarat's Deep Dive: https://basarat.gitbook.io/typescript/
- Axel Rauschmeyer's [Tackling TypeScript](https://exploringjs.com/tackling-ts/)
- 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`)
- Learn about [Generics, Conditional types and Mapped types](https://www.youtube.com/watch?v=PJjeHzvi_VQ&feature=youtu.be)
- Shu Uesugi: [TypeScript for Beginner Programmers](https://ts.chibicode.com/)
Expand Down
3 changes: 1 addition & 2 deletions docs/advanced/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,9 @@ title: Advanced Cheatsheet

**Creating React + TypeScript Libraries**

The best tool for creating React + TS libraries right now is [`tsdx`](https://github.com/palmerhq/tsdx). Run `npx tsdx create` and select the "react" option. You can view [the React User Guide](https://github.com/palmerhq/tsdx/issues/5) for a few tips on React+TS library best practices and optimizations for production.
The best tool for creating React + TS libraries right now is [`tsdx`](https://github.com/palmerhq/tsdx). Run `npx tsdx create` and select the "react" option.

Another option is [Rollpkg](https://github.com/rafgraph/rollpkg), which uses Rollup and the TypeScript compiler (not Babel) to create packages. It includes default configs for TypeScript, Prettier, ESLint, and Jest (setup for use with React), as well as Bundlephobia package stats for each build.

- Be sure to also check [`basarat`'s guide](https://basarat.gitbooks.io/typescript/content/docs/quick/library.html) for library tsconfig settings.
- Alec Larson: [The best Rollup config for TypeScript libraries](https://gist.github.com/aleclarson/9900ed2a9a3119d865286b218e14d226)
- From the Angular world, check out https://github.com/bitjson/typescript-starter
24 changes: 2 additions & 22 deletions docs/advanced/misc-concerns.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export class MyComponent extends React.Component<MyComponentProps, {}> {

## Commenting Components

TypeScript uses [TSDoc](https://github.com/Microsoft/tsdoc), a variant of JSDoc for TypeScript. This is very handy for writing component libraries and having useful descriptions pop up in autocomplete and other tooling (like the [Docz PropsTable](https://www.docz.site/docs/components-api#propstable)). The main thing to remember is to use `/** YOUR_COMMENT_HERE */` syntax in the line just above whatever you're annotating.
TypeScript uses [TSDoc](https://github.com/Microsoft/tsdoc), a variant of JSDoc for TypeScript. This is very handy for writing component libraries and having useful descriptions pop up in autocomplete and other tooling. The main thing to remember is to use `/** YOUR_COMMENT_HERE */` syntax in the line just above whatever you're annotating.

```tsx
interface MyComponentProps {
Expand Down Expand Up @@ -87,26 +87,6 @@ For developing with Storybook, read the docs I wrote over here: [https://storybo

[Something to add? File an issue](https://github.com/typescript-cheatsheets/react/issues/new).

## Migrating From Flow

You should check out large projects that are migrating from flow to pick up concerns and tips:

- [Jest](https://github.com/facebook/jest/pull/7554)
- [Expo](https://github.com/expo/expo/issues/2164)
- [React-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd/issues/982)
- [Storybook](https://github.com/storybooks/storybook/issues/5030)
- [VueJS](https://medium.com/the-vue-point/plans-for-the-next-iteration-of-vue-js-777ffea6fabf)

Useful libraries:

- [https://github.com/bcherny/flow-to-typescript](https://github.com/bcherny/flow-to-typescript)
- [https://github.com/Khan/flow-to-ts](https://github.com/Khan/flow-to-ts)
- [https://github.com/piotrwitek/utility-types](https://github.com/piotrwitek/utility-types)

If you have specific advice in this area, please file a PR!

[Something to add? File an issue](https://github.com/typescript-cheatsheets/react/issues/new).

## Prettier

There isn't any real secret to Prettier for TypeScript. But its a great idea to run prettier on every commit!
Expand Down Expand Up @@ -144,7 +124,7 @@ $ yarn add -D prettier husky lint-staged

Integrating this with ESlint may be a problem. We haven't written much on this yet, please contribute if you have a strong opinion. [Here's a helpful gist.](https://gist.github.com/JirkaVebr/519c7597517e4ba756d5b89e7cb4cc0e)

For library authors, this is set up for you in [tsdx](https://github.com/palmerhq/tsdx/pull/45/files). You may also wish to check out the newer https://ts-engine.dev/ project.
For library authors, this is set up for you in [tsdx](https://github.com/palmerhq/tsdx/pull/45/files).

## Testing

Expand Down
4 changes: 1 addition & 3 deletions docs/advanced/patterns_by_version.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ _TypeScript version guides before 2.9 are unwritten, please feel free to send a

## TypeScript 2.9

[[Release Notes](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html) | [Blog Post](https://blogs.msdn.microsoft.com/typescript/2018/05/31/announcing-typescript-2-9/)]
[[Release Notes](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html)]

1. Type arguments for tagged template strings (e.g. `styled-components`):

Expand Down Expand Up @@ -568,5 +568,3 @@ nothing react specific
## TypeScript Roadmap and Spec

https://github.com/Microsoft/TypeScript/wiki/Roadmap

Did you also know you can read the TypeScript spec online?? https://github.com/microsoft/TypeScript/blob/master/doc/spec-ARCHIVED.md
2 changes: 0 additions & 2 deletions docs/advanced/utility-types.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,6 @@ We will assume knowledge of utility types covered in the sister project [`typesc

If you intend to maintain a large TS codebase/a nontrivial React+TS library, **we strongly recommend exploring these utilities** so that you don't reinvent the wheel and/or lose sanity trying to do so. Studying their code can also teach you a lot of advanced TS that is not covered here.

I also recommend having a good working knowledge of how to construct the inbuilt utility types from scratch. See [Dr. Rauschmayer's guide](https://2ality.com/2020/06/computing-with-types.html) for a concise introduction.

A level of comfort with **generic types** is therefore required. Here are some helpful resources:

- https://ts.chibicode.com/generics/
1 change: 0 additions & 1 deletion docs/basic/recommended/codebases.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ sidebar_label: Codebases
Older but still worth checking:

- https://bitbucket.org/atlassian/atlaskit-mk-2/src/master/
- https://github.com/contiamo/operational-ui

React Boilerplates:

Expand Down
2 changes: 1 addition & 1 deletion docs/basic/recommended/resources.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ sidebar_label: Other resources
9. bangbang checks `if (!!nonboolean)`
10. `!= null` to check for `null` and `undefined`
- [Ultimate React Component Patterns with TypeScript 2.8](https://levelup.gitconnected.com/ultimate-react-component-patterns-with-typescript-2-8-82990c516935)
- [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.
- [Basarat's TypeScript gitbook has a React section](https://basarat.gitbook.io/typescript/tsx/react).
- [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)
- [Sindre Sorhus' TypeScript Style Guide](https://github.com/sindresorhus/typescript-definition-style-guide)
- [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.
Expand Down
1 change: 0 additions & 1 deletion docs/basic/troubleshooting/learn-ts.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ It is worth mentioning some resources to help you get started:
- Anders Hejlsberg's overview of TS: https://www.youtube.com/watch?v=ET4kT88JRXs
- Marius Schultz: https://blog.mariusschulz.com/series/typescript-evolution with an [Egghead.io course](https://egghead.io/courses/advanced-static-types-in-typescript)
- Basarat's Deep Dive: https://basarat.gitbook.io/typescript/
- Axel Rauschmeyer's [Tackling TypeScript](https://exploringjs.com/tackling-ts/)
- 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`)
- Learn about [Generics, Conditional types and Mapped types](https://www.youtube.com/watch?v=PJjeHzvi_VQ&feature=youtu.be)
- Shu Uesugi: [TypeScript for Beginner Programmers](https://ts.chibicode.com/)
Expand Down
6 changes: 0 additions & 6 deletions docs/basic/troubleshooting/types.md
Original file line number Diff line number Diff line change
Expand Up @@ -413,8 +413,6 @@ npm install -g dts-gen
dts-gen -m <your-module>
```

There are other automated JS to TS conversion tools and migration strategies - see [our MIGRATION cheatsheet](https://react-typescript-cheatsheet.netlify.app/docs/migration/from_js).

### Typing Exported Hooks

Typing Hooks is just like typing pure functions.
Expand Down Expand Up @@ -520,8 +518,6 @@ declare module "use-dark-mode" {

In case of typing untyped class components, there's almost no difference in approach except for the fact that after declaring the types, you export the extend the type using `class UntypedClassComponent extends React.Component<UntypedClassComponentProps, any> {}` where `UntypedClassComponentProps` holds the type declaration.

For instance, [sw-yx's Gist on React Router 6 types](https://gist.github.com/sw-yx/37a6a3d248c2d4031801f0d568904df8) implemented a similar method for typing the then untyped RR6.

```ts
declare module "react-router-dom" {
import * as React from 'react';
Expand All @@ -536,8 +532,6 @@ declare module "react-router-dom" {
// ...
```

For more information on creating type definitions for class components, you can refer to this [post](https://templecoding.com/blog/2016/03/31/creating-typescript-typings-for-existing-react-components) for reference.

## Frequent Known Problems with TypeScript

Just a list of stuff that React developers frequently run into, that TS has no solution for. Not necessarily TSX only.
Expand Down
15 changes: 0 additions & 15 deletions docs/migration/from-flow.md

This file was deleted.

Loading
Loading