メモ：TypeScriptはじめ

今は昔、CoffeeScriptやらTypeScriptやらが流行っているのは知っていたが、一人で書く事が大半だったので生のJavaScriptでしか書いてこなかった。
が、2020年も超えてTypeScriptを使わない理由も特にないので、一応知っておこうという事で基本をメモ。
こことかこことかここを参考にする。

#特徴

• 変数の型定義、型推論が可能
• クラスの作成、継承 が可能
• インターフェースの作成が可能
• 上位互換のため、構文は JavaScript のものをそのまま使える ため学習コストが低い
• VSCode による強力な補完機能が利用可能

インストール

グローバルでインストールした。

npm install -g typescript
npm install -g ts-node

TypeScriptは4.5.2で入ってきた。

実行確認

まずは単純なスクリプトで試してみる。

let message : String = '';
message = " World!"
console.log("Hello" + message);

実行すると
Cannot find name 'console'.
のエラーが出たので検索すると
npm install @types/node --save-dev
が必要だった模様。
入れるとエラーがなくなった。

tsc test.ts
で.jsが出来る。

TypeSceiptの基本

構文はほぼJavaScriptままで使えるので、主な特徴の型指定、インターフェース、クラスについて。

変数の型

旧来の
JavaScript の var 変数の他、その後 ES6 で導入された let,const が利用可能だが、基
本的には代入可能な場合は let 、定数は const を利用する。
これら
va r と let は似ているが、関数スコープが異なる。 varは ファンクション、letはブロックスコープを持つ。
これにより let は var と違って意図せぬ不具合が混入しづらいためTypeScriptでも基本的にはletを使う方が良い。
その上で、TypeScriptでは変数を型指定込みで宣言する場合はコロンに続いて型を記述する。

// 文字列
let str: string = 'mebee';
 
// 数値
let num: number = 1;

基本のプリミティブ型は以下
string, number, boolean, symbol, bigint, null, undefined

let status: "get" | "post" | "delete";
のように文字列を指定する事も可能。

インターフェース

インターフェースを定義して、型として利用する事が可能。

interface MyType { foo: string; bar: number; }
let obj: MyType;

勿論クラスのメンバをインターフェースで定義する事も可能。

interface MyInterface{
  getName():void;
  getDetail():{address:string};
}

class MyClass implements MyInterface{
}

のようにしてメソッドの実装を強制する事が可能。

又、配列の定義にインターフェースを利用する事で、異なるクラスでも同じインターフェースを持っていれば放り込める。

クラス定義

クラスそのものはJavaSciptにも概念は存在しているが、拡張されている。

constructorでコンストラクタを定義する、という部分だけ知っていればクラスは作る事が出来る。
クラスはextendsで継承可能。

class hoge {
 
    private x: string; // private宣言も出来る
 
    constructor(name: string) { // コンストラクタ
      this.x=name;
    }
     
    foo() {
      console.log(`Hello, ${this.word}`);
    }
  }
  
  class hage extends hoge {
    // 継承
  }
  
  const hogehoge = new hoge('TypeScript'); // コンストラクタを実行
  hogehoge.foo();

クラスとは直接関係ないが
文字列で
val=”Hello“+ _name をバッククオートを使って、val=`Hello ${_name}` ;と表現できる。

getter,setter的なものはset/get + メソッド名で作成が可能。

private _name: string = '';
set name(value: string) {
this._name = value;
}
get name(): string {
return this._name;
}

cls.nameのようにメンバ名でアクセスして利用可能。

その他色々あるが、例えばコンストラクタの省略形はTypeScriptを知っていないと分かりづらいので使わない方が良さそう、と感じた。

コンパイル

オプションを付ける事で厳しく出来る。厳しければ良いというものではなく、納得できるレベルというのが重要。
少なくとも使うだけでもある程度の恩恵は得られる。
型エラーでコンパイルできない場合はanyの型にする事でとりあえず潰す事が可能。
とりあえず厳しすぎるとしんどいので以下をtsconfig.jsonに設定して

"strict": false
"incremental": true
"removeComments": false
"noImplicitAny": false

あとはこの辺りをどうするかを検討すればよいが、一旦falseで始めてみてもいいかも。

"strictNullChecks": false
"strictBindCallApply": false
"strictPropertyInitialization": false
"strictFunctionTypes": false

毎回コンパイルするのが面倒な場合はwatch機能で変更時の自動コンパイル。

おわり