TypeScript でオブジェクト構造を定義：インターフェースの達人
2024-04-02
TypeScript インターフェースのデフォルト値
デフォルト値のメリット:
- コードの冗長性を削減
- オプションパラメータの扱いやすさ向上
- コードの可読性向上
- 型安全性確保
例：
interface Person {
name: string; // 必須
age?: number; // デフォルト値 20
email?: string; // デフォルト値 なし
}
const person1: Person = {
name: "John Doe",
};
const person2: Person = {
name: "Jane Doe",
age: 30,
};
const person3: Person = {
name: "Bob Smith",
email: "[email protected]",
};
- プロパティ名の後に
?を付けて、デフォルト値を記述 - デフォルト値は、リテラル値、関数呼び出し、変数など、任意の式
注意点:
- デフォルト値を指定したプロパティは、オブジェクトリテラルで省略可能
- デフォルト値を省略した場合、
undefinedとなる
デフォルト値と型推論:
デフォルト値を使用すると、型推論がより強力になります。
function greet(person: Person): string {
return `Hello, ${person.name}!`;
}
const person1: Person = {
name: "John Doe",
};
const greeting1 = greet(person1); // "Hello, John Doe!"
const person2: Person = {
name: "Jane Doe",
age: 30,
};
const greeting2 = greet(person2); // "Hello, Jane Doe!"
デフォルト値は、インターフェースの拡張にも使用できます。
interface Employee extends Person {
jobTitle: string;
}
const employee: Employee = {
name: "John Doe",
age: 30,
jobTitle: "Software Engineer",
};
TypeScript インターフェースのデフォルト値は、コードの簡潔性、可読性、型安全性向上に役立ちます。 状況に応じてデフォルト値を活用することで、より効率的な TypeScript 開発が可能になります。
用語解説:
- インターフェース: オブジェクトの構造を定義する型
- デフォルト値: プロパティの省略時の値
- 型推論: 変数の型をコンパイラが自動的に推測する機能
- 拡張: インターフェースの機能を継承して新しいインターフェースを定義する機能
- 本解説は TypeScript 4.0 をベースにしています。
- 詳細情報は、TypeScript の公式ドキュメントを参照してください。
interface Person {
name: string; // 必須
age?: number; // デフォルト値 20
email?: string; // デフォルト値 なし
}
const person1: Person = {
name: "John Doe",
}; // age と email は省略
const person2: Person = {
name: "Jane Doe",
age: 30,
}; // email は省略
const person3: Person = {
name: "Bob Smith",
email: "[email protected]",
}; // age はデフォルト値 20
console.log(person1); // { name: 'John Doe', age: 20, email: undefined }
console.log(person2); // { name: 'Jane Doe', age: 30, email: undefined }
console.log(person3); // { name: 'Bob Smith', age: 20, email: '[email protected]' }
function greet(person: Person): string {
return `Hello, ${person.name}!`;
}
const person1: Person = {
name: "John Doe",
};
const greeting1 = greet(person1); // "Hello, John Doe!"
const person2: Person = {
name: "Jane Doe",
age: 30,
};
const greeting2 = greet(person2); // "Hello, Jane Doe!"
console.log(greeting1); // "Hello, John Doe!"
console.log(greeting2); // "Hello, Jane Doe!"
interface Employee extends Person {
jobTitle: string;
}
const employee: Employee = {
name: "John Doe",
age: 30,
jobTitle: "Software Engineer",
};
console.log(employee); // { name: 'John Doe', age: 30, jobTitle: 'Software Engineer' }
TypeScript インターフェースのデフォルト値を設定する他の方法
オプションパラメータ
関数のパラメータに ? を付けて、オプションパラメータにすることができます。 オプションパラメータは、呼び出し時に省略可能です。
例:
function greet(name?: string): string {
if (name) {
return `Hello, ${name}!`;
} else {
return "Hello, world!";
}
}
const greeting1 = greet("John Doe"); // "Hello, John Doe!"
const greeting2 = greet(); // "Hello, world!"
デフォルト引数
関数のパラメータにデフォルト値を直接指定することができます。 デフォルト引数は、呼び出し時に省略された場合に適用されます。
function greet(name = "world"): string {
return `Hello, ${name}!`;
}
const greeting1 = greet("John Doe"); // "Hello, John Doe!"
const greeting2 = greet(); // "Hello, world!"
null 合体演算子 (??) を使用して、デフォルト値を設定することができます。 null 合体演算子は、左側の式が null または undefined の場合に、右側の式を返します。
const name: string | null = null;
const greeting = `Hello, ${name ?? "world"}!`;
console.log(greeting); // "Hello, world!"
型ガードを使用して、デフォルト値を設定することができます。 型ガードは、式の型に基づいて、異なる処理を実行することができます。
function greet(person: Person | undefined): string {
if (person) {
return `Hello, ${person.name}!`;
} else {
return "Hello, world!";
}
}
const person: Person | undefined = undefined;
const greeting = greet(person);
console.log(greeting); // "Hello, world!"
クラスを使用して、デフォルト値を設定することができます。 クラスのプロパティにデフォルト値を直接指定することができます。
class Person {
name: string;
age?: number;
constructor(name: string, age?: number) {
this.name = name;
this.age = age;
}
}
const person1 = new Person("John Doe"); // age はデフォルト値 20
const person2 = new Person("Jane Doe", 30);
console.log(person1); // Person { name: 'John Doe', age: 20 }
console.log(person2); // Person { name: 'Jane Doe', age: 30 }
typescript
