diff --git a/packages/docusaurus-module-type-aliases/package.json b/packages/docusaurus-module-type-aliases/package.json index 3c62f31609..ff9c203a41 100644 --- a/packages/docusaurus-module-type-aliases/package.json +++ b/packages/docusaurus-module-type-aliases/package.json @@ -6,5 +6,10 @@ "publishConfig": { "access": "public" }, + "devDependencies": { + "@types/react": "*", + "@types/react-helmet": "*", + "@types/react-router-dom": "*" + }, "license": "MIT" } diff --git a/packages/docusaurus-module-type-aliases/src/index.d.ts b/packages/docusaurus-module-type-aliases/src/index.d.ts index 13176647d4..2afb4a2030 100644 --- a/packages/docusaurus-module-type-aliases/src/index.d.ts +++ b/packages/docusaurus-module-type-aliases/src/index.d.ts @@ -53,6 +53,42 @@ declare module '@theme-original/*'; declare module '@docusaurus/*'; +declare module '@docusaurus/Head' { + const helmet: typeof import('react-helmet').Helmet; + export default helmet; +} + +declare module '@docusaurus/Link' { + type RRLinkProps = Partial; + type LinkProps = RRLinkProps & { + to?: string; + activeClassName?: string; + isNavLink?: boolean; + }; + const Link: (props: LinkProps) => JSX.Element; + export default Link; +} + +declare module '@docusaurus/router' { + export const Redirect: (props: {to: string}) => import('react').Component; + export function matchPath( + pathname: string, + opts: {path?: string; exact?: boolean; strict?: boolean}, + ): boolean; + export function useLocation(): Location; +} + +declare module '@docusaurus/useDocusaurusContext' { + export default function (): any; +} + +declare module '@docusaurus/useBaseUrl' { + export default function ( + relativePath: string | undefined, + opts?: {absolute?: true; forcePrependBaseUrl?: true}, + ): string; +} + declare module '*.module.css' { const classes: {readonly [key: string]: string}; export default classes; diff --git a/packages/docusaurus/src/client/PendingNavigation.tsx b/packages/docusaurus/src/client/PendingNavigation.tsx index e301d3fd16..2ae8712d8b 100644 --- a/packages/docusaurus/src/client/PendingNavigation.tsx +++ b/packages/docusaurus/src/client/PendingNavigation.tsx @@ -127,4 +127,4 @@ class PendingNavigation extends React.Component { } } -export default withRouter(PendingNavigation); +export default withRouter(PendingNavigation as any) as any; diff --git a/packages/docusaurus/src/client/exports/Link.tsx b/packages/docusaurus/src/client/exports/Link.tsx index 328edd8133..6d28e24eac 100644 --- a/packages/docusaurus/src/client/exports/Link.tsx +++ b/packages/docusaurus/src/client/exports/Link.tsx @@ -142,7 +142,7 @@ function Link({ {...props} onMouseEnter={onMouseEnter} innerRef={handleRef} - to={targetLink} + to={targetLink || ''} // avoid "React does not recognize the `activeClassName` prop on a DOM element" {...(isNavLink && {activeClassName})} /> diff --git a/tsconfig.json b/tsconfig.json index 179d7409ff..d3960479f1 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -5,6 +5,7 @@ "lib": ["es2017","es2019.array", "DOM"], "declaration": true, "declarationMap": true, + "jsx": "react", /* Strict Type-Checking Options */ "strict": true, diff --git a/website/docs/typescript-support.md b/website/docs/typescript-support.md index 52e6696dbc..b23396316a 100644 --- a/website/docs/typescript-support.md +++ b/website/docs/typescript-support.md @@ -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" -/// -``` - -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. diff --git a/yarn.lock b/yarn.lock index f2e174408a..730193aa8a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4120,6 +4120,13 @@ "@types/webpack" "*" "@types/webpack-dev-server" "*" +"@types/react-helmet@*": + version "6.1.0" + resolved "https://registry.yarnpkg.com/@types/react-helmet/-/react-helmet-6.1.0.tgz#af586ed685f4905e2adc7462d1d65ace52beee7a" + integrity sha512-PYRoU1XJFOzQ3BHvWL1T8iDNbRjdMDJMT5hFmZKGbsq09kbSqJy61uwEpTrbTNWDopVphUT34zUSVLK9pjsgYQ== + dependencies: + "@types/react" "*" + "@types/react-helmet@^6.0.0": version "6.0.0" resolved "https://registry.yarnpkg.com/@types/react-helmet/-/react-helmet-6.0.0.tgz#5b74e44a12662ffb12d1c97ee702cf4e220958cf" @@ -4144,6 +4151,15 @@ "@types/react" "*" "@types/react-router" "*" +"@types/react-router-dom@*": + version "5.1.5" + resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.1.5.tgz#7c334a2ea785dbad2b2dcdd83d2cf3d9973da090" + integrity sha512-ArBM4B1g3BWLGbaGvwBGO75GNFbLDUthrDojV2vHLih/Tq8M+tgvY1DSwkuNrPSwdp/GUL93WSEpTZs8nVyJLw== + dependencies: + "@types/history" "*" + "@types/react" "*" + "@types/react-router" "*" + "@types/react-router@*": version "5.1.7" resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-5.1.7.tgz#e9d12ed7dcfc79187e4d36667745b69a5aa11556"