0Pricing
TypeScript Academy · レッスン

Declaration、ソースマップ、型のexport

Declarationファイルを生成し、デバッグ用にソースマップを有効にして、型をexportする方法を学びます

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

導入

目標：宣言ファイルの生成、ソースマップの有効化、型の明確なエクスポート方法を学びます。

宣言ファイル

declaration: trueを有効にすると、JSの出力とともに.d.tsファイルが生成されます。

// tsconfig.json
{
  "compilerOptions": {
    "declaration": true,
    "outDir": "dist"
  }
}

emitDeclarationOnly

ライブラリ用に、emitDeclarationOnlyを使って型宣言だけを生成します（JSは生成しません）。

// tsconfig.json
{
  "compilerOptions": {
    "emitDeclarationOnly": true,
    "outDir": "types"
  }
}

ソースマップ

ソースマップを使うと、ブラウザーやNodeでTSをデバッグできます。JSを元のTSコードに対応付ける仕組みです。

// tsconfig.json
{
  "compilerOptions": {
    "sourceMap": true
  }
}

package.jsonのtypes

package.jsonのtypesまたはtypingsフィールドを使って、エントリーポイントとなる宣言ファイルを指定します。

// package.json
{
  "types": "dist/index.d.ts"
}

再エクスポート

公開APIを明確にするため、型を再エクスポートします。利用者向けにはdeclarationと組み合わせます。

// src/index.ts
export type { User, Config } from "./models";
export { createClient } from "./client";

問題

クイックチェック：.d.tsの生成を有効にするコンパイラーオプションはどれでしょうか。

まとめ

まとめ：declarationは.d.tsを生成し、emitDeclarationOnlyは型だけを出力します。sourceMapはデバッグに役立ち、再エクスポートは公開APIの形を整えます。

よくある質問

「Declaration、ソースマップ、型のexport」レッスンは無料ですか？

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

「Declaration、ソースマップ、型のexport」で何を学びますか？

Declarationファイルを生成し、デバッグ用にソースマップを有効にして、型をexportする方法を学びます ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「Declaration、ソースマップ、型のexport」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

  1. tscのemitとnoEmit、バンドラー
  2. Vite / esbuild / SWC / Rollupの基本
  3. Declaration、ソースマップ、型のexport
← TypeScript Academyに戻る