😸

tsconfig.json の include

2024/04/08に公開

Next.js

TypeScript

tech

概要

include は TypeScript のコンパイル対象に含めるファイルを指定します。tsconfig.json ファイルを含んでいるディレクトリからの相対パスとして指定します。

include は正規表現を利用してファイルを指定します。正規表現は以下のようなものを指します。

* ゼロ個以上の文字列にマッチ（ディレクトリセパレータは除く）
? 任意の 1 文字にマッチ（ディレクトリセパレータは除く）
** 任意階層の任意ディレクトリにマッチ

簡易例

例えば、以下のようなフォルダ構成があるとします。

$ tree
.
├── lib1
│   └── lib2
│       └── lib3
│           └── arithmetics.ts
├── package.json
├── pnpm-lock.yaml
└── tsconfig.json

include に以下のような値を設定すると、lib1/lib2/lib3/arithmetics.ts がコンパイル対象となります。

lib1/lib2/lib3/arithmetics.ts
lib1/lib2/*/arithmetics.ts
lib1/*/*/arithmetics.ts
lib1/**/arithmetics.ts
*/**/arithmetics.ts
**/arithmetics.ts
**/*.ts

なお、include に以下のような値を設定した場合は lib1/lib2/lib3/arithmetics.ts がコンパイル対象となりません。

arithmetics.ts
lib1/*/arithmetics.ts

Next.js の設定考察

create next-app で作成した Next.js プロジェクトで include が設定されています。必要に応じて変更しましょう。

こちらの例では以下をコンパイル対象としています。

パス	説明
`*/.ts`	TypeScriptファイル
`*/.tsx`	TypeScriptのReactコンポーネントファイル
`*/.cjs`	CommonJSのJavaScriptファイル
`*/.js`	ESModuleのJavaScriptファイル

tsconfig.json

{
  "include": [
    "**/*.ts",
    "**/*.tsx",
    "**/*.cjs",
    "**/*.js",
  ]
}

参考

公式の説明はこちらです。

以下が作業リポジトリです。

この記事の内容

この記事では include の値を指定し動作を確認します。Node.js & TypeScript のプロジェクトと Next.js のプロジェクトで動作確認を行います。

Node.js & TypeScriptのプロジェクトで動作確認

TypeScript の簡易プロジェクトを作成します。include の値を変更しコンパイル対象のファイルの範囲を指定します。ここではコンパイル範囲外のファイルが型チェックされるか、コンパイル範囲内のファイルが型チェックされるかを確認します。

事前環境の構築

動作を作業するための Node.js & TypeScript のプロジェクトを作成します。長いので、折り畳んでおきます。

新規プロジェクト作成と初期環境構築の手順詳細

TypeScript の簡易プロジェクトを作成します。

まず、package.json を作成します。

$ mkdir -p tsconfig-include
$ cd tsconfig-include
$ pnpm init

下記で package.json を上書きします。ポイントは scripts に 3 つのスクリプトを追加しています。typecheck で型をチェックし、dev でローカルで動作確認、build でトランスパイルします。

package.json

