tscのemitとnoEmit、バンドラー
Viteやwebpackなどのバンドラーを使う場合に、通常のtsc出力と--noEmitモードを比較します
「tscのemitとnoEmit、バンドラー」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン1/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全3レッスンが含まれています。
導入
目標：tsc が JS を出力する仕組み、--noEmit の動作、そしてバンドラーが出力処理を置き換えることが多い理由を学びます。
tsc の出力
デフォルトでは、tsc はコンパイル済みの JS ファイル（オプションで .d.ts も）を outDir に出力します。
// tsconfig.json
{
"compilerOptions": {
"outDir": "dist"
}
}
// Command
npx tsc
// Produces JS + .d.ts in distnoEmit
--noEmit モードでは型をチェックしますが、ファイルの書き込みは行いません。バンドラーが JS を処理するプロジェクトに適しています。
// tsconfig.json
{
"compilerOptions": {
"noEmit": true
}
}
// Command
npx tsc --noEmit
// Only type-checks, no JS outputバンドラー
バンドラー（webpack、Vite、esbuild、SWC）はTS→JSへの変換とアセットの処理を行います。JSを出力するためにtscを使う必要はありません。
CIの設定
一般的なパターンは、CIまたは開発環境でtsc --noEmitを実行し、実際のビルドにはバンドラーを使うことです。
// package.json scripts
{
"scripts": {
"typecheck": "tsc --noEmit",
"dev": "vite"
}
}ハイブリッドモード
バンドラーでJSをビルドする一方、--emitDeclarationOnlyで宣言ファイルを出力します。双方の利点を活かせます。
// Sometimes use both
npx tsc --emitDeclarationOnly # for .d.ts
npx vite build # for bundles問題
クイックチェック：バンドラーを使う場合、なぜtsc --noEmitを実行するのでしょうか。
まとめ
まとめ：tscによる出力はJSを書き出し、--noEmitは型チェックだけを行います。最新の構成では、バンドラー（Vite、webpack）がJSの出力を生成します。
AI チューターと学ぶ TypeScript — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 101
- レッスン
- 352
よくある質問
「tscのemitとnoEmit、バンドラー」レッスンは無料ですか？
はい。「tscのemitとnoEmit、バンドラー」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全3レッスンが含まれています。
「tscのemitとnoEmit、バンドラー」で何を学びますか？
Viteやwebpackなどのバンドラーを使う場合に、通常のtsc出力と--noEmitモードを比較します ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/3です。
「tscのemitとnoEmit、バンドラー」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- tscのemitとnoEmit、バンドラー
- Vite / esbuild / SWC / Rollupの基本
- Declaration、ソースマップ、型のexport