From 3677d266f6a3280f4719ff5eb0dee67af1748930 Mon Sep 17 00:00:00 2001 From: swyx Date: Wed, 16 Jan 2019 09:58:09 -0800 Subject: [PATCH 1/5] add @types/react documentation --- ADVANCED.md | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 50 insertions(+) diff --git a/ADVANCED.md b/ADVANCED.md index 52d548c6..b3def50e 100644 --- a/ADVANCED.md +++ b/ADVANCED.md @@ -34,6 +34,7 @@ * [Prettier + TSLint](#prettier--tslint) * [ESLint + TSLint](#eslint--tslint) * [Working with Non-TypeScript Libraries (writing your own index.d.ts)](#working-with-non-typescript-libraries-writing-your-own-indexdts) +- [Section 4: @types/react and @types/react-dom APIs](#section-4-typesreact-and-typesreact-dom-apis) # Section 1: Advanced Guides @@ -653,6 +654,55 @@ We have more discussion and examples [in our issue here](https://github.com/sw-y +# Section 4: @types/react and @types/react-dom APIs + +## `@types/react` + +[Link to `.d.ts`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts) + +**Namespace: React** + +Most Commonly Used Interfaces and Types + +- `Ref` +- `ReactElement` +- `ReactSVGElement` +- `ReactPortal` + +Not Commonly Used but Good to know + +- `DetailedReactHTMLElement` +- `ReactHTMLElement` +- `DOMElement` +- `ClassicElement` +- `ComponentElement` +- `FunctionComponentElement` +- `ClassAttributes` +- `RefAttributes` +- `Attributes` +- `RefObject` + +Don't use/Internal/Deprecated + +- `SFCElement` +- `SFC` +- `ComponentState` +- `LegacyRef` +- `ReactType` + +**Namespace: JSX** + +- to be written + +**Misc** + +- to be written + +## `@types/react-dom` + +To be written + + # My question isn't answered here! - [File an issue](https://github.com/sw-yx/react-typescript-cheatsheet/issues/new). From 5f1f5e16af0be82d060bba4cbcf451f7d43220d0 Mon Sep 17 00:00:00 2001 From: swyx Date: Wed, 16 Jan 2019 13:31:43 -0800 Subject: [PATCH 2/5] update with ferdaber's thoughts --- ADVANCED.md | 55 +++++++++++++++++++++++++++++++---------------------- 1 file changed, 32 insertions(+), 23 deletions(-) diff --git a/ADVANCED.md b/ADVANCED.md index b3def50e..6868dc86 100644 --- a/ADVANCED.md +++ b/ADVANCED.md @@ -656,6 +656,8 @@ We have more discussion and examples [in our issue here](https://github.com/sw-y # Section 4: @types/react and @types/react-dom APIs +The `@types` typings export both "public" types meant for your use as well as "private" types that are for internal use. + ## `@types/react` [Link to `.d.ts`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts) @@ -664,39 +666,46 @@ We have more discussion and examples [in our issue here](https://github.com/sw-y Most Commonly Used Interfaces and Types -- `Ref` -- `ReactElement` -- `ReactSVGElement` -- `ReactPortal` +- `ReactNode` - anything that is renderable *inside* of JSX, this is NOT the same as what can be returned from a component! +- `Component` - base class of all class-based components +- `PureComponent` - base class for all class-based optimized components +- `FC`, `FunctionComponent` - a complete interface for function components, often used to type external components instead of typing your own +- `CSSProperties` - used to type the `css` prop +- all events: used to type event handlers +- all event handlers: used to type event handlers +- all consts: `Children`, `Fragment`, ... are all public and reflect the React runtime namespace Not Commonly Used but Good to know -- `DetailedReactHTMLElement` -- `ReactHTMLElement` -- `DOMElement` -- `ClassicElement` -- `ComponentElement` -- `FunctionComponentElement` -- `ClassAttributes` -- `RefAttributes` -- `Attributes` -- `RefObject` +- `Ref` - used to type `innerRef` +- `ReactType` - used for higher order components or operations on components +- `ComponentType` - used for higher order components where you don't specifically deal with the intrinsic components +- `ReactPortal` - used if you specifically need to type a prop as a portal, otherwise it is part of `ReactNode` +- `ComponentClass` - a complete interface for the produced constructor function of a class declaration that extends `Component`, often used to type external components instead of typing your own +- `JSXElementConstructor` - anything that TypeScript considers to be a valid thing that can go into the opening tag of a JSX expression +- `ComponentProps` - props of a component +- `ComponentPropsWithRef` - props of a component where if it is a class-based component it will replace the `ref` prop with its own instance type +- `ComponentPropsWithoutRef` - props of a component without its `ref` prop +- all methods: `createElement`, `cloneElement`, ... are all public and reflect the React runtime API -Don't use/Internal/Deprecated -- `SFCElement` -- `SFC` -- `ComponentState` -- `LegacyRef` -- `ReactType` +A special note that I discourage the use of most `...Element` types because of how black-boxy `JSX.Element` is. You should almost always assume that anything produced by `React.createElement` is the base type `React.ReactElement`. **Namespace: JSX** -- to be written +- `Element` - the type of any JSX expression +- `LibraryManagedAttributes` - used to resolve static `defaultProps` and `propTypes` with the internal props type of a component +- `IntrinsicElements` - every possible built-in component that can be typed in as a lowercase tag name in JSX -**Misc** +**Don't use/Internal/Deprecated** -- to be written +Anything not listed above are considered internal types and not public. + +- `SFCElement` +- `SFC` +- `ComponentState` +- `LegacyRef` +- `StatelessComponent` ## `@types/react-dom` From a7e6748ac9366800e9ed4fc0c7b81d841c2ea1c2 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Wed, 16 Jan 2019 15:03:46 -0800 Subject: [PATCH 3/5] Update ADVANCED.md Co-Authored-By: sw-yx --- ADVANCED.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ADVANCED.md b/ADVANCED.md index 6868dc86..af51931c 100644 --- a/ADVANCED.md +++ b/ADVANCED.md @@ -670,7 +670,7 @@ Most Commonly Used Interfaces and Types - `Component` - base class of all class-based components - `PureComponent` - base class for all class-based optimized components - `FC`, `FunctionComponent` - a complete interface for function components, often used to type external components instead of typing your own -- `CSSProperties` - used to type the `css` prop +- `CSSProperties` - used to type style objects - all events: used to type event handlers - all event handlers: used to type event handlers - all consts: `Children`, `Fragment`, ... are all public and reflect the React runtime namespace From 9c3df6cebd4c6bc8d44c872e2e7b605afb42b664 Mon Sep 17 00:00:00 2001 From: swyx Date: Wed, 16 Jan 2019 15:07:17 -0800 Subject: [PATCH 4/5] add eps1lon's comment on reactType --- ADVANCED.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/ADVANCED.md b/ADVANCED.md index af51931c..2d30f5e3 100644 --- a/ADVANCED.md +++ b/ADVANCED.md @@ -16,6 +16,7 @@ - [Section 1: Reusable Components/Type Utilities](#section-1-reusable-componentstype-utilities) * [Higher Order Components](#higher-order-components-hocs) * [Render Props](#render-props) + * [`as` props (passing a component to be rendered)](#as-props-passing-a-component-to-be-rendered) * [Types for Conditional Rendering](#types-for-conditional-rendering) * [Omit attribute from a type](#omit-attribute-from-a-type) * [Type Zoo](#type-zoo) @@ -159,6 +160,19 @@ export interface Props { [Something to add? File an issue](https://github.com/sw-yx/react-typescript-cheatsheet/issues/new). +## `as` props (passing a component to be rendered) + +`ReactType` is pretty useful to cover most types that can be passed to createElement e.g. + +```tsx +function PassThrough(props: { as: ReactType }) { + const { as: Component } = props; + + return +} +``` + +[Thanks @eps1lon](https://github.com/sw-yx/react-typescript-cheatsheet/pull/69) for this ## Types for Conditional Rendering From 4625eaad284098a2eba1899116773b66c9517d7e Mon Sep 17 00:00:00 2001 From: swyx Date: Wed, 16 Jan 2019 17:27:33 -0800 Subject: [PATCH 5/5] Update ADVANCED.md --- ADVANCED.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/ADVANCED.md b/ADVANCED.md index 2d30f5e3..a9885abb 100644 --- a/ADVANCED.md +++ b/ADVANCED.md @@ -680,7 +680,7 @@ The `@types` typings export both "public" types meant for your use as well as "p Most Commonly Used Interfaces and Types -- `ReactNode` - anything that is renderable *inside* of JSX, this is NOT the same as what can be returned from a component! +- `ReactNode` - anything that is renderable *inside* of JSX, this is NOT the same as what can be rendered by a component! - `Component` - base class of all class-based components - `PureComponent` - base class for all class-based optimized components - `FC`, `FunctionComponent` - a complete interface for function components, often used to type external components instead of typing your own @@ -702,8 +702,7 @@ Not Commonly Used but Good to know - `ComponentPropsWithoutRef` - props of a component without its `ref` prop - all methods: `createElement`, `cloneElement`, ... are all public and reflect the React runtime API - -A special note that I discourage the use of most `...Element` types because of how black-boxy `JSX.Element` is. You should almost always assume that anything produced by `React.createElement` is the base type `React.ReactElement`. +[@Ferdaber's note](https://github.com/sw-yx/react-typescript-cheatsheet/pull/69): I discourage the use of most `...Element` types because of how black-boxy `JSX.Element` is. You should almost always assume that anything produced by `React.createElement` is the base type `React.ReactElement`. **Namespace: JSX** @@ -713,7 +712,7 @@ A special note that I discourage the use of most `...Element` types because of h **Don't use/Internal/Deprecated** -Anything not listed above are considered internal types and not public. +Anything not listed above is considered an internal type and not public. If you're not sure you can check out the source of `@types/react`. The types are annotated accordingly. - `SFCElement` - `SFC`