FrontEnd

TypeScript初心者が押さえておくべき型システム

投稿日:

はじめに

今回の記事では、TypeScript の型システムについて、TypeScript を初めて触る人が押さえておくと良い、基礎的な内容を説明します。

型アノテーション

はじめに、TypeScript で扱える型について説明します。

プリミティブ型

JavaScript のプリミティブ型は、TypeScript では string 、number 、boolean として用意されています。

型アノテーションは、以下のように :TypeAnnotation 構文で書きます。

リテラル型

ある変数を、特定の文字列のみを受け付けるようにしたい場合、文字列リテラルを型として使うことができます。

また、文字列の他に、number 型と boolean 型でも同様に型として使うことができます。

any

any 型はすべての型と互換性があります。そのため、 any 型の変数にはすべての型を代入することができ、他のどの型の変数にも any 型の変数を代入することができます。

nullとundefined

null と undefined は、any 型と同じように扱われます。この二つは他のどの型の変数にも代入することができます。( tsconfig.json の strictNullChecks が true の場合はエラーになります

ユニオン型

ある変数に複数の型を代入できるようにしたい場合、 | を使って書くことができます。

上の例では、 hoge には string 型、または number 型の値を代入することができます。また、オブジェクト型も同様に、union 型として定義することができます。

上の例では、 hogeFuga は、 Hoge 、または Fuga を代入することができますが、それぞれが持っているパラメータが異なるため、後述する型ガードと合わせて使われることが多いでしょう。

交差型

交差型では、異なる複数のオブジェクトの機能を併せ持つ新しいオブジェクトを作成することができます。

上の例では、 hogeFuga は Hoge が持っている a というプロパティと、 Fuga が持っている b というプロパティを持っています。

タプル型

タプルの実態は配列ですが、以下のようにアノテーションをつけることができます。

列挙型

JavaScript には列挙型(enum)はありませんが、TypeScript では以下のように書くことができます。

これらの値は0からインクリメントされる数値です。以下のように、始めの値を指定することができます。

また、値を文字列にすることもできます。

ほかにも、静的関数をもたせることなどもできます。より詳しく知りたい方はこちらをご覧ください。

配列

配列の宣言は、有効な型アノテーションの後ろに [] をつけます。

interface

interface は、複数の型アノテーションを一つのアノテーションに合成するために使われます。

なお、あるクラスに interface を準拠させたい場合、 implementes キーワードを使うことができます。

インライン型アノテーション

1度だけ使われるアノテーションの場合、インライン型で定義することで型名を考える手間を省くことができます。

型エイリアス

以下のように、型アノテーションに名前をつけることができます。

generics

generics な関数は以下のように定義します。

generics についてもっと詳しく知りたい方は、こちらをご覧ください。

関数の型

関数のパラメータにつけることができる型アノテーションについて説明します。

引数と戻り値の型アノテーション

関数には、引数と戻り値に型アノテーションをつけることができます。

また、関数が値を返す必要がない場合、:void 型アノテーションをつけることができます。

なお、コンパイラが型推論できる場合、戻り値のアノテーションを省略することができます。

オプションパラメータ

以下のように省略可能なパラメータを定義することができます。

overload

以下のように関数の overload を宣言することができます。

上の例では、関数 hoge は引数を1つ、または2つ、または4つ受け付けます。引数を3つ渡した場合はエラーになります。

型推論

変数に型アノテーションを書かなくても、いくつかのルールに基づいて自動的に型を推論します。

変数の定義

変数宣言時の初期値によって型を推論します。

戻り値

return で返却する値によって型を推論します。

代入

代入される値によって型を推論します。

構造化

構造化も同様に値によって型を推論します。

分解

分解も同様に値によって型を推論します。

型アサーション

型アサーションは、TypeScript が推論した型を任意の型で上書きすることです。一般的には、JavaScript で書かれたコードを TypeScript へ移植する場合に用いられることが多いです。

注意点としては、必要なパラメータを設定し忘れても、コンパイラはエラーを表示しないため、予期せぬエラーを引き起こすことがあることです。可能であれば以下のようにするのが良いでしょう。

型アサーションの成否

型アサーションは、型T が 型U のサブタイプであるか、その逆である場合に成功します。

型ガード

Type Guard を使用すると、ブロック内のオブジェクトの型を制限することができます。

typeof

instanceof

クラスの場合は instanceof を使います。

in

in 演算子はオブジェクトのプロパティをチェックします。これも TypeGuard として使用することができます。

さいごに

TypeScript 初学者向けに TypeScript の型システムについて紹介しました。まだ、 TypeScript を使っていない方は、ぜひ、 TypeScript を初めてみてください。

おすすめ書籍

プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発  確かな力が身につくJavaScript「超」入門 第2版  Vue.js入門 基礎から実践アプリケーション開発まで

blog-page_footer_336




blog-page_footer_336




-FrontEnd
-

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

【入門】Vuetifyで手軽に綺麗なWebページを作る

1 はじめに1.1 Vuetifyとは2 Vuetifyを導入する2.1 パッケージを追加する2.2 TypeScriptを採用している場合3 Vuetifyのコンポーネント3.1 Applicati ...

ウチのMaterialize事情

1 はじめに2 ボタン3 フォーム3.1 ラベルについて3.2 セレクトボックスについて3.3 ラジオボタンについて4 アラート5 フォント6 さいごに はじめに うちのチームでは現在、CSSフレーム ...

js

JavaScriptのみでPOSTした場合のCSRFトークンの認証に関するTIPS

1 はじめに2 実装2.1 なぜエラーが発生したか2.2 修正後のコード3 さいごに はじめに RailsアプリケーションでPOSTリクエストを送る場合、多くの場合はform_withなどのヘルパーを ...

js

JSで緯度経度情報から住所を取得する

1 はじめに2 キーを取得する2.1 キーを取得する3 コード4 参考5 さいごに はじめに Google Maps JavaScript APIを利用して、緯度経度の数値から住所を検索する方法を紹介 ...

ざっとPWAの概要を調べてみる

1 はじめに2 ProgressiveWebAppsとは3 PWAに必要な技術4 PWAとセットでよく出てくる「AMP」とは5 ネイティブアプリ vs PWA6 さいごに はじめに ここ最近、Andr ...

フォロー

follow us in feedly

blog-page_side_responsive

2020年7月
 1234
567891011
12131415161718
19202122232425
262728293031 

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。