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


関連記事

react-icon

【React初心者】改めて主要なhookの使い方

1 はじめに2 useState3 useEffect3.1 useLayoutEffect4 useCallback5 useContext6 さいごに7 おすすめ書籍 はじめに 今回はReactで ...

【Vue.js】コンポーネントのテストコードをvue-test-utilsとJestで実装

1 はじめに2 セットアップ3 コンポーネントのテスト3.1 Shallow 描画3.2 基本的な例3.3 プロパティを渡す3.4 ユーザーの操作をシミュレーションする3.5 イベントを検証する3.6 ...

Vue.js 3.0のComposition APIを使ってみた

1 はじめに1.1 Composition APIとは1.2 環境構築2 Composition API での書き方2.1 function2.2 computed2.3 watch2.4 lifec ...

rails

Rails 7でフロントエンド開発が大きく変わる

1 はじめに1.1 脱Node.jsの経緯2 Rails 7.0でのアセット管理3 propshaft4 importmap-rails4.1 JavaScript CDN経由でのnpmパッケージの利 ...

react-icon

React Hook Form (v7) とMUI (v5) だけでバリデーションを実装

1 はじめに2 バリデーションエラーをMUIのhelperTextに表示する2.1 バリデーション実装の全体感3 他のフィールドに関連するバリデーション4 CodeSandbox5 さいごに6 おすす ...

フォロー

blog-page_side_responsive

2020年7月
 1234
567891011
12131415161718
19202122232425
262728293031  

アプリ情報

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