Zenn
Closed3

TypeScriptで配列の要素取得時の型に、undefinedを追加する (TSConfig --noUncheckedIndexedAccess)

TypeScript
#
tsconfig
HaruHaru

TypeScriptで配列の要素取得時の型に、undefinedを追加する

実行時には、配列の要素取得時に毎回値が代入されているかが保証されない。

// 型推論で、contentにundefinedが付与されるようにしたい
const content = list[3];

TSConfingに必ず設定したい内容になります。
下記設定例。

// TSConfig
{
  "compilerOptions": {
    "noUncheckedIndexedAccess": true
  }
}

Before

// 型推論があるが、サンプルのため型定義をstring[]にしています。
const list: string[] = ['a', 'b'];

// contentの型はstring。
// ただ実行時には要素はないので、undefinedとなる。
const content = list[5];

After

noUncheckedIndexedAccessの設定後

const list: string[] = ['a', 'b'];

// contentの型はstring or undefinedとなる
const content = list[5];
HaruHaru

上記ではわかりやすく配列での例で表現したが、
公式の例にある通り、オブジェクトでもindex signaturesによって下記の記述が可能。

TypeScript has a way to describe objects which have unknown keys but known values on an object, via index signatures.

interface EnvironmentVars {
  NAME: string;
  OS: string;
 
  // index signatureで宣言
  [propName: string]: string;
}
 
declare const env: EnvironmentVars;

// interfaceで定義されているため、stringであることが保証される
const sysName = env.NAME;
const os = env.OS;

// constsysName: string
// const os: string

// index signatureでの宣言のため、実際に要素があるか不明。
const nodeEnv = env.NODE_ENV;

// before
// const nodeEnv : string

// after(noUncheckedIndexedAccessの設定後
// const nodeEnv : string | undefined
このスクラップは2023/02/14にクローズされました