😸

【これさえ覚えておけばOK】tsconfig.json重要プロパティ

に公開
TypeScript
tech

はじめに

TypeScriptプロジェクトで必ず作成するtsconfig.json正直あまり触らないので、
設定項目の意味忘れません？
私は忘れました。

なので、この記事では、実務で本当に重要だと思うプロパティを3つに厳選して浅く解説します。

この記事を読んでほしい人

  • 初学者
  • 実務で使ってるけどあまり見ないし覚えてないって方
  • 現場の設定のまま見ようとも思ったことない方

基本的な構造

{
  "compilerOptions": {
    // ここの設定
  }
}

絶対に覚えておくべきプロパティ達

1. strict

TypeScriptの型チェックを厳格にする設定。

{
  "compilerOptions": {
    "strict": true
  }
}

falseにするとどうなるかというとコンパイルが通るようになります。
実際のコード

function greet(name) {  // コンパイルが通る
  console.log(name.toUpperCase());
}
greet(null); // コンパイルが通る

コンパイルするとどうなるか実際にやってみました。
"strict": true

npx tsc
src/index.ts:1:16 - error TS7006: Parameter 'name' implicitly has an 'any' type.

1 function greet(name) {
                 ~~~~


Found 1 error in src/index.ts:1

型errorが出ますね。

"strict": false

% npx tsc
%

コンパイルされちゃいました。
falseにするとtypescriptの利点がほぼなくなりますね🤯

2. target

出力するJavaScriptのバージョンを指定

{
    "compilerOptions": {
        "target": "ES2020"
    }
}

コンパイル時にどのバージョンのJavaScriptにコンパイルされるかが決まる。

実務での要件に合わせて変更しましょう。
例

ブラウザ バージョン 推奨target
Chrome 90+ ES2021
Safari 14+ ES2021
IE IE11 ES5
モダンブラウザ - esnext

3. module

出力するモジュールシステムを指定

{
    "compilerOptions": {
        "module": "esnext"
    }
}

import/exportの書き方が、どの形式で出力されるかが決まります。

export const food = "rice";
import { food } from './food';

// "module": "CommonJS" の場合（Node.js従来型）
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.food = "rice";

const food = require('./food');

// "module": "esnext" の場合（モダン）
export const food = "rice";
import { food } from './food';

環境によって変更しましょう。こんな感じになります。

環境 推奨設定
React/Vue/Next.js esnext
Node.js（従来） CommonJS
Node.js（モダン） NodeNext
React Native esnext

IEをWindows7でまだ使用しているクライアントには遭遇したくないです😊

最後に

正直学習の優先度は高くないと思うので今回は3つに厳選しました。
こういうのも理解した時案外楽しいよね。

GitHubで編集を提案

Discussion