Multi Vitamin & Mineral

Multi Vitamin & Mineral です。プログラムに関することを書いております。

トップ > 環境・ツール__VSCode > TypeScript をサクッと一通り知る

TypeScript をサクッと一通り知る

環境・ツール__VSCode 言語・ライブラリ__TypeScript

TypeScriptとは？

Microsoftが開発した言語。JavaScript(ES6)に型を付加したような言語です。 TypeScriptをコンパイル（ tsc = type script compiler）してJavaScriptに変換して使います。

なぜ TypeScript ？

JavaScript + 型 = TypeScript

さて、型があると何が良いのでしょう？　それは実行前に型を間違えたか問題が分かる点です。Javaのような型のある言語を使っている人にはこのメリットの大きさは分かるでしょう。（型に限らず問題を事前に把握できることのメリットは多大ですよね。）

tsc

tsc というツールが提供され、これで TypeScript を JavaScript に変換します。 通常は、 Node.js がある環境で、 npm を使ってインストールして使います。 また、 tsc はコマンドラインで利用します。

トランスパイル

さて、ここで言うコンパイルはトランスコンパイル（＝トランスパイル）です。 他の言語（C言語やJavaなど）のコンパイルのようにマシン語や中間言語に変換しません。トランスコンパイルは別の言語に変換することを指します。

tsc は TypeScript を JavaScript にトランスパイルをしてくれるツールです。

JavaScript のバージョンに注意

また、JavaScriptのバージョンにも注意です。JavaScript(ES6)はIEの古いバージョンでは動きません。忌々しいIEではありますが、一応今でも生きているので念の為にJavaScript(ES5)やJavaScript(ES3)に下げることも多いでしょう。 tsc はどのJavaScriptのバージョンに変換するか指定できます。（ --target ES5 のようなオプションを付けられる。詳細はこちら。）デフォルトだとJavaScript(ES3)に変換してくれます。

TypeScript -> トランスパイル（tsc） -> JavaScript(ES3)

インストールと利用

1. インストールなしに試す

公式サイトにPlaygroundがあります。

www.typescriptlang.org

左側にTypeScriptを入力したら、右側にJavaScriptが表示されます。「Run」で実行も可能です。取り敢えずTypeScriptを書きたいだけならこれが一番お気軽かと思います。

2. グローバルインストール編

ローカルPCにインストールし、コンパイルできるようにするパターンです。

TypeScript は npm にホスティングされているので、npm を利用します。 先にローカルに Node.js をインストールし、利用することにします。

VSCode であれば、 Ctrl+@ でコンソールを開き、以下のコマンドを打ちます。バージョン番号が表示されれば Node.js のイントールはうまく行ってます。 （Windowsであれば、VSCode と gitbash を関連付けるのがオススメです。）

$ node -v
v12.16.1
$ npm -v
6.14.2

続いてTypeScriptをインストールします。

$ npm install -g typescript
$ tsc -v
Version 3.8.3

TypeScriptのファイルは拡張子を .ts にします。以下のファイルを作成し、以下のコマンドで変換してみます。

// js/main.ts
// TypeScriptの型指定を入れた
function sayHello(name: string): void {
  console.log(`Hello ${name}!`); // ES6のテンプレート文字列を使った
}
let myName: string = "TypeScript";
sayHello(myName);

$ tsc js/main.ts

js/main.js が生成されました。

// js/main.js
// TypeScriptの型指定を入れた
function sayHello(name) {
    console.log("Hello " + name + "!"); // ES6のテンプレート文字列を使った
}
var myName = "TypeScript";
sayHello(myName);

TypeScript、ES6の構文がすべてES3の構文に変換されているのが分かります。変換後の JavaScript は以下のコマンドで実行できます。

$ node js/main.js
Hello TypeScript!

3. プロジェクト内で利用編

特定のディレクトリ内（以降、プロジェクトと呼ぶ）だけで有効にする方法です。複数人で共有する場合はこちらを採用することになると思います。 PCにインストールするのとは違い、PC環境を汚さずに済み、プロジェクトフォルダを他人と共有しやすくなるというのがポイントです。PCによってTypeScriptのバージョンが違う、なんてトラブルも起きにくくなります。

