TypeScriptメモ（1） - ひとりごと

日頃使っているTypeScript。体系的に復習しようと思い、Udemyの講座を見ているのでメモを残します。見ている講座はこちら。

TypeScriptをやってない人に簡単に教えられるレベルの知識をすぐ引っ張り出せる、くらいを目標にしたメモです。Udemyの内容と個人的な理解の内容が混じったメモになっています。

TypeScriptとは

ES6にさらに機能が追加されたもの。
JavaScriptの弱点である型の扱いを厳格にしたもの。
開発専用言語。ファイル拡張子は「ts」。
ブラウザでは実行できない。コンパイルしてJavaScriptに変換する必要がある。

TypeScriptのインストール

以下をターミナルで実行

$ (sudo) npm -g install typeScript

npmがない場合はnodeをインストールする（公式サイトから）
tsc -v でバージョンが表示されればOK

TypeScriptのコンパイル

以下をターミナルで実行

tsc [ファイル名]

tsc --init

ファイル名を個別指定してコンパイルするのがめんどくさいので一括でコンパイルする方法がある

以下をターミナルで実行

tsc --init

tsconfig.jsonが作成される
以降、tsc のみで全ファイルをコンパイルできる

[memo] 後日別記事で補足予定

型の指定

型エラーがあった場合

コンパイル時エラーが出る
jsファイルへの変換は行われる（jsとしては問題ないコードのため）

[memo] 後日別記事で補足予定

型指定

変数宣言時、変数名の後に: 型という形式で型指定できる。

let num: number;
let str: string;
let bool: boolean;

any

型を柔軟に扱いたいときに使う。明示的に指定することが可能。

let num: any;

以下のように型を明示的に指定しなかった場合、

let num;

内部的には以下のように解釈される。

let num: any;

[memo] anyを使うことは可能だが、新規実装等であれば使わない方針にした方が良い。理由は、せっかくTypeScriptを使用しているのに、anyを使うメリットがないはずだから。一方、jsで書かれている既存コードをtsに変えていくような場合は、一時的にanyにしておいて段階的に型を指定していくという方法が現実的な場合もあると思う。何れにせよ、安易にanyを多用することはお勧めではないが、止むを得ない場合は使用を検討すると良い、という理解。

配列

Object型になる。以下の場合、string型の要素しか代入できない。

let strings: string[] = ["あああ", "いいい"];

どんな型でも代入できるようにしたい場合anyを使えるが、前述した通り推奨ではない。

let any: any[] = ["あああ", 123];

タプル

異なる型を配列に代入したい場合、以下のように指定できる。代入時、順番を守る必要がある。型指定と代入する値の型の順番が異なる場合、エラーになる。

let olympic: [string, number] = ["東京", 2020];

enum

先頭に「enum」
型名の先頭は大文字
0から順に自動的に数字が割り当てられる

enum Colors {
red, // 0
Green, // 1
Blue // 2
}
console.log(Colors.Green); //1

割り当てられる数字を意図的に変えることも可能

enum Colors {
red, // 0
Green = 100, // 100
Blue // 101
}
console.log(Colors.Green); // 100
console.log(Colors.Blue); // 101

関数の戻り値に型指定

戻り値の型にstringを指定

function methodA(): string {
    return “Hello!”;
}

戻り値がない場合

function methodB(): void {
    console.log("Hello!");
}

never

関数の戻り値型に指定した場合、コンパイル時エラーが出ない

function error(): never {
    throw new Error("error!");
}

変数の型に指定した場合、neverしか受け付けない

let something: never;

[memo] いつ使うの？後日別記事で補足予定。

引数の型を指定する

function methodC(num1: number, num2: number):numbler {
    return value1 * value2;
}

型としての関数

変数に関数を代入する

function methodB(): void {
    console.log("Hello!");
}
let myFunctionType;
myFunctionType = methodB;
myFunctionType()

変数に代入する関数の型を指定することで代入できる関数を制限することができる

let myFunctionType: (val1: number, val2: number) => number;

オブジェクト

オブジェクトの定義例

let userDate = {
    name: "太郎",
    age: 30,
}

内部的な解釈

let userData: {
    name: string,
    age: number,
} = {
    name: 太郎,
    age: 30,
}

指定したプロパティ名しか使えない
指定したプロパティ名に指定した型のデータしかセットできない
プロパティを増やせない

userData["place"] = "東京" // エラーになる

エイリアス

同じ条件を繰り返し使いたいときに使える

type Complex = {
    data: number[],
    output: (all: boolean) => number[]
}

let complex2: Complex = {
    data: [100, 200, 1.2],
    output: function(flag: boolean) => number[] {
        return this.data;
    }
}

union

共同体型、合併型
複数の型を許可すべきときに使う

let thisYear: number | string;

nullと組み合わせることが多いかも