as キーワードを使いこなして TypeScript コードをレベルアップ

2024-04-02

TypeScript の as キーワード：型ガードと型アサーション

型ガード

as キーワードは、変数の型が特定の型であるかどうかを確認するために使用できます。これは、条件付きステートメントや関数呼び出しで使用されます。

例：

const value: any = "Hello, world!";

if (value as string) {
  console.log("The value is a string!");
} else {
  console.log("The value is not a string.");
}

この例では、value 変数の型は any です。as キーワードを使用して、value が string 型かどうかを確認しています。

型アサーション

as キーワードは、変数を特定の型に変換するために使用できます。これは、コンパイラに型の安全性に関するヒントを与えるために使用されます。

const element = document.getElementById("my-element");

const button = element as HTMLButtonElement;

button.addEventListener("click", () => {
  console.log("Button clicked!");
});

この例では、element 変数は HTMLElement 型です。as キーワードを使用して、element を HTMLButtonElement 型に変換しています。

注意事項

as キーワードは、型の安全性に関する保証を提供しません。実行時に型エラーが発生する可能性があります。
as キーワードは、コードの読みやすさを低下させる可能性があります。必要に応じてのみ使用することをお勧めします。

function greet(person: Person) {
  console.log(`Hello, ${person.name}!`);
}

const maybePerson: any = { name: "John Doe" };

if (maybePerson as Person) {
  greet(maybePerson);
} else {
  console.log("The person is not valid.");
}

const element = document.getElementById("my-element");

const button = element as HTMLButtonElement;

button.addEventListener("click", () => {
  console.log("Button clicked!");
});

型ガードと型アサーションの組み合わせ

function getLength(value: string | number): number {
  if (typeof value === "string") {
    return value.length;
  } else {
    return value.toFixed().length;
  }
}

const maybeStringOrNumber: any = "Hello, world!";

const length = getLength(maybeStringOrNumber as string);

console.log(`The length is ${length}`);

配列の要素の型を確認
オブジェクトのプロパティの型を確認
関数の引数の型を確認

as キーワードは、TypeScript で変数の型を確認および変換するために使用できる便利なツールです。型ガードと型アサーションの両方の役割を理解し、適切に使用することが重要です。

型ガードと型アサーションの他の方法

typeof 演算子
instanceof 演算子

型エイリアス
ジェネリック型

型ガード

typeof 演算子は、変数の型を取得するために使用できます。

const value: any = "Hello, world!";

if (typeof value === "string") {
  console.log("The value is a string!");
} else {
  console.log("The value is not a string.");
}

instanceof 演算子は、変数が特定のクラスのインスタンスかどうかを確認するために使用できます。

class Person {
  name: string;

  constructor(name: string) {
    this.name = name;
  }
}

const person: any = new Person("John Doe");

if (person instanceof Person) {
  console.log("The person is a Person!");
} else {
  console.log("The person is not a Person.");
}

型ガード関数は、変数が特定の型かどうかを確認するために使用できる関数です。

function isString(value: any): boolean {
  return typeof value === "string";
}

const value: any = "Hello, world!";

if (isString(value)) {
  console.log("The value is a string!");
} else {
  console.log("The value is not a string.");
}

型アサーション

型エイリアスを使用して、複雑な型のエイリアスを作成できます。

type Person = {
  name: string;
  age: number;
};

const person: Person = {
  name: "John Doe",
  age: 30,
};

ジェネリック型を使用して、さまざまな型の値を受け入れることができるコンポーネントを作成できます。

interface Person {
  name: string;
  age: number;
}

interface Animal {
  name: string;
  species: string;
}

function greet<T extends Person | Animal>(person: T) {
  console.log(`Hello, ${person.name}!`);
}

const person: Person = {
  name: "John Doe",
  age: 30,
};

const animal: Animal = {
  name: "Fido",
  species: "Dog",
};

greet(person);
greet(animal);