TypeScriptのfindメソッド：潜在的なundefined値をスマートに処理する
2024-07-27
TypeScriptにおける配列の find メソッドと潜在的な undefined 値
問題を回避する方法
この問題を回避するには、いくつかの方法があります。
- null許容型を使用する: TypeScript 3.7以降では、
null許容型を使用して、findメソッドが返す値がTまたはnullのいずれかであることを明示的に指定できます。
const numbers: number[] | null = [1, 2, 3, 4, 5];
const evenNumber = numbers?.find(n => n % 2 === 0);
if (evenNumber !== null) {
console.log("偶数:", evenNumber);
} else {
console.log("偶数が見つかりませんでした。");
}
- デフォルト値を使用する:
findメソッドの第二引数にデフォルト値を指定することで、一致する要素が見つからない場合にその値を返すことができます。
const numbers: number[] = [1, 2, 3, 4, 5];
const evenNumber = numbers.find(n => n % 2 === 0) || -1;
console.log("偶数:", evenNumber);
findIndexメソッドを使用する:findIndexメソッドは、条件を満たす最初の要素のインデックスを返します。一致する要素が見つからない場合は、-1を返します。
const numbers: number[] = [1, 2, 3, 4, 5];
const evenIndex = numbers.findIndex(n => n % 2 === 0);
if (evenIndex !== -1) {
const evenNumber = numbers[evenIndex];
console.log("偶数:", evenNumber);
} else {
console.log("偶数が見つかりませんでした。");
}
- TypeScript バージョン 3.7未満を使用している場合は、
null許容型を使用する代わりに、ライブラリを使用したり、独自のヘルパー関数を作成したりして、undefinedをチェックする必要があります。 - 上記の例では、単純さのために
number型の配列を使用していますが、他の型にも同様に適用できます。
interface User {
id: number;
name: string;
}
const users: User[] | null = [
{ id: 1, name: "John Doe" },
{ id: 2, name: "Jane Doe" },
{ id: 3, name: "Peter Jones" },
];
const user = users?.find(u => u.id === 2);
if (user !== null) {
console.log("ユーザーが見つかりました:", user.name);
} else {
console.log("ユーザーが見つかりませんでした。");
}
デフォルト値を使用する
interface Product {
id: number;
name: string;
price: number;
}
const products: Product[] = [
{ id: 1, name: "Laptop", price: 1000 },
{ id: 2, name: "Phone", price: 500 },
{ id: 3, name: "Tablet", price: 300 },
];
const cheapProduct = products.find(p => p.price < 400) || { id: -1, name: "", price: 0 };
console.log("400円以下の商品:", cheapProduct);
findIndex メソッドを使用する
interface Post {
id: number;
title: string;
content: string;
}
const posts: Post[] = [
{ id: 1, title: "First Post", content: "This is my first post." },
{ id: 2, title: "Second Post", content: "This is my second post." },
{ id: 3, title: "Third Post", content: "This is my third post." },
];
const postIndex = posts.findIndex(p => p.title === "Second Post");
if (postIndex !== -1) {
const post = posts[postIndex];
console.log("投稿が見つかりました:", post.title);
} else {
console.log("投稿が見つかりませんでした。");
}
TypeScript 4.1以降では、オプション型を使用して、find メソッドが返す値が T または undefined のいずれかであることを明示的に指定できます。これは、null 許容型と似ていますが、null 値を許可しないという点で異なります。
const numbers: number[] | undefined = [1, 2, 3, 4, 5];
const evenNumber = numbers?.find(n => n % 2 === 0);
if (evenNumber !== undefined) {
console.log("偶数:", evenNumber);
} else {
console.log("偶数が見つかりませんでした。");
}
Array.prototype.filter メソッドを使用する
Array.prototype.filter メソッドを使用して、条件を満たすすべての要素を含む新しい配列を作成できます。その後、length プロパティを使用して、一致する要素が存在するかどうかを確認できます。
const numbers: number[] = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(n => n % 2 === 0);
if (evenNumbers.length > 0) {
console.log("偶数:", evenNumbers);
} else {
console.log("偶数が見つかりませんでした。");
}
forループを使用する
古典的な forループを使用して、配列内の各要素を反復処理し、条件を満たす最初の要素を見つけることもできます。
const numbers: number[] = [1, 2, 3, 4, 5];
let evenNumber: number | undefined;
for (const number of numbers) {
if (number % 2 === 0) {
evenNumber = number;
break;
}
}
if (evenNumber !== undefined) {
console.log("偶数:", evenNumber);
} else {
console.log("偶数が見つかりませんでした。");
}
三項演算子を使用する
三項演算子を使用して、find メソッドの結果をコンパクトな方法で処理することもできます。
const numbers: number[] = [1, 2, 3, 4, 5];
const evenNumber = numbers.find(n => n % 2 === 0) ?? -1;
console.log("偶数:", evenNumber);
typescript
