0Pricing
TypeScript Academy · レッスン

Path AliasとbaseUrl

パスを設定してimportを簡潔にします。

「Path AliasとbaseUrl」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。

ようこそ

パスエイリアスを使うと、深い相対インポートパスを整理できます。設定はtsconfigで行います。

インポートパスの問題

../../../../utilsのような深い相対パスは壊れやすく、読みにくいものです。
import { logger } from '../../../../utils/logger';
import { User } from '../../../models/user';

baseUrl

baseUrlは、相対パスではないインポートを解決する際のルートを設定します。
{ "compilerOptions": { "baseUrl": "./src" } }
// Now you can import from 'utils/logger' directly

pathsエイリアス

pathsは、インポートのプレフィックスをディレクトリの場所に対応付けます。
{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"], "@utils/*": ["src/utils/*"] } } }

パスエイリアスの使用

相対パスの代わりに@プレフィックスを使ってインポートします。
import { logger } from '@/utils/logger';
import { User } from '@/models/user';

バンドラーの設定

パスエイリアスを解決するには、バンドラー（Vite、webpack）も別途設定する必要があります。
// vite.config.ts
import { resolve } from 'path';
export default { resolve: { alias: { '@': resolve(__dirname, 'src') } } };

Nodeのtsconfig-paths

Node.jsでパスエイリアスを解決するには、ts-nodeとともにtsconfig-pathsを使用します。
npm install tsconfig-paths
// tsconfig.json: "ts-node": { "require": ["tsconfig-paths/register"] }

複数のパスマッピング

プロジェクトの各部分に対してエイリアスを定義します。
{ "paths": { "@models/*": ["src/models/*"], "@services/*": ["src/services/*"], "@utils/*": ["src/utils/*"] } }

ワイルドカードパス

*ワイルドカードは、任意のサブパスに一致します。
// '@/*': ['src/*'] maps '@/foo/bar' to 'src/foo/bar'

完全一致のパスエイリアス

特定のモジュールを特定のファイルにエイリアスします。
{ "paths": { "@config": ["src/config/index.ts"], "@types": ["src/types/index.ts"] } }

パスエイリアスとバレルファイル

両方を組み合わせて使用します。パスエイリアスは階層の深さを減らし、バレルファイルはエクスポートを集約します。

確認問題

tsconfigの`baseUrl`オプションは何を設定しますか？

まとめ

パスエイリアスとbaseUrl：重要な概念とパターンを身につけました。

よくある質問

「Path AliasとbaseUrl」レッスンは無料ですか？

はい。「Path AliasとbaseUrl」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。

「Path AliasとbaseUrl」で何を学びますか？

パスを設定してimportを簡潔にします。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

TypeScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。

「Path AliasとbaseUrl」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このTypeScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. strictフラグと有効になる機能
  2. ModuleとTargetの設定
  3. Path AliasとbaseUrl
  4. Incremental BuildとDeclaration File
← TypeScript Academyに戻る