타입스크립트 지원

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

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

Yarn

yarn add --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 타입 체크를 할 수 있도록 직접 선택할 수도 있습니다.

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

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

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

npm

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

Yarn

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

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