LoginSignup
76
66

More than 5 years have passed since last update.

TypeScriptでこれは設定しとけっていうコンパイラーオプション

Last updated at Posted at 2017-06-15

最近ギョームで使用したので転記

何がしたいか

  • 型チェックによる安全性を最大化したい
  • 不要なコードも怒ってくれるとうれしいなー

対象

TypeScript2系
(1系もいくつか使えるオプションもあると思うが未検証…というか2系にあげましょう!)

追加したオプション

  • 型チェックによる安全性を最大化したい
    • strictNullChecks
    • noImplicitAny
    • noImplicitThis
    • noImplicitReturns
  • 不要なコードも怒ってくれるとうれしいなー
    • noUnusedLocals
    • noUnusedParameters

「型チェックによる安全性を最大化したい」系

strictNullChecksオプション

nullやundefinedが「一人前の型」になります。
指定前はnullやundefinedで以下のようなことができましたが、このオプション指定によりエラーとなります。

const num: number = null; // Type 'null' is not assignable to type 'number'.

nullやundefinedで初期化が必要な場合は、型を明示しましょう。ただし、考えなしにnullable/undefinedableな変数を量産するのもあまりオススメできません。
nullable/undefinedableな変数を扱う場合、常に型のハンドリングが必要になります。

const num: number | undefined = undefined;
if (typeof num !== 'number') {
  return "Error Happens";
}
num.toString();  // チェックロジックをコンパイラが評価し、numは正しくnumber型と判断される

要件によると思いますが、型が同じ初期化値でコードをすっきりさせて行きたいところです。

const num = 0; // 右辺のリテラルを型推論してくれて、型宣言もいらない

nullable/undefinedableな変数のキャスト

!を使うことで、nullable/undefinedableな型を、値がある風にキャストできます

const num: number | undefined = 123123;  // number | undefined型の変数が…
num!.toString();  // numberにキャストされる

あくまでコンパイラーをだましているだけなので、ランタイムエラーの可能性が残ります。どうしようもない時だけ使いましょう。

const num: number | undefined = undefined;
num!.toString();  // ぬるぽ!  TypeError: Cannot read property 'toString' of undefined

noImplicitAnyオプション

TSでは型定義がない変数はany型になってしまいます(暗黙のany型)。それを禁止します。

const hoge; // any => コンパイルエラー!

明示的にany型を宣言すると、コンパイルは通ります。

const hoge: any; // コンパイルOK

ですが、基本的にanyの変数はJS時代に戻るようなもので、TSを使ってる意味がないので、よほど型をつけにくい事情がない限り、避けましょう!

配列の初期化

設定前までは、型宣言なしで配列を初期化することができました

const array = [];  // any[]になる

noImplicitAnyオプションにより、「なんの配列か」をコンパイラーに教えてやらないといけないため、型宣言が必須となります。
(静的型付けなら当然ですが)

const array: string[] = [];

noImplicitThisオプション

JSのthisのキモさは有名なのですが、thisに型を指定していない場合にエラーを発生させることができます。
普通にクラス内でthisを使う場合は、TSが型を判断できるので問題になりません。

noImplicitReturnsオプション

関数内のすべての経路で、返り値の型があっているかをチェックしてくれます
(静的型付けなら当たり前ですが…)

「不要なコードも怒ってくれるとうれしいなー」系

noUnusedLocalsオプション

宣言して、一度も使われないローカル変数があると、コンパイルエラーになります。

const num = 123123; //  'num' is declared but never used.
return;

import文にも効いてくれます。

import { Router, Component } from '@angular/router'; // 'Component' is declared but never used.

noUnusedParametersオプション

一度も使われないパラメータがあると、コンパイルエラーになります。

(num: number) => { // 'num' is declared but never used.
  return "return";
}

フレームワークに呼ばれる関数などで、シグネチャーを合わせないといけない場合がありますが、パラメータ名を_で始めればunusedチェックの対象外になります。
_パラメータを使えば簡単にエラーを止められるのですが、自前の関数であれば当然パラメータの削除を検討しましょう!

(_num: number) => {
  return "return";
}

コンパイルを通すために…!

これだけ設定すると、意識の低いnode_moduleからコンパイルエラーが上がってくる可能性があります。
その場合、skipLibCheckオプションの使用を検討するとよいでしょう。

参考記事

76
66
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
76
66