TypeScript入門

# 著者のバックグラウンド

他の言語経験者でJavascriptは知っている程度です

  • 業務で使う言語: Python
  • API程度なら作ったことある: Go
  • 学生時代: C, Perl
  • 触ったことある: C++, JavaScript

# 書籍

下記の書籍をWingsプロジェクトから寄稿して頂いたのでどの程度まで理解できるか試してみました。

速習TypeScript

https://www.amazon.co.jp/dp/B0733113NK

# TypeScriptの利点

# 環境構築について

簡易的な手法

下記の環境でブラウザ上で動作させることができます。

https://www.typescriptlang.org/play/

## コマンドラインでの環境構築

コマンドラインで実行できると実際の開発の場面で役に立つのでその手法も記述されていました。

node.js の導入

下記で環境ごとに導入が可能です。

https://nodejs.org/en/download/package-manager/

TypeScriptの導入

```
npm install -g typescript
```

 

# TypeScriptの文法

## 変数/データ型

stringの文字型の型を設定している場合に100という数字をいれるとエラーがでます。

 

### 型推論

データ型を指定せずに入力もできます。ただしデータ型は型推論によって数値型が推論されているので下記の場合でもエラーがでます。 

 

### 任意の型

anyを用いれば任意の型が設定できますが特別な場合を覗いて使用しないで下さい。型を設定しているTypeScriptの良さを活かせないからです。

 

### リテラル

特徴的なテンプレート文字列について紹介されていました。

改行コードが不要な点と宣言済みの変数を簡単に埋め込むことができます。

 

### 型アサーション

 

アサーションで型キャストして型を明示的に変更できます。型キャストは型チェクの機能が働きづらくなる原因にもなるので使う場所は最小限に抑える方がベターです。書籍には具体例も載っていました。

 

### ブロックスコープに対応したlet命令

 

`var`宣言の場合はブロック外でも1が表示されます。`let`命令で宣言するとブロック外は無効になります。また同一スコープ内の重複した変数宣言は許可しません。
`let`を使用するとスコープ最小化、重複チェック自動化されるため`let`を変数宣言に使用する方がベターです。

 

### const命令

 

後から再代入することを防いでいます。ただし配列などの各要素の置き換えができます。書籍には具体例も載っていました。

 

### 複数のデータを扱いたい場合

配列・連想配列・列挙型・タプル、多次元配列、配列生成方法、連想配列、列挙型、複数の型が混在したタプル型、共用型

 

複数の型が存在しているため下記のような処理の場合にコンパイルが通るがエラーが出る事象があるため積極的に使用しない方が良い

 

### 型エイリアス

特定の型に対して別名(エイリアス)を設定する仕組みです。

 

下記の理由からインターフェースでできる場合は使用しない方がベターです。

  • エラーメッセージに別名が表示されない
  • 継承・実装では利用できない

### null非許容型

`compileOptions`の`strictNullChecks`オプションにtrueを設定することですべての型でnull/undefinedを禁止出来ます。

 

### 型定義ファイルについて

書籍ではJavaScriptのライブラリを使用する際に必要な型定義ファイルについても言及されていました。
これによってTypeScriptでもJavaScriptのライブラリが使用可能になるようです。

型定義ファイルの詳細

https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html

 

# 関数の種類

function 命令、関数リテラル、アロー関数、オーバーロード、引数・戻り値型としての共用型、型ガード

 

# クラス

下記についての言及もありました。

 

  • クラス命令
  • 静的メンバー
  • 名前空間
  • 階層的な名前空間
  • 継承
  • オーバーライド
  • 抽象メソッド
  • インターフェース: 書籍では抽象クラスと比較してインターフェースの必要性を述べていました。
  • 構造的部分型: インターフェースを継承していなくてもインターフェースのメソッドをすべて備えている場合にオブジェクトの代入が可能
  • 型注釈としてのインターフェース
  • オブジェクト型のリテラル: その場限りの型情報の明示
  • 型としてのthis: thisを用いることでメソッドチェーンのような記述が可能。thisを用いることで継承したクラスがあった場合はその継承したクラスのオブジェクトを返すことが可能
  • ジェネリック: 配列に特定の型情報だけ限定する場合
  • クラスで表現するケース: 型引数は複数与えることも可能
  • クラスの型付
  • ジェネリックメソッド
  • オブジェクトをマージする関数

 

# VS Code

書籍では詳細にVS Codeを用いた実装方法が記述されていました。

# 理解度

 

他の言語で共通の機能もありつつ、経験した言語にはない機能もあって新しい発見がありました。型のないPythonにもType Hintという機能がついたのでここの知識を活かして型のない言語から型付の言語への移行にも取り組んでいこうと思っています。

 

# 最後に

WINGSプロジェクトの書籍レビュアーに応募し、献本して頂いたので、書評を書きました。

文法を理解するのに体系的にまとめられており、実際に使用できるツールの紹介もあったので良かったです。
JavaScriptで作成したものをTypeScriptにリプレースするのに最適だと思います。
本記事では文法の羅列になっていますが書籍では個々の内容の説明も詳しく記述されています。

WINGSプロジェクト
- http://www.wings.msn.to/