{
  "name": "tsconfig-include",
  "version": "1.0.0",
  "description": "",
  "main": "index.ts",
  "scripts": {
    "typecheck": "tsc --noEmit",
    "dev": "ts-node index.ts",
    "build": "tsc"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

TypeScript をインストールします。

$ pnpm install -D typescript ts-node

tsconfig.json を作成します。

$ npx tsc --init

tsconfig.json を作成します。

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

.gitignore

node_modules

コミットします。

$ git add .
$ git commit -m "feat:初期コミット"

`include` に解析対象のファイルを含めない

include の値を変更し、範囲外のファイルが型チェックされないことを確認します。

include を更新します。**/*.ts ファイルを型チェック対象外とします。**/*.ts とは任意のディレクトリにある任意の .ts ファイルを指します。よって、すべて .ts ファイルが型チェック対象外となります。include に指定する相対パスは tsconfig.json ファイルを含んでいるディレクトリを視点とします。

tsconfig.json

{
  "compilerOptions": {
    "target": "es2015",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "./dist",
    "strict": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "esModuleInterop":true
  },
- "include": ["**/*.ts","**/*.js"],
+ "include": ["**/*.js"],
  "exclude": ["node_modules", "dist"]
}

コードを作成します。include の動作確認するために subtract 関数を作成します。見て分かる通り、num2 の型は本来 number とすべきですが string になっています。TypeScript でこの型のエラーを検知できるか確認します。

$ mkdir -p lib1/lib2/lib3/
$ touch lib1/lib2/lib3/arithmetics.ts

lib1/lib2/arithmetics.ts

export const subtract = (num1:number, num2:string) => {
  return num1-num2
}

型チェックするとコンパイル対象のファイルが存在しないというエラーが出ます。

$ pnpm run typecheck

error TS18003: No inputs were found in config file '/Users/hayato94087/Private/tsconfig-include/tsconfig.json'. Specified 'include' paths were '["**/*.js"]' and 'exclude' paths were '["node_modules","dist"]'.

Found 1 error.

現状、include には、lib1/lib2/lib3/arithmetics.ts が解析対象となる相対パスが含まれていないため、型チェックされていません。

tsconfig.json

{
  "include": ["**/*.js"],
  "exclude": ["node_modules", "dist"]
}

コミットします。

$ git add .
$ git commit -m "feat: includeに型チェック対象のファイルを含めない場合に型チェックされないことを確認"

`include` に解析対象のファイルを含める

include の値を変更しコンパイル範囲を修正していきます。

あらためて lib1/lib2/lib3/arithmetics.ts をコンパイル対象とするにはいくつかの方法があります。1.は直接パスを指定する方法、2.は任意のディレクトリにある任意の .ts ファイルを指定する方法です。

include に lib1/lib2/lib3/arithmetics.ts の相対パスを指定する
include に **/*.ts を指定する

検証1

まずはじめに、include に arithmetics.ts を指定します。lib1/lib2/lib3/arithmetics.ts はコンパイル対象外のため、型チェックされません。

tsconfig.json

{
  "compilerOptions": {
    "target": "es2015",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "./dist",
    "strict": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "esModuleInterop":true
  },
- "include": ["**/*.js"],
+ "include": ["arithmetics.ts","**/*.js"],
  "exclude": ["node_modules", "dist"]
}

型チェックすると想定どおり lib1/lib2/lib3/arithmetics.ts はコンパイル対象外となっているため、コンパイル対象のファイルが存在しないというエラーが出ます。

$ pnpm run typecheck

error TS18003: No inputs were found in config file '/Users/hayato94087/Private/tsconfig-include/tsconfig.json'. Specified 'include' paths were '["arithmetics.ts","**/*.js"]' and 'exclude' paths were '["node_modules","dist"]'.

Found 1 error.

検証2

次に、include に lib1/lib2/lib3/arithmetics.ts を指定します。lib1/lib2/lib3/arithmetics.ts はコンパイル対象のため、型チェックはされます。

tsconfig.json

{
  "compilerOptions": {
    "target": "es2015",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "./dist",
    "strict": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "esModuleInterop":true
  },
- "include": ["arithmetics.ts","**/*.js"],
+ "include": ["lib1/lib2/lib3/arithmetics.ts","**/*.js"],
  "exclude": ["node_modules", "dist"]
}

型チェックすると想定どおり lib1/lib2/lib3/arithmetics.ts はコンパイル対象となっているため、型チェックのエラーが出ます。

$ pnpm run typecheck

lib1/lib2/lib3/arithmetics.ts:2:15 - error TS2363: The right-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.

2   return num1-num2
                ~~~~

Found 1 error in lib1/lib2/lib3/arithmetics.ts:2

検証3

次に、include に lib1/lib2/*/arithmetics.ts を指定します。* はディレクトリセパレータを除く任意の文字列にマッチします。lib1/lib2/lib3/arithmetics.ts はコンパイル対象のため、型チェックはされます。

tsconfig.json

{
  "compilerOptions": {
    "target": "es2015",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "./dist",
    "strict": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "esModuleInterop":true
  },
- "include": ["lib1/lib2/lib3/arithmetics.ts","**/*.js"],
+ "include": ["lib1/lib2/*/arithmetics.ts","**/*.js"],
  "exclude": ["node_modules", "dist"]
}

