【初心者向け】JavaScriptとTypeScriptでカスタム型をプリミティブ型にキャストする方法を学ぼう
JavaScript、TypeScriptにおけるカスタム型からプリミティブ型へのキャスト
JavaScriptとTypeScriptでは、様々な型を使ってデータを扱うことができます。基本的な型であるプリミティブ型に加え、オブジェクト型や関数型など、より複雑な型も定義できます。場合によっては、カスタム型と呼ばれる独自の型を定義することもあります。
このチュートリアルでは、カスタム型をプリミティブ型にキャストする方法について解説します。キャストとは、ある型の値を別の型の値に変換することです。
カスタム型とは
カスタム型とは、自分で定義した型のことです。例えば、以下のように、Personという名前の型を定義できます。
type Person = {
name: string;
age: number;
};
この型は、nameプロパティが文字列型で、ageプロパティが数値型であるオブジェクトを表します。
プリミティブ型とは
プリミティブ型は、JavaScriptとTypeScriptで最初から用意されている基本的な型です。以下のようなプリミティブ型があります。
- undefined型 (
undefined) - null型 (
null) - ブール型 (
boolean) - 文字列型 (
string) - 数値型 (
number)
カスタム型をプリミティブ型にキャストする方法
カスタム型をプリミティブ型にキャストするには、いくつかの方法があります。
型アサーションを使用する
型アサーションを使用すると、変数に格納されている値の型を明示的に指定することができます。キャスト演算子 (<型名>) を使用して、変数または式の前に型名を記述します。
const person: Person = {
name: 'John Doe',
age: 30,
};
const name: string = <string>person.name; // 型アサーションを使用して、person.name を文字列型に変換
console.log(name); // 出力: John Doe
メソッドを使用する
一部のカスタム型には、プリミティブ型への変換を可能にするメソッドが用意されています。例えば、toString()メソッドを使用して、文字列型に変換することができます。
const person: Person = {
name: 'John Doe',
age: 30,
};
const name: string = person.name.toString(); // toString() メソッドを使用して、person.name を文字列型に変換
console.log(name); // 出力: John Doe
演算子を使用する
一部の演算子は、自動的に型変換を行います。例えば、数値演算子 (+, -, *, /) を使用すると、オペランドが文字列型の場合、数値型に変換されます。
const person: Person = {
name: 'John Doe',
age: 30,
};
const age: number = person.age + 1; // '+' 演算子は、person.age を数値型に変換
console.log(age); // 出力: 31
注意事項
- キャストによって、データの一部が失われる可能性があります。
- キャストが失敗すると、型エラーが発生する可能性があります。
- キャストが成功するかどうかは、カスタム型の定義によって異なります。
type Person = {
name: string;
age: number;
};
const person: Person = {
name: 'John Doe',
age: 30,
};
// 1. 型アサーションを使用する
const name1: string = <string>person.name;
console.log(name1); // 出力: John Doe
// 2. メソッドを使用する
const name2: string = person.name.toString();
console.log(name2); // 出力: John Doe
// 3. 演算子を使用する
const age1: number = person.age + 1;
console.log(age1); // 出力: 31
// 4. オブジェクトのデストラクチャリングを使用する
const { name: name3, age: age2 } = person;
console.log(name3); // 出力: John Doe
console.log(age2); // 出力: 30
このコードでは、以下の方法でPerson型をプリミティブ型にキャストしています。
nameプロパティを文字列型に変換するために、型アサーションを使用します。nameプロパティを文字列型に変換するために、toString()メソッドを使用します。ageプロパティを数値型に変換するために、+演算子を使用します。- オブジェクトのデストラクチャリングを使用して、
nameプロパティとageプロパティをそれぞれ文字列型と数値型に格納します。
TypeScript 3.8以降では、asキーワードを使用して、型アサーションをより簡潔に記述することができます。
const name: string = person.name as string;
このコードは、person.nameを文字列型に変換するのと同じ意味です。
テンプレートリテラルを使用する（TypeScriptのみ）
TypeScriptでは、テンプレートリテラルを使用して、文字列型に変換することもできます。
const greeting: string = `Hello, ${person.name}!`;
このコードは、person.nameを文字列型に変換し、Hello, John Doe!という文字列を生成します。
JSON.stringify()を使用する
オブジェクトをJSON形式に変換するには、JSON.stringify()関数を使用できます。
const jsonString: string = JSON.stringify(person);
console.log(jsonString); // 出力: {"name":"John Doe","age":30}
このコードは、personオブジェクトをJSON形式の文字列に変換します。
parseInt()とparseFloat()を使用する
文字列を数値型に変換するには、parseInt()とparseFloat()関数を使用できます。
const ageString: string = person.age.toString();
const ageNumber: number = parseInt(ageString);
console.log(ageNumber); // 出力: 30
const gpaString: string = '3.89';
const gpaNumber: number = parseFloat(gpaString);
console.log(gpaNumber); // 出力: 3.89
このコードは、ageStringを数値型に変換し、gpaStringを浮動小数点型に変換します。
論理演算子 (&&、||) は、ブール型に変換するために使用できます。
const isAdult: boolean = person.age >= 18;
console.log(isAdult); // 出力: true
このコードは、person.ageが18以上かどうかを確認し、結果をブール型に変換します。
Array.prototype.map()を使用する
Array.prototype.map()メソッドを使用して、配列内の要素をプリミティブ型に変換することができます。
const people: Person[] = [
{ name: 'Alice', age: 30 },
{ name: 'Bob', age: 25 },
{ name: 'Charlie', age: 21 },
];
const names: string[] = people.map(person => person.name);
console.log(names); // 出力: ["Alice", "Bob", "Charlie"]
このコードは、people配列内の各Personオブジェクトのnameプロパティを文字列に変換し、新しい配列に格納します。
上記で紹介した方法は、すべて状況によって適切な方法を選択する必要があります。
javascript typescript types
