TypeScript Versions often introduce new ways to do things; this section helps current users of React + TypeScript upgrade TypeScript versions and explore patterns commonly used by TypeScript + React apps and libraries. This may have duplications with other sections; if you spot any discrepancies, file an issue!
TypeScript version guides before 2.9 are unwritten, please feel free to send a PR! Apart from official TS team communication we also recommend Marius Schulz's blog for version notes. For more TypeScript history, see A Brief History of TypeScript Types and A Brief History of DefinitelyTyped. You may also wish to explore lesser known alternative typings of React like prop-types, om, reason-react, and typed-react.
- Type arguments for tagged template strings (e.g.
- JSX Generics
Helps with typing/using generic components:
- Typed rest parameters for writing arguments of variable length:
- Support for
static defaultPropsin JSX using
For typing API's to force type checks - not specifically React related, however very handy for dealing with API responses:
TODO: blame this change. Don't know what this shouldve done
You can also assert a type, or use a type guard against an
unknown type. This is better than resorting to
- Project References
Project references allow TypeScript projects to depend on other TypeScript projects – specifically, allowing tsconfig.json files to reference other tsconfig.json files. This lets large codebases scale without recompiling every part of the codebase every time, by breaking it up into multiple projects.
In each folder, create a tsconfig.json that includes at least:
and the root
tsconfig.json that references top level subproject:
and you must run
tsc --build or
To save the tsconfig boilerplate, you can use the
- Properties declarations on functions
Attaching properties to functions like this "just works" now:
nothing specifically React related.
nothing specifically React related.
More info on places you can use const assertions.
Higher order type inference from generic constructors
See also Notes from Google upgrading to 3.5
- Optional Chaining
- Nullish Coalescing
YOU SHOULD USUALLY USE
?? WHEREVER YOU NORMALLY USE
|| unless you truly mean falsiness:
- Assertion Functions
You can also assert without a custom function:
You can now add
// @ts-nocheck to the top of TypeScript files! good for migrations.
- Type-Only Imports and Exports
- ECMAScript Private Fields
Not really React specific but ok Bloomberg
export * as nsSyntax
This is ES2020 syntax. Instead of
you can do
not React specific but gj Myles
- JSDoc Property Modifiers
handy for JSDoc users -
@public, @private, @protected, @readonly
- Better Directory Watching on Linux and watchOptions
- “Fast and Loose” Incremental Checking
assumeChangesOnlyAffectDirectDependencies reduces build times for extremely large codebases.
- (minor feature) New
Use this when writing tests you expect to error.
- you’re writing test code where you actually want the type system to error on an operation
- you expect a fix to be coming in fairly quickly and you just need a quick workaround
- you’re in a reasonably-sized project with a proactive team that wants to remove suppression comments as soon affected code is valid again
- you have an a larger project and and new errors have appeared in code with no clear owner
- you are in the middle of an upgrade between two different versions of TypeScript, and a line of code errors in one version but not another.
- you honestly don’t have the time to decide which of these options is better.
>are Now Invalid JSX Text Characters
They were always invalid, but now TypeScript and Babel are enforcing it:
You can convert these in bulk if needed.
It's for custom pragmas with Preact
- Template Literal Types
This is a HUGE feature.
Usecase 1 - Generating string literal types from permutations of other string literal types:
Usecase 2 - Modeling dynaming string literal types:
To make string manipulation easier there are new generics:
You can combine it with the
infer keyword like this:
This feature is extremely flexible, see other usecase ideas here:
This is a new compiler option to offer output inline with React 17 support in general:
TypeScript Roadmap and Spec
Did you also know you can read the TypeScript spec online?? https://github.com/microsoft/TypeScript/blob/master/doc/spec-ARCHIVED.md