型チェックすると想定どおり lib1/lib2/lib3/arithmetics.ts はコンパイル対象となっているため、型チェックのエラーが出ます。

$ pnpm run typecheck

lib1/lib2/lib3/arithmetics.ts:2:15 - error TS2363: The right-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.

2   return num1-num2
                ~~~~

Found 1 error in lib1/lib2/lib3/arithmetics.ts:2

検証4

次に、include に lib1/*/*/arithmetics.ts を指定します。* はディレクトリセパレータを除く任意の文字列にマッチします。lib1/lib2/lib3/arithmetics.ts がコンパイル対象となります。

tsconfig.json

{
  "compilerOptions": {
    "target": "es2015",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "./dist",
    "strict": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "esModuleInterop":true
  },
- "include": ["lib1/lib2/*/arithmetics.ts","**/*.js"],
+ "include": ["lib1/*/*/arithmetics.ts","**/*.js"],
  "exclude": ["node_modules", "dist"]
}

型チェックすると想定どおり lib1/lib2/lib3/arithmetics.ts はコンパイル対象となっているため、型チェックのエラーが出ます。

$ pnpm run typecheck

lib1/lib2/lib3/arithmetics.ts:2:15 - error TS2363: The right-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.

2   return num1-num2
                ~~~~

Found 1 error in lib1/lib2/lib3/arithmetics.ts:2

検証5

次に、include に lib1/*/arithmetics.ts を指定します。* はディレクトリセパレータを除く任意の文字列にマッチします。lib1/lib2/lib3/arithmetics.ts はコンパイル対象外のため、型チェックされません。

tsconfig.json

{
  "compilerOptions": {
    "target": "es2015",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "./dist",
    "strict": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "esModuleInterop":true
  },
- "include": ["lib1/*/*/arithmetics.ts","**/*.js"],
+ "include": ["lib1/*/arithmetics.ts","**/*.js"],
  "exclude": ["node_modules", "dist"]
}

$ pnpm run typecheck

error TS18003: No inputs were found in config file '/Users/hayato94087/Private/tsconfig-include/tsconfig.json'. Specified 'include' paths were '["lib1/*/arithmetics.ts","**/*.js"]' and 'exclude' paths were '["node_modules","dist"]'.

Found 1 error.

検証6

次に、include に lib1/**/arithmetics.ts を指定します。** はディレクトリセパレータを含む任意の文字列にマッチします。lib1/lib2/lib3/arithmetics.ts はコンパイル対象のため、型チェックされません。

tsconfig.json

{
  "compilerOptions": {
    "target": "es2015",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "./dist",
    "strict": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "esModuleInterop":true
  },
- "include": ["lib1/*/arithmetics.ts","**/*.js"],
+ "include": ["lib1/**/arithmetics.ts","**/*.js"],
  "exclude": ["node_modules", "dist"]
}

型チェックすると想定どおり lib1/lib2/lib3/arithmetics.ts はコンパイル対象となっているため、型チェックのエラーが出ます。

$ pnpm run typecheck

lib1/lib2/lib3/arithmetics.ts:2:15 - error TS2363: The right-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.

2   return num1-num2
                ~~~~

Found 1 error in lib1/lib2/lib3/arithmetics.ts:2

検証7

