Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What is going on with this article?
@suzuki_sh

TypeScriptで配列のインデックスアクセス時の型推論にundefinedを含める

環境

  • TypeScript 4.2.3

該当のコードはTypeScript Playgroundにあります。

TypeScriptでは、配列のインデックスアクセス時の型推論にundefinedが含まれない

下記のコードはnumber型の変数にundefinedを代入していますが、TypeScriptのデフォルトの設定だとコンパイルエラーになりません。

const undefinedable = [1,2,3][4];
const numberOnly: number = undefinedable;

console.log(numberOnly); //=> undefined

これはconst undefinedable = [1,2,3][4]number | undefinedではなくnumberのみで型推論されるためです。

tsconfigでstrict: truestrictNullChecks: trueの設定を使っても変わりません。ですがTypeScript4.1で追加されたnoUncheckedIndexedAccessというオプションを使うと、const undefinedable = [1,2,3][4]number | undefinedに型推論されるためコンパイルエラーにすることができます。

image.png

コンパイルエラーを修正する方法

この値を代入するには、undefinedablenumberであることを確認するか、undefinedでない事を確認する必要があります。

if (typeof undefinedable === 'number') {
    const numberOnly: number = undefinedable;
}
if (undefinedable) {
    const numberOnly: number = undefinedable;
}

あるいは、値の存在が自明なときはnon-nullアサーション演算子(!)を使う事もできます。

const numberOnly: number = undefinedable!;

このコンパイルエラーは毎回チェックの手間がかかる割に多くの場合では有効に機能しないと言われているらしく、デフォルトでオンになったりstrict: trueに含まれたりはしていないようです。

参考

1
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
1
Help us understand the problem. What is going on with this article?