메인 컨텐츠로 이동
Version: 2.0.0-beta.6 🚧

타입스크립트 지원

Docusaurus is written in TypeScript, and provide first-class TypeScript support.

Initialization#

도큐사우루스는 타입스크립트 테마 컴포넌트를 작성하고 사용하는 것을 지원합니다. If the init template provides a Typescript variant, you can directly initialize a site with full TypeScript support by using the --typescript flag.

npx @docusaurus/init@latest init my-website classic --typescript

Below are some guides on how to migrate an existing project to TypeScript.

설치하기#

타입스크립트를 사용하기 위해서는 프로젝트에 @docusaurus/module-type-aliases와 @types 의존성을 추가해주어야 합니다.

npm install --save-dev typescript @docusaurus/module-type-aliases @types/react @types/react-router-dom @types/react-helmet @tsconfig/docusaurus

프로젝트 루트에 아래와 같은 내용으로 작성한 tsconfig.json 파일을 추가합니다.

tsconfig.json
{  "extends": "@tsconfig/docusaurus/tsconfig.json",  "include": ["src/"]}

도큐사우루스에서는 프로젝트 컴파일 시 tsconfig.json 파일을 사용하지는 않습니다. 파일을 추가하면 좀 더 나은 개발 경험을 더할 수 있습니다. 물론 코드를 작성하거나 CI 동작 시 tsc 타입 체크를 할 수 있도록 직접 선택할 수도 있습니다.

이제 타입스크립트 테마 컴포넌트를 작성할 수 있습니다.

Typing the config file#

It is not possible to use a TypeScript config file in Docusaurus, unless you compile it yourself to JavaScript.

We recommend using JSDoc type annotations:

docusaurus.config.js
/** @type {import('@docusaurus/types').Plugin} */function MyPlugin(context, options) {  return {    name: 'my-plugin',  };}
/** @type {import('@docusaurus/types').DocusaurusConfig} */(module.exports = {  title: 'Docusaurus',  tagline: 'Build optimized websites quickly, focus on your content',  organizationName: 'facebook',  projectName: 'docusaurus',  plugins: [MyPlugin],  presets: [    [      '@docusaurus/preset-classic',      /** @type {import('@docusaurus/preset-classic').Options} */      ({        docs: {          path: 'docs',          sidebarPath: 'sidebars.js',        },        blog: {          path: 'blog',          postsPerPage: 5,        },      }),    ],  ],  themeConfig:    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */    ({      colorMode: {        defaultMode: 'dark',      },      navbar: {        hideOnScroll: true,        title: 'Docusaurus',        logo: {          alt: 'Docusaurus Logo',          src: 'img/docusaurus.svg',          srcDark: 'img/docusaurus_keytar.svg',        },      },    }),});
tip

Type annotations are very useful and help your IDE understand the type of config objects!

The best IDEs (VSCode, WebStorm, Intellij...) will provide a nice auto-completion experience.

타입스크립트 테마 컴포넌트 활용하기#

테마에서 타입스크립트 테마 컴포넌트를 지원하기 위해서는 타입스크립트 소스 코드를 얻기 위한 명령어 끝부분에 --typescript 플래그를 추가하기만 하면 됩니다. 예를 들어 다음 명령은 src/theme/Footer 디렉터리 안에 index.tsx, styles.module.css 파일을 생성합니다.

npm run swizzle @docusaurus/theme-classic Footer -- --typescript

이렇게 하면 @docusaurus/theme-classic 테마만이 타입스크립트 테마 컴포넌트를 지원하는 유일한 공식적인 도큐사우루스 테마가 됩니다. 여러분이 만든 도큐사우루스 테마 패키지에서 타입스크립트를 지원하고자 한다면 Lifecycle APIs docs 문서를 참고하세요.