次に、include に */**/arithmetics.ts を指定します。** はディレクトリセパレータを含む任意の文字列にマッチします。lib1/lib2/lib3/arithmetics.ts はコンパイル対象のため、型チェックされません。

tsconfig.json

{
  "compilerOptions": {
    "target": "es2015",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "./dist",
    "strict": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "esModuleInterop":true
  },
- "include": ["lib1/**/arithmetics.ts","**/*.js"],
+ "include": ["*/**/arithmetics.ts","**/*.js"],
  "exclude": ["node_modules", "dist"]
}

型チェックすると想定どおり lib1/lib2/lib3/arithmetics.ts はコンパイル対象となっているため、型チェックのエラーが出ます。

$ pnpm run typecheck

lib1/lib2/lib3/arithmetics.ts:2:15 - error TS2363: The right-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.

2   return num1-num2
                ~~~~

Found 1 error in lib1/lib2/lib3/arithmetics.ts:2

検証8

次に、include に **/arithmetics.ts を指定します。** はディレクトリセパレータを含む任意の文字列にマッチします。lib1/lib2/lib3/arithmetics.ts はコンパイル対象のため、型チェックされません。

tsconfig.json

{
  "compilerOptions": {
    "target": "es2015",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "./dist",
    "strict": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "esModuleInterop":true
  },
- "include": ["*/**/arithmetics.ts","**/*.js"],
+ "include": ["**/arithmetics.ts","**/*.js"],
  "exclude": ["node_modules", "dist"]
}

型チェックすると想定どおり lib1/lib2/lib3/arithmetics.ts はコンパイル対象となっているため、型チェックのエラーが出ます。

$ pnpm run typecheck

lib1/lib2/lib3/arithmetics.ts:2:15 - error TS2363: The right-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.

2   return num1-num2
                ~~~~

Found 1 error in lib1/lib2/lib3/arithmetics.ts:2

検証9

tsconfig.json

{
  "compilerOptions": {
    "target": "es2015",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "./dist",
    "strict": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "esModuleInterop":true
  },
- "include": ["**/arithmetics.ts","**/*.js"],
+ "include": ["**/*.ts","**/*.js"],
  "exclude": ["node_modules", "dist"]
}

型チェックすると想定どおり lib1/lib2/lib3/arithmetics.ts はコンパイル対象となっているため、型チェックのエラーが出ます。

$ pnpm run typecheck

lib1/lib2/lib3/arithmetics.ts:2:15 - error TS2363: The right-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.

2   return num1-num2
                ~~~~

Found 1 error in lib1/lib2/lib3/arithmetics.ts:2

修正

最後に型チェックのエラーを修正します。以下がエラー内容です。

$ pnpm run typecheck

lib/arithmetics.ts:2:15 - error TS2363: The right-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.

2   return num1-num2
                ~~~~

Found 1 error in lib/arithmetics.ts:2

型エラーを修正します。

lib/arithmetics.ts

-export const subtract = (num1:number, num2:string) => {
+export const subtract = (num1:number, num2:number) => {
  return num1-num2
}

型チェックします。エラーは出ません。

$ pnpm run typecheck

コミットします。

$ git add .
$ git commit -m "feat: includeに型チェック対象のファイルを含める"

Next.jsのプロジェクトで動作確認

Next.js のプロジェクトを作成し、include の値を指定し動作確認します。

事前環境の構築

動作を作業するための Next.js プロジェクトを作成します。長いので、折り畳んでおきます。

新規プロジェクト作成と初期環境構築の手順詳細

プロジェクトを作成

create next-app@latestでプロジェクトを作成します。

$ pnpm create next-app@latest next-tsconfig-include --typescript --eslint --import-alias "@/*" --src-dir --use-pnpm --tailwind --app
$ cd next-tsconfig-include

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の内容を以下のように上書きします。

src/styles/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

初期ページ

app/page.tsxを上書きします。

src/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を上書きします。

src/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）を上書きします。

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の初期設定はこちらです。

tsconfig.json

{
  "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"]
}

