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


関連記事

JQueryでformにinput要素を足していく

はじめに 最近個人的にディープラーニングの勉強をしているtonnyです。 ディープラーニングの勉強がてら、好きな麻雀に関するWebアプリを作成してみました。 今回はその作成の中で、今まであまりやってこ ...

svelte

Svelteのチュートリアルをやってみた

1 はじめに2 Svelteとは?2.1 Svelteの特徴2.2 Write less code2.3 No Virtual DOM2.4 Truly reactive3 Svelteのシンタックス ...

vuex-module-decoratorsとTypeScriptでvuexをスマートに書く

1 はじめに2 導入3 どのように記述するか3.1 初めに3.2 state3.3 mutation3.4 action3.5 getter3.6 async MutationAction3.7 Dy ...

Vue.js入門その6〜RouterとComponentを使ってTODOアプリを修正〜

1 はじめに2 vue-routerのインストール3 サーバーサイドの改修3.1 APIに詳細(show)を追加3.2 元となるビューファイルを作成3.3 ルーティングの修正4 Vue.jsの実装4. ...

ウチのMaterialize事情

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

フォロー

follow us in feedly

blog-page_side_responsive

2020年7月
 1234
567891011
12131415161718
19202122232425
262728293031 

アプリ情報

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