統合このページを編集

TypeScript

lazarv/react-server はTypeScriptと互換性があり、他のReactプロジェクトと同じようにTypeScriptを使うことができます。ViteとEsbuildを利用してコードをトランスパイルしているため、TypeScriptはこのフレームワークでも動作します。

TypeScriptの設定はすべて tsconfig.json ファイルに保存することができます。TypeScriptの設定方法についてはTypeScript設定ガイドを参照してください。

以下は @lazarv/react-server で使用する tsconfig.json ファイルの基本例です:

./tsconfig.json
{ "compilerOptions": { "strict": true, "module": "ESNext", "moduleResolution": "Bundler", "lib": ["ESNext", "DOM", "DOM.Iterable"], "jsx": "preserve", "types": ["react/experimental", "react-dom/experimental"], "allowSyntheticDefaultImports": true, "baseUrl": "./src", "paths": { "@/*": ["./*"] } }, "include": ["**/*.ts", "**/*.tsx", ".react-server/**/*.ts"], "exclude": ["**/*.js", "**/*.mjs"] }

重要なのは、@lazarv/react-server が実験的な React API を使用するため、React 用の react/experimentalreact-dom/experimental タイプを使用することです。

lazarv/react-server はファイルシステムベースのルーティングを使用します。これは、ファイルシステムがルーティングの真実のソースであることを意味します。新しいファイルを作成すると、新しいルートが作成されます。

これは非常に強力な機能ですが、TypeScriptを使っている場合は扱いにくいかもしれないです。ですが、lazarv/react-server にはこれを手助けする機能が組み込まれています。

.react-server ディレクトリを tsconfig.json ファイルに含めることで、TypeScriptを使ってファイルシステムベースのルーティングを行うことができます。

TypeScriptのパスエイリアスを動作させるには、tsconfig.json ファイルに baseUrlpaths を含める必要があります。

./tsconfig.json
{ "compilerOptions": { "baseUrl": "./src", "paths": { "@/*": ["./*"] } } }

パスのエイリアスを有効にするには、vite.config.js ファイルの resolve.alias に設定項目としてパスを含める必要があります。

./vite.config.mjs
import { defineConfig } from 'vite'; export default defineConfig({ resolve: { alias: { '@/': new URL('./src/', import.meta.url).pathname } } });