TypeScriptのStrictモードを使いこなすコツ

先生

TypeScriptのStrictモード、まるでベテランプログラマーが隣で常にコードチェックしてくれるみたい！

TypeScriptのStrictモードとは？有効にするメリット

TypeScriptのStrictモードは、コンパイラがより厳格な型チェックを行うようにする設定です。有効にすることで、潜在的なエラーを早期に発見し、より安全で信頼性の高いコードを書くことができます。

Strictモードを有効にするには、tsconfig.jsonファイルに"strict": trueを追加します。個別に設定を調整することも可能です。

{
  "compilerOptions": {
    "strict": true,
    // 他のコンパイラオプション...
  }
}

Strictモードで検出されるエラーと対策

Strictモードを有効にすると、様々なエラーが検出されるようになります。主なものと対策を見ていきましょう。

変数の型が明示的に指定されていない場合、TypeScriptは暗黙的にany型を割り当てます。Strictモードでは、これをエラーとして検出します。

// エラー: Implicit any. Specify a type.
let x; 
// 修正:
let x: number;

対策：変数を宣言する際に、型を明示的に指定します。

Strictモードでは、nullまたはundefinedが割り当てられる可能性のある変数へのアクセスを厳密にチェックします。

function greet(name: string | null) {
  console.log("Hello, " + name.toUpperCase()); // エラー: Object is possibly 'null'.
}

// 修正:
function greet(name: string | null) {
  if (name) {
    console.log("Hello, " + name.toUpperCase());
  }
}

対策：nullチェックを行い、nullまたはundefinedでない場合にのみ処理を実行するようにします。または、?. (Optional Chaining)や?? (Nullish Coalescing Operator)を利用します。

関数呼び出し時に、引数の数が一致しない場合や、型が異なる場合にエラーが発生します。

function add(a: number, b: number): number {
  return a + b;
}

add(1, 2, 3); // エラー: Expected 2 arguments, but got 3.

対策：関数呼び出し時に、引数の数と型が一致するようにします。

Partial, Readonly, Requiredなどのユーティリティ型を活用

TypeScriptには、既存の型を基に新しい型を生成するユーティリティ型が多数用意されています。Strictモードと組み合わせて使用することで、より安全なコードを書くことができます。

Partial<T>は、型TのすべてのプロパティをOptional（省略可能）にします。

interface User {
  id: number;
  name: string;
  email: string;
}

type PartialUser = Partial<User>;

const partialUser: PartialUser = {
  name: "John Doe",
};

Readonly<T> は、型 T のすべてのプロパティを読み取り専用にします。

interface Config {
  apiUrl: string;
  timeout: number;
}

const config: Readonly<Config> = {
  apiUrl: "https://example.com/api",
  timeout: 5000,
};

// config.apiUrl = "https://new-example.com/api"; // Cannot assign to 'apiUrl' because it is a read-only property.

Required<T>は、型Tのすべてのプロパティを必須にします。Partial<T>でOptionalになったプロパティを再び必須にできます。

interface Props {
  a?: number;
  b?: string;
}

const obj: Required<Props> = {
  a: 5,
  b: "test",
};

noImplicitAnyとnoImplicitThisの活用

tsconfig.jsonでnoImplicitAnyとnoImplicitThisをtrueに設定することで、暗黙的なany型とthisの使用を禁止し、より厳格な型チェックを実現できます。

{
  "compilerOptions": {
    "noImplicitAny": true,
    "noImplicitThis": true,
    // 他のコンパイラオプション...
  }
}

参考リンク

まとめ

TypeScriptのStrictモードは、コードの品質を向上させるための強力なツールです。最初はエラーが多くて大変かもしれませんが、Strictモードを使いこなすことで、より安全で保守性の高いコードを書けるようになります。積極的に活用していきましょう。