noUncheckedIndexedAccess

noUncheckedIndexedAccessはインデックス型のプロパティや配列要素を参照したときundefinedのチェックを必須にするコンパイラオプションです。

デフォルト: false
追加されたバージョン: 4.1

解説

インデックス型や配列で宣言されたオブジェクトが持つプロパティへのアクセスを厳密に評価します。

📄️ インデックス型

TypeScriptで、オブジェクトのフィールド名をあえて指定せず、プロパティのみを指定したい場合があります。そのときに使えるのがこのインデックス型(index signature)です。たとえば、プロパティがすべてnumber型であるオブジェクトは次のように型注釈します。

ts
type ObjectLiteralLike = {
  en: string;
  fr: string;
  it: string;
  [lang: string]: string;
};
 
type ArrayObjectLike = {
  0: string;
  1: string;
  [num: number]: string;
};
 
function log(s: string): void {
  console.log(s);
}
 
const butterfly: ObjectLiteralLike = {
  en: "Butterfly",
  fr: "Papillon",
  it: "Farfalla",
  es: "Mariposa",
};
 
const phoneticCodes: ArrayObjectLike = {
  0: "alpha",
  1: "bravo",
  2: "charlie",
};

ts
type ObjectLiteralLike = {
  en: string;
  fr: string;
  it: string;
  [lang: string]: string;
};
 
type ArrayObjectLike = {
  0: string;
  1: string;
  [num: number]: string;
};
 
function log(s: string): void {
  console.log(s);
}
 
const butterfly: ObjectLiteralLike = {
  en: "Butterfly",
  fr: "Papillon",
  it: "Farfalla",
  es: "Mariposa",
};
 
const phoneticCodes: ArrayObjectLike = {
  0: "alpha",
  1: "bravo",
  2: "charlie",
};

ObjectLiteralLike, ArrayObjectLikeは共にstring型のプロパティを持つオブジェクトの型として宣言されています。

ts
const spanish: string = butterfly.es;
const third: string = phoneticCodes[2];
 
console.log(spanish);
console.log(third);

ts
const spanish: string = butterfly.es;
const third: string = phoneticCodes[2];
 
console.log(spanish);
console.log(third);

これらのオブジェクトのプロパティにアクセスするときは完全な型安全ではありません。このオプションを有効にすると次のようなエラーが発生します。

ts
const spanish: string = butterfly.es;
Type 'string | undefined' is not assignable to type 'string'.
  Type 'undefined' is not assignable to type 'string'.2322Type 'string | undefined' is not assignable to type 'string'.
  Type 'undefined' is not assignable to type 'string'.const third: string = phoneticCodes[2];
Type 'string | undefined' is not assignable to type 'string'.
  Type 'undefined' is not assignable to type 'string'.2322Type 'string | undefined' is not assignable to type 'string'.
  Type 'undefined' is not assignable to type 'string'.

ts
const spanish: string = butterfly.es;
Type 'string | undefined' is not assignable to type 'string'.
  Type 'undefined' is not assignable to type 'string'.2322Type 'string | undefined' is not assignable to type 'string'.
  Type 'undefined' is not assignable to type 'string'.const third: string = phoneticCodes[2];
Type 'string | undefined' is not assignable to type 'string'.
  Type 'undefined' is not assignable to type 'string'.2322Type 'string | undefined' is not assignable to type 'string'.
  Type 'undefined' is not assignable to type 'string'.

このように厳密に定義されていないプロパティはundefined型とのユニオン型として解釈されるようになります。

ts
const spanish: string | undefined = butterfly.es;
const third: string | undefined = phoneticCodes[2];

ts
const spanish: string | undefined = butterfly.es;
const third: string | undefined = phoneticCodes[2];

配列はインデックス記法でアクセスをするとundefined型とのユニオン型と解釈されますがfor-of, array.forEach()はこの制約を受けないため積極的に使用を検討してください。

ts
const phoneticCodes: string[] = ["alpha", "bravo", "charlie"];
 
for (const p of phoneticCodes) {
  // ...
}
 
phoneticCodes.forEach((p: string) => {
  // ...
});

ts
const phoneticCodes: string[] = ["alpha", "bravo", "charlie"];
 
for (const p of phoneticCodes) {
  // ...
}
 
phoneticCodes.forEach((p: string) => {
  // ...
});

解説​

📄️ インデックス型

解説