19
16

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

TypeScriptでキャストする2つの方法

Posted at

TL;DR

TypeScriptのキャストはas Tの記法と<T>の記法の2つがある。

アップキャスト

extends元の基底クラスの型にキャストすることをアップキャストと呼ぶ。

TypeScript
class A {
  a = 1;
}
class A2 extends A {
  a2 = 2;
}
var a2 = new A2;
function testA(a: A) {
  console.log(a.a); // 1を出力
}
testA(a2); // A2からAにアップキャスト

TypeScriptのアップキャストは明示しないでできる。

ダウンキャストは明示する必要がある。明示しないとエラーになる。

ダウンキャスト

extends先の派生クラスの型にキャストすることをダウンキャストと呼ぶ。

TypeScript
class A {
  a = 1;
}
class A2 extends A {
  a2 = 2;
}
var a = new A;
console.log((a as A2).a2); // as A2でダウンキャストを明示

undefinedを出力。

ダウンキャストのもう1つの方法

TypeScript
class A {
  a = 1;
}
class A2 extends A {
  a2 = 2;
}
var a = new A;
console.log((<A2>a).a2); // <A2>でダウンキャストを明示

undefinedを出力。

TypeScript 1.6以降、<>が曖昧なため .tsx ファイル(JSXのTypeScriptバージョン)で利用できなくなった。
ダウンキャストには as を利用することが望ましい。

おわりに

2つの記法を見かけるので、両方とも覚えておこう。

実はTypeScriptはキャストのことを**Type Assertion(型アサーション)**と呼ぶ。

それが「型キャスト」と呼ばれない理由は、キャストは一般的に何らかのランタイムサポートを意味するからです。しかし、型アサーションは純粋にコンパイル時の構造体であり、コードをどのように解析するかについてのヒントをコンパイラに提供する方法です。


JavaScript
> var a = 0;
> console.assert(a > 0, "positive number");
Assertion failed: positive number

アサーションの意味が違うので、JavaScriptから来た人は型アサーションがわからない。

参考

Typescript: cast an object to other type. How? And instanceof or typeof? - acdcjunior’s
Basic Types · TypeScript
Type Assertion(型アサーション) - TypeScript Deep Dive 日本語版

19
16
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
19
16

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?