こちらは長くなるので別の記事にしました。

multimineral-tech.com

TypeScriptの基本的な書き方

とりあえず覚えることは、変数、定数、関数、これらの右隣にコロン（ : ）と「型」を書くことです。 この「型」の種類を見ていきながら、それぞれの記述方法を確認します。

型

以下、覚えるべき主要な「型」をあげました。少ないので全部覚えます。 最主要は、 number , string , boolean です。配列やクラスもよく使うと思いますので、ここにあげています。

他にもありますがほぼ使わないものは外しました。（ object , unknown とか。）最初はここまでにして、必要な時に調べて覚えればOKでしょう。

(1) 基本型3つ+型なし

最主要の number , string , boolean 、それと any です。

// (1) 基本型3つ+型なし
// - number
// - string
// - boolean
// - any （JavaScriptと同様に型を決めない。できる限り使わないようにする。）

// 変数・定数の型
let b1: boolean; // 変数の右にコロンと型を書く。
const b2 = true; // 代入がある場合は型が決定するので省略可。

// 関数は閉じカッコの右にコロンと型を書く。
function add1(n: number): number {
  return n + 1;
}
// アロー関数でも同じ
const add2 = (n: number): number => n + 1;

(2) Array

[] をくっつければOK。

// (2) Array
const array: number[] = [10, 20]; // 型指定の右に[]を付加

(3) Object(interface, enum, type)

クラス系。

// (3) Object(interface, enum, type)
// Objectは予めinterfaceを作る
interface Hoge {
  a: number;
  b: number;
}
const hoge: Hoge = { a: 3, b: 4 }; // 作ったinterfaceを型として利用できる

interface と似ているものとして type があります。以下のように書きます。

type Hoge = {
  a: number;
  b: number;
}

interface と違い = を使っていますが、機能はほぼ同じです。この記事では、特に理由がなければ type で良いと書いておきます。詳しくは以下の記事が参考になります。

jp.quora.com

列挙型は以下のようになります。

enum Color {
  Blue,
  Red,
}
const x: Color = Color.Red;

(4) 値なし系(undefined, nullable, void)

これは重要。 JavaScript ではおなじみの値がない系。 undefined と null に対しては型宣言をすることでその取り扱いを限定できます。加えて、関数の返却値なしの void にも触れておきます。

// (4) 値なし系(undefined, nullable)
// - undefined -> 値なしOK
// - nullable -> null指定OK
// - void -> 関数の場合の返却値なし

// interface を使った場合を例にとります
interface Hoge {
  a: number | nullable; // またはnull指定OK
  b?: number; // ?をつけるとundefinedもOK
}
const hoge1: Hoge = { a: 3, b: 4 };
const hoge2: Hoge = { a: null, b: 4 }; // aはnullでもOK
const hoge3: Hoge = { a: 3 }; // bは値なし(undefined)でもOK

// 返却値のない関数であることを明示します
const add3 = (n: number): void => console.log(n + 1);

クラス

基本的にはJavaScript(ES6)と同じです。 コンストラクタの引数を直接プロパティにできちゃうこと、アクセサ（ getter/setter）を作るための専用の構文があること、これらは知っておくと良いです。

class Member {
  // 以下でも同じ
  // private _name;
  // public constructor(name: string) {
  //   this._name = name;
  // }
  constructor(private _name: string) {}

  // get/set でアクセサを作れる
  get name(): string {
    return this._name;
  }

  set name(newName: string) {
    this._name = newName;
  }

  public sayHello(): string {
    return `I'm ${this.name}.`;
  }
}
const hoge = new Member("pochi"); // インスタンス化
console.log(hoge.name); // getterにアクセス
console.log(hoge.sayHello());
hoge.name = "tama"; // setterにアクセス
console.log(hoge.name); // getterにアクセス
console.log(hoge.sayHello());

結果は以下になります。

pochi
I'm pochi.
tama
I'm tama.

ただし、アクセサはES5以降ではないとトランスパイルできません。ですので tsc classsample.ts --target ES5 のように変換先の指定を入れてください。tsconfig.json を使っている場合は "target": "es5", のようにES5以降に設定されていればOKです。