Zenn
🔥

tsconfig.json の allowJs

2024/03/28に公開
Next.js
TypeScript
tech

概要

allowJs を true にすることで、TypeScript で JavaScript ファイルを扱えるようにします。

例えば以下のように JavaScript ファイルを TypeScript ファイルから読み込むことができます。

lib.js
// JavaScript ファイル
export const message = "hello world";
index.ts
// TypeScript ファイル
import { message } from "./lib";

console.log(message);

Next.js の設定考察

create next-app で作成した Next.js プロジェクトで allowJs は true が設定されています。JavaScript のファイルを使えるようにするためにも、特段理由がなければ allowJs を有効化しておくことをお勧めします。

tsconfig.json
{
  "compilerOptions": {
    "allowJs": true,
  },
}

参考

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

https://www.typescriptlang.org/ja/tsconfig#allowJs

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

https://github.com/hayato94087/tsconfig-allowjs

https://github.com/hayato94087/next-tsconfig-allowjs

この記事の内容

この記事では allowJs が false の場合と true の場合で動作を確認します。Node.js & TypeScript のプロジェクトと Next.js のプロジェクトで動作確認を行います。

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

TypeScript の簡易プロジェクトを作成し、allowJs が false の場合と true の場合で動作を確認します。

allowJs が false の場合

allowJs が false の場合、TypeScript は JavaScript ファイルを扱うことができません。

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

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

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

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

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

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

$ pnpm install -D typescript ts-node

tsconfig.json を作成します。

$ npx tsc --init

tsconfig.json を作成します。allowJs を無効化します。

tsconfig.json
{
  "compilerOptions": {
    "target": "es2015",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "./dist",
    "strict": true,
    "skipLibCheck": true,
    "allowJs": false,
    "forceConsistentCasingInFileNames": true,
  },
  "include": ["**/*.ts","**/*.js"],
  "exclude": ["node_modules", "dist"]
}

git を初期化します。

$ git init

.gitignore を作成します。

$ touch .gitignore
.gitignore
node_modules

JavaScript ファイル lib.js を作成し、TypeScript ファイルの index.ts から JavaScript を読み込んで利用します。

$ touch index.ts lib.js
index.ts
import { message } from "./lib";

console.log(message);
lib.js
export const message = "hello world";

型をチェックします。TypeScript で JavaScript が扱えないためエラーとなります。

$ pnpm run typecheck

index.ts:1:25 - error TS7016: Could not find a declaration file for module './lib'. '/Users/hayato94087/Private/tsconfig-allowjs/lib.js' implicitly has an 'any' type.

1 import { message } from "./lib";
                          ~~~~~~~

Found 1 error in index.ts:1

ローカルで動作確認します。同様のエラーが出ます。

$ pnpm run dev

/Users/hayato94087/Private/tsconfig-allowjs/node_modules/.pnpm/ts-node@10.9.2_@types+node@20.11.30_typescript@5.4.3/node_modules/ts-node/src/index.ts:859
    return new TSError(diagnosticText, diagnosticCodes, diagnostics);
           ^
TSError: ⨯ Unable to compile TypeScript:
index.ts:1:25 - error TS7016: Could not find a declaration file for module './lib'. '/Users/hayato94087/Private/tsconfig-allowjs/lib.js' implicitly has an 'any' type.

1 import { message } from "./lib";
                          ~~~~~~~

    at createTSError (/Users/hayato94087/Private/tsconfig-allowjs/node_modules/.pnpm/ts-node@10.9.2_@types+node@20.11.30_typescript@5.4.3/node_modules/ts-node/src/index.ts:859:12)
    at reportTSError (/Users/hayato94087/Private/tsconfig-allowjs/node_modules/.pnpm/ts-node@10.9.2_@types+node@20.11.30_typescript@5.4.3/node_modules/ts-node/src/index.ts:863:19)
    at getOutput (/Users/hayato94087/Private/tsconfig-allowjs/node_modules/.pnpm/ts-node@10.9.2_@types+node@20.11.30_typescript@5.4.3/node_modules/ts-node/src/index.ts:1077:36)
    at Object.compile (/Users/hayato94087/Private/tsconfig-allowjs/node_modules/.pnpm/ts-node@10.9.2_@types+node@20.11.30_typescript@5.4.3/node_modules/ts-node/src/index.ts:1433:41)
    at Module.m._compile (/Users/hayato94087/Private/tsconfig-allowjs/node_modules/.pnpm/ts-node@10.9.2_@types+node@20.11.30_typescript@5.4.3/node_modules/ts-node/src/index.ts:1617:30)
    at Module._extensions..js (node:internal/modules/cjs/loader:1329:10)
    at Object.require.extensions.<computed> [as .ts] (/Users/hayato94087/Private/tsconfig-allowjs/node_modules/.pnpm/ts-node@10.9.2_@types+node@20.11.30_typescript@5.4.3/node_modules/ts-node/src/index.ts:1621:12)
    at Module.load (node:internal/modules/cjs/loader:1133:32)
    at Function.Module._load (node:internal/modules/cjs/loader:972:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:83:12) {
  diagnosticCodes: [ 7016 ]
}

コミットします。

$ git add .
$ git commit -m "feat: allowJsを無効化しエラーを確認"

allowJs が true の場合

allowJs が true の場合、TypeScript は JavaScript ファイルを扱うことができます。allowJs を有効化することで先程のエラーが解消することを確認します。

tsconfig.json を修正します。allowJs を有効化します。

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

型チェックします。allowJs を有効化したため、TypeScript で JavaScript ファイルを扱うことができます。

$ pnpm run typecheck

