現場TypeScriptでReact開発「連載中②」

TypeScript概要

TypeScript はなぜ人気言語? 

今までは Create React App や React Native も本家が公式にTypeScriptをサポートしてい るし、React コミュニティだけに限っても公式が推してた
https://reactnative.dev/docs/typescript

TypeScript の勢力は日々拡大してる

『静的型付け』『型推論』『Null 安全性』という最近のプログラミング言 語のトレンドを押さえつつ、それ以外の部分はまんま JavaScript と同じ構文、というのが大きかっ たと思います。

静的型付け言語は、次にnull 安全性を手に入れた。TypeScriptも2016 年リリースのバージョン 2.0 から正式にこれに対応した。

後はTDDの文化がRubyコミュニティから広まって いったのは、静的な型チェックがないためにメソッドの引数や返り値の型検証をテストを書くことで保証する必要性があったというのも理由のひとつだったんです

TDDとは「Test-Driven Development(テスト駆動開発)」のこと。

プログラムに必要な各機能について最初にテストを 書き(テストファースト)、それをパスする必要最低限な実装をとりあえず行った後、そのコードを洗練させていく、という工程を繰り返すというスタイルの開発手法。

今は皆さん毎日、社内チャットで使ってる Slack も React と TypeScriptで作られてます。

2017年Google社内の標準言語としてTypeScriptが承認される。

TypeScriptのローカルマシンでの実行環境は、ts-nodeが代表的に。

今ならDenoでも直接 TypeScript が実行できるけど、npmで環境を合わせるために今回は ts-node を使おう。

default-package プラグインでグローバルインストール済みのはずです。

コマンド

 ts-node -v 

もしなかったら

npm install -g typescript ts-node 

実行すればあらためてインスト ールできます。

特徴①『型アノテーション(Type Annotation)』

型アノテ ーションによって静的に型付けされた情報はコンパイル時のチェックに用いられ、書かれたコード 中に型の不整合があるとコンパイルエラーになます。

数値型 number として型宣言されたnには文字列型のデータを代入することはできず、エラーになってるんです。

ts-node
> const s = '123';
>constn=456;
>s*3
[eval].ts:4:1 - error TS2362: The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.

var foo: number = '123'; // エラー: `string` を `number` に代入できません

区別
JavaScript には悪名高い『暗黙の型変換』という機能があって、この例のように文字列データを算 術演算しようとすると、勝手にその変数の型を数値型に変換してしまうのね。

いっぽう TypeScript では、数値型と互換性のない型のデータは算術演算が許されないのでコンパイルエラーになります。

特徴②『型推論(Type Inference)』

コンパイラがその文脈からその型を推測できる場合は、 型アノテーションを省略しても自動的に補完して解釈してくれる。

ちなみにその変数がコンパイラ にどう型推論されてるかというのは、VSCode ならその上にマウスカーソルをホバーさせると、ポ ップアップでその型を教えてくれます。

var foo = 123;foo = '456'; // エラー: `string` を `number` に代入できません
// foo は number でしょうか？ それとも string でしょうか？

特徴③構造的な型(Structural type system)

配列の型を見てみよう

const numArr: number[] = [1, 2, 3];

型名の後ろに [] をつけると、その型データの配列になるんですね。

直感的でわかりやすいです、なお配列は Arrayオブジェクトとして定義する別の書き方もできます。

const strArr: Array<string> = ['one', 'two', 'three'];

TypeScriptでも同じく『ジェネリクス(Generics)』と呼ぶ。それで前者と後者の書き方、どっちでも挙動は同じなんだけど、

一般的なコーディングルールでは後者よりも前者のようなスタイ ルが推奨されることが多いので、前者の方式 [] で配列を表現します。

オブジェクトの型を定義する際は、プロパティのキー名と値の型を明記する形でこ のように型アノテーションを行う

const red: { rgb: string, opacity: number } = { rgb: 'ff0000', opacity: 1 };