as const を使いこなして、TypeScript マスターへの道を歩め！
2024-04-09
TypeScriptにおける "as const" とは？
as const の主な用途は以下の2つです。
- オブジェクトや配列をリテラル型に変換する
- 型ガードとして使用する
オブジェクトや配列をリテラル型に変換する
as const を使用すると、オブジェクトや配列をリテラル型に変換できます。リテラル型とは、特定の値を持つ型のことです。
例:
const obj = {
name: "John Doe",
age: 30,
};
const objAsConst = obj as const;
// objAsConst は { name: "John Doe", age: 30 } というリテラル型になる
objAsConst.name = "Jane Doe"; // エラーが発生する
この例では、obj というオブジェクトを as const を使ってリテラル型に変換しています。objAsConst は { name: "John Doe", age: 30 } というリテラル型になり、objAsConst のプロパティを変更しようとするとエラーが発生します。
型ガードとして使用する
as const は、型ガードとして使用することもできます。型ガードとは、変数の型が特定の型であるかどうかをチェックするために使用されます。
function isPerson(obj: any): obj is { name: string; age: number } {
return obj.name && obj.age;
}
const obj = {
name: "John Doe",
age: 30,
};
if (isPerson(obj)) {
// obj は { name: string; age: number } 型であることが保証される
console.log(obj.name);
}
この例では、isPerson という関数を使って、obj が { name: string; age: number } 型であるかどうかをチェックしています。isPerson 関数は、obj に name と age というプロパティが存在するかどうかをチェックして、型ガードを行っています。
as const は、オブジェクトや配列をリテラル型に変換したり、型ガードとして使用したりする便利な機能です。理解を深めるためには、実際にコードを書いて試してみることをおすすめします。
オブジェクトや配列をリテラル型に変換する
// オブジェクトをリテラル型に変換する
const person = {
name: "John Doe",
age: 30,
} as const;
// person は { name: "John Doe", age: 30 } というリテラル型になる
person.name = "Jane Doe"; // エラーが発生する
// 配列をリテラル型に変換する
const numbers = [1, 2, 3] as const;
// numbers は [1, 2, 3] というリテラル型になる
numbers.push(4); // エラーが発生する
型ガードとして使用する
// 型ガードとして使用する
function isPerson(obj: any): obj is { name: string; age: number } {
return obj.name && obj.age;
}
const obj = {
name: "John Doe",
age: 30,
};
if (isPerson(obj)) {
// obj は { name: string; age: number } 型であることが保証される
console.log(obj.name);
}
// 型ガードと as const を組み合わせて、より安全なコードを書くこともできる
function getPersonName(obj: any): string | undefined {
if (isPerson(obj)) {
return obj.name as const;
}
return undefined;
}
const name = getPersonName(obj);
if (name) {
console.log(name); // "John Doe" と出力される
}
as constは、TypeScript 3.4 以降で使用できます。as constを使用すると、コードの安全性と信頼性を向上させることができます。
型注釈
// 型注釈を使用して、オブジェクトや配列の型を明示的に指定する
const person: { name: string; age: number } = {
name: "John Doe",
age: 30,
};
// person は { name: string; age: number } 型になる
person.name = "Jane Doe"; // エラーが発生する
const numbers: [number, number, number] = [1, 2, 3];
// numbers は [number, number, number] 型になる
numbers.push(4); // エラーが発生する
const キーワード
// const キーワードを使用して、オブジェクトや配列の値を変更できないようにする
const person = {
name: "John Doe",
age: 30,
};
// person の値を変更しようとするとエラーが発生する
person.name = "Jane Doe";
const numbers = [1, 2, 3];
// numbers の値を変更しようとするとエラーが発生する
numbers.push(4);
型ガードとキャスト
// 型ガードとキャストを使用して、オブジェクトや配列の型を検査してから変換する
function isPerson(obj: any): obj is { name: string; age: number } {
return obj.name && obj.age;
}
const obj = {
name: "John Doe",
age: 30,
};
if (isPerson(obj)) {
// obj は { name: string; age: number } 型であることが保証される
const person = obj as { name: string; age: number };
console.log(person.name);
}
// 型ガードとキャストを組み合わせて、より安全なコードを書くこともできる
function getPersonName(obj: any): string | undefined {
if (isPerson(obj)) {
return (obj as { name: string }).name;
}
return undefined;
}
const name = getPersonName(obj);
if (name) {
console.log(name); // "John Doe" と出力される
}
typescript type-assertion
