tsconfig.json の noEmit
概要
noEmit を true にすると、JavaScript ソースコード、ソースマップ、型定義のファイルはトランスパイルの際、出力しないようになります。Babel や SWC などの別のツールで TypeScript を JavaScript にトランスパイルを行う場合は、tsc でトランスパイルする必要がないため noEmit を有効化します。
Next.js の設定考察
create next-app で作成した Next.js プロジェクトで noEmit は true が設定されています。Next.js ではトランスコンパイルの結果を出力する必要はないため、特段理由がなければ noEmit を有効化しておくことをお勧めします。
{
"compilerOptions": {
"noEmit": true,
},
}
参考
公式の説明はこちらです。
以下が作業リポジトリです。
本記事では動作確認を行います。
この記事の内容
この記事では noEmit が false の場合と true の場合で動作を確認します。Node.js & TypeScript のプロジェクトと Next.js のプロジェクトで動作確認を行います。
Node.js & TypeScriptのプロジェクトで動作確認
TypeScript の簡易プロジェクトを作成し、noEmit が false の場合と true の場合で動作を確認します。
事前環境の構築
動作を作業するための Node.js & TypeScript のプロジェクトを作成します。長いので、折り畳んでおきます。
新規プロジェクト作成と初期環境構築の手順詳細
TypeScript の簡易プロジェクトを作成します。
まず、package.json を作成します。
$ mkdir -p tsconfig-noemit
$ cd tsconfig-noemit
$ pnpm init
下記で package.json を上書きします。ポイントは scripts に 3 つのスクリプトを追加しています。typecheck で型をチェックし、dev でローカルで動作確認します。
{
"name": "tsconfig-noemit",
"version": "1.0.0",
"description": "",
"main": "index.ts",
"scripts": {
"typecheck": "tsc",
"dev": "ts-node index.ts"
},
"keywords": [],
"author": "",
"license": "ISC"
}
TypeScript をインストールします。
$ pnpm install -D typescript ts-node
tsconfig.json を作成します。
$ npx tsc --init
tsconfig.json を作成します。
{
"compilerOptions": {
"target": "es2015",
"module": "commonjs",
"sourceMap": true,
"outDir": "./dist",
"strict": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"esModuleInterop":true
},
"include": ["**/*.ts","**/*.js"],
"exclude": ["node_modules", "dist"]
}
git を初期化します。
$ git init
.gitignore を作成します。
$ touch .gitignore
node_modules
コミットします。
$ git add .
$ git commit -m "feat:初期コミット"
noEmit が false の場合
noEmit が false の場合、トランスパイル時に JavaScript ソースコード、ソースマップ、型定義のファイルが出力されます。
tsconfig.json を作成します。noEmit を無効化します。
{
"compilerOptions": {
"target": "es2015",
"module": "commonjs",
"sourceMap": true,
"outDir": "./dist",
"strict": true,
"skipLibCheck": true,
+ "noEmit": false,
"forceConsistentCasingInFileNames": true,
"esModuleInterop":true
},
"include": ["**/*.ts","**/*.js"],
"exclude": ["node_modules", "dist"]
}
コードを作成します。
$ touch index.ts
const message: string = "Hello, TypeScript!";
console.log(message);
ローカルで動作確認します。
$ pnpm run dev
Hello, TypeScript!
ファイル一覧を確認します。
$ tree -I node_modules
.
├── index.ts
├── package.json
├── pnpm-lock.yaml
└── tsconfig.json
1 directory, 4 files
型チェックします。特にエラーは出ません。が、noEmit が false の場合は tsc 実行時に JavaScript ソースコード index.js、ソースマップ index.js.map が作成されています。
$ pnpm run typecheck
$ tree -I node_modules
.
├── dist
│ ├── index.js
│ └── index.js.map
├── index.ts
├── package.json
├── pnpm-lock.yaml
└── tsconfig.json
2 directories, 6 files
"use strict";
const message = "Hello, TypeScript!";
console.log(message);
//# sourceMappingURL=index.js.map
{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";AAAA,MAAM,OAAO,GAAW,oBAAoB,CAAC;AAC7C,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC"}
コミットします。
$ git add .
$ git commit -m "feat: 初期コミット"
noEmit が true の場合
noEmit が true の場合、トランスパイル時に JavaScript ソースコード、ソースマップ、型定義のファイルが出力されないようになります。
noEmit を有効化します。これで、トランスパイル時にファイルはアウトプットされなくなります。
{
"compilerOptions": {
"target": "es2015",
"module": "commonjs",
"sourceMap": true,
"outDir": "./dist",
"strict": true,
"skipLibCheck": true,
- "noEmit": false,
+ "noEmit": true,
"forceConsistentCasingInFileNames": true,
"esModuleInterop":true
},
"include": ["**/*.ts","**/*.js"],
"exclude": ["node_modules", "dist"]
}
前回のトランスパイル結果を削除します。
$ rm -rf dist
型チェックします。特にエラーは出ません。今回は noEmit が true のため、tsc 実行時に JavaScript ソースコード index.js、ソースマップ index.js.map が作成されません。
$ pnpm run typecheck
$ tree -I node_modules
.
├── index.ts
├── package.json
├── pnpm-lock.yaml
└── tsconfig.json
1 directory, 4 files
コミットします。
$ git add .
$ git commit -m "feat: noEmitを有効化"
Next.jsのプロジェクトで動作確認
Next.js のプロジェクトを作成し、noEmit が false の場合と true の場合で動作を確認します。
事前環境の構築
動作を作業するための Next.js プロジェクトを作成します。長いので、折り畳んでおきます。
新規プロジェクト作成と初期環境構築の手順詳細
プロジェクトを作成
create next-app@latestでプロジェクトを作成します。
$ pnpm create next-app@latest next-tsconfig-noemit --typescript --eslint --import-alias "@/*" --src-dir --use-pnpm --tailwind --app
$ cd next-tsconfig-noemit
Peer Dependenciesの警告を解消
Peer dependenciesの警告が出ている場合は、pnpm installを実行し、警告を解消します。
WARN Issues with peer dependencies found
.
├─┬ autoprefixer 10.0.1
│ └── ✕ unmet peer postcss@^8.1.0: found 8.0.0
├─┬ tailwindcss 3.3.0
│ ├── ✕ unmet peer postcss@^8.0.9: found 8.0.0
│ ├─┬ postcss-js 4.0.1
│ │ └── ✕ unmet peer postcss@^8.4.21: found 8.0.0
│ ├─┬ postcss-load-config 3.1.4
│ │ └── ✕ unmet peer postcss@>=8.0.9: found 8.0.0
│ └─┬ postcss-nested 6.0.0
│ └── ✕ unmet peer postcss@^8.2.14: found 8.0.0
└─┬ next 14.0.4
├── ✕ unmet peer react@^18.2.0: found 18.0.0
└── ✕ unmet peer react-dom@^18.2.0: found 18.0.0
以下を実行することで警告が解消されます。
$ pnpm i -D postcss@latest react@^18.2.0 react-dom@^18.2.0
不要な設定を削除し、プロジェクトを初期化します。
styles
CSSなどを管理するstylesディレクトリを作成します。globals.cssを移動します。
$ mkdir -p src/styles
$ mv src/app/globals.css src/styles/globals.css
globals.cssの内容を以下のように上書きします。
@tailwind base;
@tailwind components;
@tailwind utilities;
初期ページ
app/page.tsxを上書きします。
import { type FC } from "react";
const Home: FC = () => {
return (
<div className="">
<div className="text-lg font-bold">Home</div>
<div>
<span className="text-blue-500">Hello</span>
<span className="text-red-500">World</span>
</div>
</div>
);
};
export default Home;
レイアウト
app/layout.tsxを上書きします。
import "@/styles/globals.css";
import { type FC } from "react";
type RootLayoutProps = {
children: React.ReactNode;
};
export const metadata = {
title: "Sample",
description: "Generated by create next app",
};
const RootLayout: FC<RootLayoutProps> = (props) => {
return (
<html lang="ja">
<body className="">{props.children}</body>
</html>
);
};
export default RootLayout;
TailwindCSSの設定
TailwindCSSの設定（tailwind.config.ts）を上書きします。
import type { Config } from 'tailwindcss'
const config: Config = {
content: [
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
],
plugins: [],
}
export default config
TypeScriptの設定
TypeScriptの初期設定はこちらです。
{
"compilerOptions": {
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./src/*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}
スクリプトを追加
型チェックのスクリプトを追加します。
{
"name": "next-tsconfig-resolvejsonmodule",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
+ "typecheck": "tsc"
},
"dependencies": {
"next": "14.1.4"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"autoprefixer": "^10.0.1",
"eslint": "^8",
"eslint-config-next": "14.1.4",
"postcss": "^8.4.38",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"tailwindcss": "^3.3.0",
"typescript": "^5"
}
}
動作確認
ローカルで動作確認します。
$ pnpm run dev
コミットして作業結果を保存しておきます。
$ git add .
$ git commit -m "feat:新規にプロジェクトを作成し, 作業環境を構築"
noEmit が false の場合
noEmit が false の場合、トランスパイル時に JavaScript ソースコード、ソースマップ、型定義のファイルが出力されます。
tsconfig.json を作成します。noEmit を無効化します。outDir を追加することでトランスパイルの結果を保存するパスを指定できます。
{
"compilerOptions": {
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
- "noEmit": true,
+ "noEmit": false,
+ "outDir": "./dist",
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./src/*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}
型チェックします。特にエラーは出ません。が、トランスパイルの結果である JavaScript ソースコード、ソースマップ、型定義のファイルが outDir に指定された dist へ出力されます。
$ pnpm run typecheck
$ tree dist
dist
├── src
│ └── app
│ ├── layout.jsx
│ └── page.jsx
├── tailwind.config.js
└── tsconfig.tsbuildinfo
3 directories, 4 files
コミットします。
$ git add .
$ git commit -m "feat: noEmitを無効化"
noEmit が true の場合
noEmit が true の場合、トランスパイル時に JavaScript ソースコード、ソースマップ、型定義のファイルが出力されないようになります。
noEmit を有効化します。これで、トランスパイル時にファイルはアウトプットされなくなります。
{
"compilerOptions": {
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"outDir": "./dist",
- "noEmit": false,
+ "noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./src/*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}
前回のトランスパイル結果を削除します。
$ rm -rf dist
型チェックします。特にエラーは出ません。今回は noEmit が true のため、トランスパイルの結果である JavaScript ソースコード、ソースマップ、型定義のファイルは outDir に指定された dist へ出力されません。tsconfig.tsbuildinfo は incremental が true のため出力されます。
$ pnpm run typecheck
$ tree dist
dist
└── tsconfig.tsbuildinfo
1 directory, 1 file
コミットします。
$ git add .
$ git commit -m "feat: noEmitを有効化"
Next.jsの設定考察
create next-app で作成した Next.js プロジェクトで noEmit は true が設定されています。Next.js ではトランスコンパイルの結果を出力する必要はないため、特段理由がなければ noEmit を有効化しておくことをお勧めします。
まとめ
この記事では noEmit が false の場合と true の場合で動作を確認しました。Node.js & TypeScript のプロジェクトと Next.js のプロジェクトで動作確認を行いました。
Discussion