TypeScript 文字列制約
2024-10-06
文字列リテラル型を使用する
- インターフェースのプロパティの型として使用することで、そのプロパティが指定された文字列のみを受け取るようにできます。
- 文字列リテラル型は特定の文字列値を定義します。
interface User {
name: "John" | "Alice" | "Bob";
}
const user: User = {
name: "John" // 正しい
};
const invalidUser: User = {
name: "Chris" // エラー: "Chris" は "John" | "Alice" | "Bob" のうちの一つではありません
};
文字列型と正規表現を使用する
- インターフェースのプロパティの型として文字列型を使用し、型ガードまたはアサーションを使用して正規表現でチェックします。
- 正規表現を使用して、文字列の特定のパターンを要求できます。
interface Email {
address: string;
}
function validateEmail(email: Email): boolean {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email.address);
}
const validEmail: Email = {
address: "[email protected]"
};
const invalidEmail: Email = {
address: "invalid email"
};
if (validateEmail(validEmail)) {
// 有効なメールアドレス
} else {
// 無効なメールアドレス
}
カスタム型ガード関数を使用する
- カスタム型ガード関数を定義して、特定の文字列かどうかを判定します。
interface Color {
color: "red" | "green" | "blue";
}
function isColor(value: string): value is Color["color"] {
return ["red", "green", "blue"].includes(value);
}
const validColor: Color = {
color: "red"
};
const invalidColor: Color = {
color: "purple"
};
if (isColor(invalidColor.color)) {
// 有効なカラー
} else {
// 無効なカラー
}
TypeScriptで特定の文字列を要求する例
interface User {
name: "John" | "Alice" | "Bob";
}
const user: User = {
name: "John" // 正しい
};
const invalidUser: User = {
name: "Chris" // エラー: "Chris" は "John" | "Alice" | "Bob" のうちの一つではありません
};
説明
invalidUserは、nameプロパティがChrisであるため、エラーが発生します。nameプロパティは、John,Alice,Bobのいずれかの文字列でなければなりません。
interface Email {
address: string;
}
function validateEmail(email: Email): boolean {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email.address);
}
const validEmail: Email = {
address: "[email protected]"
};
const invalidEmail: Email = {
address: "invalid email"
};
if (validateEmail(validEmail)) {
// 有効なメールアドレス
} else {
// 無効なメールアドレス
}
validateEmail関数は、正規表現にマッチすればtrueを返します。addressプロパティは文字列型ですが、正規表現を使用して有効なメールアドレスかどうかをチェックします。
interface Color {
color: "red" | "green" | "blue";
}
function isColor(value: string): value is Color["color"] {
return ["red", "green", "blue"].includes(value);
}
const validColor: Color = {
color: "red"
};
const invalidColor: Color = {
color: "purple"
};
if (isColor(invalidColor.color)) {
// 有効なカラー
} else {
// 無効なカラー
}
isColor関数の戻り値の型アノテーションvalue is Color["color"]は、関数の結果がColor["color"]型であることを示します。isColor関数は、引数の値がred,green,blueのいずれかであるかどうかをチェックします。
ディスクリミネーター型を使用する:
interface User {
type: "admin" | "user";
name: string;
}
interface Admin {
type: "admin";
name: string;
privileges: string[];
}
interface User {
type: "user";
name: string;
favoriteColor: string;
}
function greetUser(user: User) {
if (user.type === "admin") {
// 管理者ユーザー
} else {
// 一般ユーザー
}
}
greetUser関数では、user.typeをチェックして適切な処理を行います。- 各ユーザータイプに固有のプロパティを追加することができます。
- ディスクリミネーター型
typeを使用して、ユーザーの種類を区別します。
マッピング型を使用する:
type AllowedStrings = "John" | "Alice" | "Bob";
type UserMap = {
[key in AllowedStrings]: {
name: key;
age: number;
};
};
const userMap: UserMap = {
John: {
name: "John",
age: 30
},
Alice: {
name: "Alice",
age: 25
}
};
- オブジェクトのプロパティの型は、キーの値に基づいて定義されます。
- マッピング型を使用して、特定の文字列をキーとするオブジェクトを作成します。
型アサーションを使用する:
interface User {
name: string;
}
function getUser(name: string): User {
// ...
}
const user = getUser("John");
// 型アサーションを使用して、`user` が `User` 型であることを保証する
const userAsAdmin: Admin = user as Admin;
- ただし、型アサーションはランタイムエラーが発生する可能性があるため、慎重に使用してください。
- 型アサーションを使用して、変数の型を強制的に変更します。
typescript