ローカルで動作確認します。問題無く動作します。

$ pnpm run dev

hello world

コミットします。

$ git add .
$ git commit -m "feat: allowJsを有効化しエラーがないことを確認"

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

Next.js のプロジェクトを作成し、allowJs が false の場合と true の場合で動作を確認します。

allowJs が false の場合

allowJs が false の場合、TypeScript は JavaScript ファイルを扱うことができません。

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

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

プロジェクトを作成

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

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

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

TypeScriptの設定を上書きします。

tsconfig.json
{
  "compilerOptions": {
    "target": "es2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "checkJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "noUncheckedIndexedAccess": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "plugins": [
      {
        "name": "next"
      }
    ],
  },
  "include": [
    ".eslintrc.cjs",
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "**/*.cjs",
    "**/*.mjs",
    ".next/types/**/*.ts"
  ],
  "exclude": ["node_modules"]
}

スクリプトを追加

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

package.json
{
  "name": "next-tsconfig-allowjs",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
+   "typecheck": "tsc --noEmit"
  },
  "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.37",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  }
}

動作確認

ローカルで動作確認します。

$ pnpm run dev

コミットして作業結果を保存しておきます。

$ git add .
$ git commit -m "feat:新規にプロジェクトを作成し, 作業環境を構築"

allowJs を無効化します。checkJs もあわせて無効化します。

tsconfig.json
{
  "compilerOptions": {
    "target": "es2017",
    "lib": ["dom", "dom.iterable", "esnext"],
-   "allowJs": true,
+   "allowJs": false,
-   "checkJs": true,
+   "checkJs": false,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "noUncheckedIndexedAccess": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "plugins": [
      {
        "name": "next"
      }
    ],
  },
  "include": [
    ".eslintrc.cjs",
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "**/*.cjs",
    "**/*.mjs",
    ".next/types/**/*.ts"
  ],
  "exclude": ["node_modules"]
}

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

$ rm -rf tsconfig.tsbuildinfo

JavaScript の export を含むファイルを追加します。

$ mkdir -p src/lib
$ touch src/lib/index.js
src/lib.js
export const message = "hello world";

page.tsx に JavaScript のファイルをインポートする文を追加します。

src/app/page.tsx
import { type FC } from "react";
+import { message } from "@/lib";

const Home: FC = () => {
+  console.log(message);
  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;

型をチェックします。型が見つからないとエラーが出ます。

$ pnpm run typecheck

src/app/page.tsx:2:25 - error TS7016: Could not find a declaration file for module '@/lib'. '/Users/hayato94087/Private/next-tsconfig-allowjs/src/lib/index.js' implicitly has an 'any' type.

2 import { message } from "@/lib";
                          ~~~~~~~

Found 1 error in src/app/page.tsx:2

ビルドします。同等のエラーが出ます。

$ pnpm run build

   ▲ Next.js 14.1.4

   Creating an optimized production build ...
 ✓ Compiled successfully
   Linting and checking validity of types  ..Failed to compile.

./src/app/page.tsx:2:25
Type error: Could not find a declaration file for module '@/lib'. '/Users/hayato94087/Private/next-tsconfig-allowjs/src/lib/index.js' implicitly has an 'any' type.

  1 | import { type FC } from "react";
> 2 | import { message } from "@/lib";
    |                         ^
  3 |
  4 | const Home: FC = () => {
  5 |   console.log(message);

ちなみにローカルの開発環境では動作します。ターミナルに hello world が表示されます。

$ pnpm run dev

  ▲ Next.js 14.1.4
   - Local:        http://localhost:3000

 ✓ Ready in 2.3s
 ○ Compiling / ...
 ✓ Compiled / in 1886ms (456 modules)
hello world
 ✓ Compiled in 333ms (220 modules)

allowJs が false の場合、TypeScript で JavaScript のファイルを扱うことができないことを確認しました。具体的には型をチェックする際にエラーが出ます。

コミットします。

$ git add .
$ git commit -m "feat:allowJsを無効化しエラーを確認"

allowJs が true の場合

allowJS が true の場合、JavaScript のファイルを扱うことができます。

allowJs を有効化します。

tsconfig.json
{
  "compilerOptions": {
    "target": "es2017",
    "lib": ["dom", "dom.iterable", "esnext"],
-   "allowJs": false,
+   "allowJs": true,
    "checkJs": false,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "noUncheckedIndexedAccess": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "plugins": [
      {
        "name": "next"
      }
    ],
  },
  "include": [
    ".eslintrc.cjs",
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "**/*.cjs",
    "**/*.mjs",
    ".next/types/**/*.ts"
  ],
  "exclude": ["node_modules"]
}

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

$ rm -rf tsconfig.tsbuildinfo

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

$ pnpm run typecheck

ビルドします。特にエラーは出ません。

$ pnpm run build

ローカルで動作確認します。ターミナルに hello world が表示されます。

$ pnpm run dev

  ▲ Next.js 14.1.4
   - Local:        http://localhost:3000

 ✓ Ready in 2.3s
 ○ Compiling / ...
 ✓ Compiled / in 1886ms (456 modules)
hello world
 ✓ Compiled in 333ms (220 modules)

コミットします。

$ git add .
$ git commit -m "feat:allowJsを有効化しエラーを確認"

Next.jsの設定考察

create next-app で作成した Next.js プロジェクトで allowJs は true が設定されています。利便性の観点から特段理由がなければ allowJs を有効化しておくことをお勧めします。

さいごに

allowJs が false の場合と true の場合で動作を確認しました。Node.js & TypeScript のプロジェクトと Next.js のプロジェクトで動作確認を行いました。

Discussion