スクリプトを追加

型チェックのスクリプトを追加します。

package.json

{
  "name": "next-tsconfig-include",
  "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:新規にプロジェクトを作成し, 作業環境を構築"

`include` に解析対象のファイルを含めない

include の値を変更し、コンパイル対象のファイルの範囲を指定します。ここでは、範囲外のファイルが型チェックされるか、範囲内のファイルが型チェックされるかを確認します。

include を更新します。.ts ファイルを型チェック対象外とします。

tsconfig.json{

{
  "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"],
+ "include": ["next-env.d.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

incremental が true の場合、設定変更がうまく反映されないため tsconfig.tsbuildinfo を削除します。

$ rm -rf tsconfig.tsbuildinfo

$ mkdir -p src/lib
$ touch src/lib/arithmetics.ts

lib/arithmetics.ts

export const subtract = (num1:number, num2:string) => {
  return num1-num2
}

本来、上記のエラーがでるはずですが、src/lib/arithmetics.ts が解析対象外となっているため、エラーは出ません。

$ pnpm run typecheck

コミットします。

$ git add .
$ git commit -m "feat: includeに型チェック対象のファイルを含めない"

`include` に解析対象のファイルを含める

include を更新し、.ts ファイルをコンパイル対象とします。

tsconfig.json

{
  "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", "**/*.tsx", ".next/types/**/*.ts"],
+ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

型チェックします。src/lib/arithmetics.ts が解析対象のため、引数の型が誤っているとエラーが出ます。

$ pnpm run typecheck

src/lib/arithmetics.ts:2:15 - error TS2363: The right-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.

2   return num1-num2
                ~~~~

Found 1 error in src/lib/arithmetics.ts:2

このように、include に指定した範囲が TypeScript のコンパイル対象となっていることが確認できました。

lib/arithmetics.ts

-export const subtract = (num1:number, num2:string) => {
+export const subtract = (num1:number, num2:number) => {
 return num1-num2
}

型チェックします。エラーは出ません。

$ pnpm run typecheck

コミットします。

$ git add .
$ git commit -m "feat: includeに型チェック対象のファイルを含める"

Next.jsの設定考察

create next-app で作成した Next.js プロジェクトで include が設定されています。必要に応じて変更しましょう。

こちらの例では以下をコンパイル対象としています。

パス	説明
`*/.ts`	TypeScriptファイル
`*/.tsx`	TypeScriptのReactコンポーネントファイル
`*/.cjs`	CommonJSのJavaScriptファイル
`*/.js`	ESModuleのJavaScriptファイル

tsconfig.json

{
  "include": [
    "**/*.ts",
    "**/*.tsx",
    "**/*.cjs",
    "**/*.js",
  ]
}

まとめ

この記事では、include の値を変更し、範囲外のファイルが型チェックされるか、範囲内のファイルが型チェックされるかを確認します。Node.js & TypeScript のプロジェクトと Next.js のプロジェクトで動作確認を行いました。

概要

簡易例

Next.js の設定考察

参考

この記事の内容

Node.js & TypeScriptのプロジェクトで動作確認

事前環境の構築

include に解析対象のファイルを含めない

include に解析対象のファイルを含める

検証1

検証2

検証3

検証4

検証5

検証6

検証7

検証8

検証9

修正

Next.jsのプロジェクトで動作確認

事前環境の構築

プロジェクトを作成

Peer Dependenciesの警告を解消

styles

初期ページ

レイアウト

TailwindCSSの設定

TypeScriptの設定

スクリプトを追加

動作確認

include に解析対象のファイルを含めない

include に解析対象のファイルを含める

Next.jsの設定考察

まとめ

Discussion

`include` に解析対象のファイルを含めない

`include` に解析対象のファイルを含める

`include` に解析対象のファイルを含めない

`include` に解析対象のファイルを含める