chore(v2): tighten up the TypeScript onboarding (#3244)

* Tighten up the TypeScript onboarding

* Extend the API to cover everything used in the classic theme

* Wrap up internal TS support
This commit is contained in:
Orta Therox 2020-08-17 12:03:21 -04:00 committed by GitHub
parent a4c8a7f55b
commit 33ecc4bb17
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 65 additions and 22 deletions

View file

@ -5,37 +5,22 @@ title: TypeScript Support
## Setup
Docusaurus supports writing and using TypeScript theme components. To start using TypeScript, add `@docusaurus/module-type-aliases` to your project:
Docusaurus supports writing and using TypeScript theme components. To start using TypeScript, add `@docusaurus/module-type-aliases` and some `@types` dependencies to your project:
```bash
npm install --save-dev typescript @docusaurus/module-type-aliases
npm install --save-dev typescript @docusaurus/module-type-aliases @types/react @types/react-router-dom @types/react-helmet @tsconfig/docusaurus
```
Then add `tsconfig.json` to your project root with following content:
Then add `tsconfig.json` to your project root with the following content:
```json title="tsconfig.json"
{
"compilerOptions": {
"allowJs": true,
"esModuleInterop": true,
"jsx": "react",
"lib": ["DOM"],
"noEmit": true,
"noImplicitAny": false
},
"extends": "@tsconfig/docusaurus/tsconfig.json",
"include": ["src/"]
}
```
Docusaurus doesn't use this `tsconfig.json` to compile your TypeScript. It is added just for a nicer Editor experience, although you can choose to run `tsc --noEmit` to type check your code for yourself.
Then add `types.d.ts` in your `src` folder with the following content:
```ts title="src/types.d.ts"
/// <reference types="@docusaurus/module-type-aliases" />
```
This file makes TypeScript recognize various Docusaurus specific webpack aliases like `@theme`, `@docusaurus`, `@generated`.
Docusaurus doesn't use this `tsconfig.json` to compile your project. It is added just for a nicer Editor experience, although you can choose to run `tsc` to type check your code for yourself or on CI.
Now you can start writing TypeScript theme components.