※このブログではサーバー運用、技術の検証等の費用のため広告をいれています。
記事が見づらいなどの問題がありましたらContactからお知らせください。


【TypeScript】TSConfigで型推論のAny型を禁止

TypeScript TSConfig any Any型 型推論

投稿日:2020年11月15日

このエントリーをはてなブックマークに追加
TypeScriptの型推論のAny型には十分注意する必要があります。TSConfigではこの型推論を禁止することができます。

はじめに

この記事について

この記事ではTypeScriptにおけるany型の危険性と、TSConfigを使ってこの危険な型の使用を禁止する方法について解説しています。


実践

型推論の危険性

まずはTypeScriptのある危険な仕様について解説しましょう。


TypeScriptでは値の型を指定しなかった場合、その値の型に対して推論が行われます。
しかし、もしコード内の情報から明確に型が推測できない場合、自動的にany型が選ばれてしまいます。
実はこのany型の推論が思わぬバグを生んでしまうことがあります。

例えば以下のコードを考えてみてください。

sample.ts
/**
* greetingをユーザーに表示
*/
function helloWorld(greeting){
    alert(greeting.trim())
}

// 10をユーザーに表示
helloWorld(10);

おそらく関数の作成者は、helloWorld()greetingという引数で挨拶の文言を表すstringを受け取り、trim()によって邪魔な空白を削除しユーザーに表示する関数として書いたのでしょう。

しかし、あろうことかこの関数を使う場面になって

『greetingをユーザーに表示…?よし、10という数字をユーザーに表示したいからこの関数を使おう』

と考えてしまったのです。

当然、numbertrim()は存在しないため、このコードにはバグがあるわけですが、どういうわけかこのコードのトランスパイルは正常終了してしまいます。

実際にエラーが発生するのはトランスパイル後のコードを実行するタイミング…‥

最悪です!!!

ターミナル
$ tsc sample.ts    // 正常終了
$ node sample.js // エラー!!!!

原因はgreetingstringと判断するだけの材料が関数内に存在しないことが原因で、この引数がany型として推論されてしまったことが原因です。
any型は一切の情報を持たないため、どんな間違った型のオブジェクトを渡されても、トランスパイラはそのミスに気付けないのです!!!

さらにこのコードで問題なのはコード内でanyという指定をしていないことでしょう。

優秀エンジニア「any型がコード内に残っていると危険なので、全て別の型になおそう!!まずはエディタの検索機能でanyを検索だ!!!」

と、考えた勇者のようなエンジニアがいたとしましょう。しかし、プロジェクト内を『any』で検索しても暗黙的に推論されたany型は表示されないのです。

優秀エンジニア「コード内のany型はすべて消えたよ!!」

トランスパイラ「見た目の上ではなwwww」

【解決策】noImplicitAny

この問題はtsconfig.jsonの設定で解決できます。

tsconfigにはnoImplicitAnyという設定項目があります。

この設定をtrueにすると、型推論でany型を推論しそうな時はエラーを出力してくれます。

tsconfig.json
{
    "compilerOptions": {
        "noImplicitAny": true
    }
}

これだけです!!

これでトランスパイルはしっかり失敗してくれるし、VSCodeなどのエディタでも暗黙的なanyはエラーとして表示してくれます!!

ターミナル
$ tsc
sample.ts:1:21 - error TS7006: Parameter 'greeting' implicitly has an 'any' type.

1 function helloWorld(greeting){
                      ~~~~~~~~


Found 1 error.

もちろん、禁止されたのは型推論のany型のみをなので、通常の型推論は問題なく使用できます。

function helloWorld(greeting:string){
    console.log(greeting.trim())
}

let greeting = "   hello world    ";    // 文字列への型推論
helloWorld(greeting);

さいごに

参考URL

参考書籍

このエントリーをはてなブックマークに追加


関連記事

記事へのコメント