Learn : TypeScript

2019/10/24(Thu) - 17:14

TypeScriptとは

  • JavaScriptに対して、省略も可能な静的型付けとクラスベースオブジェクト指向を加えた厳密なスーパーセット。コードをコンパイルするとJavaScriptにしてくれる。
  • tscというコンパイラを利用することで.tsファイルを.jsに変換して利用する。

機能

TypeScriptでできることについて説明する。

型アノテーション

関数に対して「型アノテーション」を追加できる

  • 関数内に入る型は「これ」やでという指定ができる
// 型アノテーションの追加
function greeter(person: string) {
  return "Hello, " + person;
}

let user = [0, 1, 2];

// String型以外が入っているのでエラーとなる
document.body.innerHTML = greeter(user);

Interface

InterfaceはTypeScript独自の構文で、オブジェクト型に名前をつける機能。

下記の例でいうと { a: number, b: number }というオブジェクトに対して Result という名前をつけている。

// Resultというインターフェイス(オブジェクト)を定義
interface Result {
    a: number;
    b: number;
}

// sum(result: Result)と書くことで引数resultは必ずaとb持たなければならない
const sum = (res: Result) => {
    return res.a + res.b;
}

const result_A = {
    a: 30,
    b: 20
};

const result_B = {
    a: "str", 
    b: 20
};

console.log(sum(result_A)); // 50 が出力される。
console.log(sum(result_B)); // Type 'string' is not assignable to type 'number'.
// Resultというインターフェイスを定義(今回はaがany)
interface Result {
    a: any;
    b: number;
}

const sum = (res: Result) => {
    return res.a + res.b;
}

const result_A = {
    a: 30,
    b: 20
};

const result_B = {
    a: "str",
    b: 20
};
console.log(sum(result_A)); // 50 が出力される。
console.log(sum(result_B)); // str20 が出力される(aがanyのため)

Type

基本的に他の「型」のエイリアスを作るものである。

// hogeという型は文字列型である
type hoge = string;

// 下記の変数はhogeという型を持っている 
const comment1:hoge = 'HOGE'; // OK
const comment2:hoge = 100; // Type '100' is not assignable to type 'string'.
sl

先程のInterfaceでの実装をtypeでも同様に実装する事も出来るが、

同様のものをInterfaceで実現できる場合は、Interfaceを使う事が推奨されている。

// Resultという型は
// { a: number, b: number }というオブジェクトを持っている
type Result = {
    a: number,
    b: number
}

const sum = (res:Result) => {
    return res.a + res.b;
}

const result_A = {
    a: 20,
    b: 30
}

console.log(sum(result_A));

文字列リテラル型(String Literal Type)

  • 型に文字列リテラルを指定できるTypeScriptの独自機能
// 'hoge'か'fuga'しか代入できないHugeFuga型を定義
type HogeFuga = 'hoge' | 'fuga';

// コンパイルエラーになる
const say:HogeFuga = 'Piyo'; // Type '"Piyo"' is not assignable to type 'HogeFuga'.

Index Type

  • プロパティが動的に変化するオブジェクトの場合もコンパイラで可能な限りの型チェックを行う
type StringMap = { [key: string]: string };

型の合成(Intersection Type )

  • 型の積集合を作成 / 2つの型を混ぜ合わせる
// Insersection Type
type Hoge = { x: number };
type Fuga = { y: number };

// Point2Dは、xとyをメンバ(いわゆるObject内のkey)に持つ
type Point2D = Hoge & Fuga;

型の結合(Union Type)

  • どちらかの型を排他的に持つ型。
// Union type(下の例だとstring型もしくはnumber型をもつ)
type UnionType = string | number;

Generics(総称型)

型をパラメータ化できる型で、
パラメータ化された型を外から与えられる事で初めて実際の型が定義される

// <S, T>が型パラメーターを表している
interface Foo<S, T> {
  foo: S;
  bar: T;
}

// Fooを呼び出した際に、S,Tに型を指定した際に定義される
const obj: Foo<number, string> = {
  foo: 3,
  bar: 'hi',
};

アクセス修飾子

  • public – クラス外からもアクセス可能 / デフォルトの値
  • private – クラス内でのみアクセス可能
  • protected – 継承クラス内でのみアクセス可能
  • static – 静的なのでクラスで共有
//スーパークラス定義
class Super {
    constructor() {
        this.public(); //true
        this.private(); //true
        this.protected(); //true
        this.static(); //コンパイルエラー
    }
    public public(): boolean {
        return true;
    }
    private private(): boolean {
        return true;
    }
    protected protected(): boolean {
        return true;
    }
    static static(): boolean {
        return true;
    }
}

//サブクラス定義
class Sub extends Super {
    constructor() {
        super();
        this.public(); //true
        this.private(); //コンパイルエラー
        this.protected(); //true
        this.static(); //コンパイルエラー
    }
}

//インスタンス
let test = new Sub();
test.public(); //true
test.private(); //コンパイルエラー
test.protected(); //コンパイルエラー
test.static(); //コンパイルエラー

//クラス静的メンバ
Sub.public(); //コンパイルエラー
Sub.private(); //コンパイルエラー
Sub.protected(); //コンパイルエラー
Sub.static(); //true

参考

カテゴリ