TypeScript入門と基礎と使い方

TypeScript入門と基礎と使い方

node.jsでTypeScriptの基礎を勉強します。

nodistはインストールされているものとします。インストール方法は「nodistをインストールする」を参照ください。

プロジェクトを作成する

まずプロジェクトを作成します。

次にtypescriptをグローバルインストールします。

次にnode.jsの型定義ファイルをインストールします。良く分からない場合はおまじないとでも思ってください。型定義ファイルをインストールしないとtscのコンパイルが通りません。

※型定義ファイルはいっぱいあります。型定義ファイル検索サイト

「 -D」は「–save-dev」と同じです。「-S」は「–save」と同じです。

これで開発環境はとりあえず整いました。

TypeScriptはAltJSと呼ばれており、JSの次世代プログラミング言語といわれています。

AltJSは次世代プログラミング言語の総称であって、その代表格がTypeScriptです。

TypeScriptの拡張子

TypeScriptファイルの拡張子は「.ts」です。

a.tsファイルを作成してみます。

このファイルをコンパイルしてみます。コンパイルにはtscコマンドを使用します。

これでa.jsが作成されていることが確認できます。

TypeScript入門と基礎と使い方

sourcemapも出力したい場合は

とすると、a.js.mapが作成され、デバッグできるようになります。デバッグ方法については後述します。

a.js内をPlaygroundに貼り付けて実行してみます。

TypeScript入門と基礎と使い方

オンラインエディタで勉強する

typescriptを記述し、トランスパイルしてくれるオンラインエディタがあります。

Playgroundで色々触るとすぐに覚えることができると思います。

tsconfig.jsonファイルを作成する

プロジェクトのルートディレクトリにtsconfig.jsonファイルを作成します。tscコマンドでいちいちオプションをつけてコンパイルするケースは少ないはずですので、普通のプロジェクトなら必ず存在するファイルだと思います。

このファイルはTypeScriptプロジェクトのルートディレクトリであることを示すファイルでもあります。

このファイルでは、TypeScriptプロジェクトをコンパイルするのに必要なコンパイラのオプションを指定しておきます。

でデフォルトのtsconfig.jsonが作成されます。

以下、記述例です。

参考サイト

nullやundefinedを許容すると、これもバグの温床になるので、許容しないように設定すべきです。tsconfig.jsonファイルで許容しないように設定することをお勧めします。

上記は実はコンパイル通りますので気をつけましょう。型推論については後述します。

stringというように変数に型を指定した場合にnullやundefinedを代入するとエラーとなります。

tslintの設定をする

tslint + prettier を設定」を参照ください。

npm scriptsでビルド設定する

いちいちtscコマンドをタイプしてられないので、npm scriptsを指定しましょう。

package.json(一部)

これで

で、TypeScriptをコンパイルすることが可能になります。

TypeScriptとJavaScriptの違い

この2つの違いはまず拡張子がjs,tsで違います。

それと決定的に違うのはJavaScriptが動的型付けであるのに対し、TypeScriptは静的型付けである、という点です。

JavaScriptの変数には数値や文字列や関数が入ったりします。変数の型が動的に変わるわけです。これはすごくプログラムバグを作りやすいと思います。静的型付けはJavaなどのように変数宣言時に変数の型を指定するため、変数の型はかわりませんので型間違いのバグがなくなるといった利点があります。

TypeScriptのプリミティブ型

内容
string 文字列
number 数値
boolean 真偽値
symbol シンボル

TypeScriptの型は非常に多く、Pythonでも使うタプル型などもあります。

プリミティブ型の変数の定義例です。

TypeScriptのその他の型

TypeScriptには非常に多くの型があります。

その一つがany型です。any型はなんでも入る型です。

変数aはany型なので、変数bに代入することができます。

ただしTypeScriptの静的型付けという便利な特徴が台無しなので多用するのは良くない型だと思います。

既存のJSとの互換性を保つ為にanyを使うくらいだと思います。それでも共用型という型がTypeScriptにはあるので、any型より共用型を使用することをお勧めします。

ここで気になるのは、変数bの型はstringなのかnumberなのかanyなのか、です。

なんと変数bはnumberに変換されてしまいます。これはちょっと注意ですね。

