設定ファイル
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
などで起動して確認できれば完了です。