📘

TypeScriptの勉強(undefined型について)

に公開
AWS
TypeScript
AWS CDK
tech

AWS CDKの為のTypeScriptの勉強(undefined型について)

はじめに

インフラエンジニアの私がAWS CDKの為の勉強の為の備忘録です。特にundefined型について勉強しました。

TypeScriptでのオブジェクトの型定義

TypeScriptでは、オブジェクトの形状やプロパティの型を明示的に定義することができます。以下の例を考えてみましょう。

let user: { name: string, age: number | undefined, married?: boolean };

この型定義では、userという名前のオブジェクトが以下のプロパティを持つことを示しています。

  • name: 必須のstring型。
  • age: numberまたはundefinedの型。このプロパティは明示的に設定されなくても良い。
  • married: boolean型。しかし、このプロパティには?が付いているため、オプショナル（つまり必須ではない）です。

undefinedについて

JavaScriptとTypeScriptの両方で、undefinedは変数やプロパティが値を持たない状態を示す特別な値です。TypeScriptでは、このundefinedも明示的な型として扱うことができます。

例:

user = { name: '山田 太郎', age: undefined, married: false };

この場合、ageプロパティにはundefinedが明示的に割り当てられています。

オプショナルなプロパティ

marriedのようなオプショナルなプロパティは、オブジェクトに存在してもしなくても良いという特性を持っています。

例:

user = { name: '山田 太郎', age: 25 };

この場合、marriedプロパティは省略されていますが、型定義に従っているのでエラーは発生しません。また、オプショナルなプロパティがオブジェクトに存在しない場合、その値はundefinedになります。

TypeScript: undefined と null の違いと使用シナリオ

TypeScriptにおけるundefinedとnullは、JavaScriptから引き継がれた2つの異なる"存在しない"を表す値です。しかし、これらは異なる文脈やセマンティクスで使用されるため、正確に理解して適切に使用することが重要です。今回は、これらの違いと、TypeScriptでの使用シナリオを解説します。

1. undefined

TypeScriptでは、オブジェクトのオプショナルなプロパティや初期値が設定されていない変数にはundefinedがデフォルトで返されます。これは、変数がまだ値を持っていない、またはオブジェクトのプロパティがオプショナルで設定されていないことを示します。

interface Person {
  name: string;
  age?: number;  // This can be either a number or undefined.
}

const john: Person = { name: "John" };
console.log(john.age); // Outputs: undefined

2. null

一方、nullは何も存在しないこと、あるいは値が意図的に空であることを示したい場合に使用します。たとえば、データベースから情報を検索する関数が、該当する情報が存在しない場合にはnullを返すというシナリオが考えられます。

function findPerson(id: string): Person | null {
  // If a person with the given ID is not found, return null.
  return null;
}

3. 厳密なnullチェック

TypeScriptのstrictNullChecksオプションを有効にすると、変数にnullやundefinedを割り当てることができるのは、それらの型が明示的に指定されている場合だけになります。この設定は、意図しないnullやundefinedの代入を予防し、安全なコードを記述するための強力なツールとなります。

まとめ

TypeScriptは、JavaScriptの動的な性質を持ちながら、型の安全性を提供する強力なツールです。この記事の例を通じて、オブジェクトの型定義の基本や、undefinedとオプショナルなプロパティの振る舞いについて学びました。

ブラウザで検証可能

TypeScript: JavaScript With Syntax For Types.

参考

実践 AWS CDK - TypeScript でインフラもアプリも！ - Silverworks - BOOTH

undefined型 | TypeScript入門『サバイバルTypeScript』

undefinedとnullの違い | TypeScript入門『サバイバルTypeScript』

Discussion