Object型はJSではめっきり以下の記述するようになりました。

これをTypeScriptで記述すると以下のようになります。

同じですね。実はTypeScriptには{}型というのがあります。

これについても後日記載します。。

TypeScriptの型推論

TypeScriptでは型推論してくれます。これは便利です。

変数の初期化

変数を初期化すると型推論してくれます。

では初期化しないとどうなるかというとany型になります。

また、nullやundefinedで初期化した場合もany型となります。

ただし、設定ファイルで動作は変わります。

TypeScriptの型キャスト

TypeScriptの共用型

any型を使うなら共用型という型があります。共用型とは複数の戻り値を許容する方です。

型を|で区切って指定します。以下記述例です。

stringかnumberを許容しますが、booleanが代入されるとエラーとなります。関数の型でも使えたりするので共用型は積極的に使いましょう。

TypeScriptのenum型

TypeScriptではenum型が使えます。これは以下のように記述します。

enumの列挙子はデフォルトで0,1,2…と初期化されます。

もちろん初期化することも可能です。

結果は以下のようになります。

配列の宣言

TypeScriptで配列の宣言方法です。

連想配列(ハッシュ)の宣言

TypeScriptで連想配列(ハッシュ)を宣言してみます。

変数名hashが連想配列です。keyは実はiでも何でもいいです。連想配列のキーの型を指定する為に必要なだけで、今回はnumber型をキーとしています。

:string;でキーに対する値の型を指定しています。ここではstring型を指定しています。

試しにエラーにしてみたいと思います。

これでnpm run buildとすると、「error TS2322: Type ‘{ ‘a’: string; 1: string; }’ is not assignable to type ‘{ [key: number]: string; }’.」とエラーが確認できます。

連想配列のインデックスシグネチャは必須

連想配列のインデックスシグネチャとは、{[key:number]:string;}の部分です。

連想配列のインデックスシグネチャを省略してみます。きっと型推論してくれるので、、。

インデックスシグネチャを省略すると、暗黙的にany型として型推論されてしまうため、エラーとなります。実質、連想配列のインデックスシグネチャは必須です。

interfaceキーワードを使用して連想配列のインデックスシグネチャを定義する

TypeScriptでは、interfaceキーワードを使用して連想配列で実質必須であるインデックスシグネチャを定義することができます。

以下、定義例です。

さきほども書きましたがiでもindexでもkeyでもなんでもいいです。キーの型名を指定するために必要となります。

TypeScriptのタプル型

TypeScriptのタプル型は配列とよく似ています。各要素の型が異なる点が特徴です。

TypeScriptの関数宣言

TypeScriptの関数の記述方法です。

number型のa,number型のbという引数と、戻り値はstringというように定義しています。

実行結果は以下のようになります。

このことからTypeScriptにはfunction型という型が存在することがわかります。

関数宣言をアロー関数で宣言する

やっぱりアロー関数でせんげんしてみましょう。thisを束縛してくれるのでアロー関数が断然便利ですから。

TypeScriptのアロー関数宣言は簡単です。

TypeScriptのアロー関数は、本体が1文の場合は{}とreturnを省略することができます。

関数の引数を任意引数にする

TypeScriptでは引数を任意にすることができ、引数がなければ省略することができます。

undefinedのチェックをしているのは、引数aは任意引数のため、型推論でstring | undefined型となってしまうからです。

関数の引数が省略された場合デフォルト値を設定する

TypeScriptでも引数にデフォルト値を指定することができます。

引数が省略された場合は仮引数にデフォルト値が設定されるため、undefinedのチェックが不要になりますのでお勧めします。

TypeScriptのポイント

  • varは使わず、基本はconst,無理ならletを使用する
  • anyはなるべく使わない、代わりに共用型を使用する
  • nullとundefinedはtsconfig.jsonで許容しない設定にする
  • let,const,class,extends,アロー関数,デストラクチャリングなどが使える
  • 静的型付けである

関西で140-170/80~120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
Python3.6,Djangoを勉強中です,Javaは少し飽きてしまってます–;
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくば、我に七難八苦を与えたまえ」です^^

スポンサーリンク
  • このエントリーをはてなブックマークに追加
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA