設定ファイル
Docz を TypeScript と一緒に使うのは超簡単で設定ファイルのdoczrc.jsに1行追加するだけです。このように、
module.exports = {
title: 'サイトのタイトル',
typescript: true,
};typescript: trueとしましょう。
ページファイル
例えば./button.tsxというファイルでButtonコンポーネントを TypeScript で実装済とします。(必要なものはインストールが必要ですreactやstyled-componentsなど)であれば、.mdxファイルで単に.tsファイルのようにimportして JSX で使うだけです。
./button.tsxなのでbutton.mdxというファイルで作ります。
---
name: Button
path: /atoms/button
---
import {Playground} from 'docz';
import Button from './button';
# Button
{() => }
yarn docz dev --port 4254などで起動して確認できれば完了です。