プログラミンGOO

プログラミングナレッジ、ワードプレス、広告収入等について、気づき・備忘録を残していきます。いつか誰かが夢をかなえる細い細い道しるべになりますよう。

typescript備忘録

【概要】

マイクロソフト開発

JavaScriptの拡張。大規模開発に対応できるように

・静的な型付け(jsは動的)なので一度型が決まると変えられない

・クラスベースのオブジェクト指向

・公式サイト: https://www.typescriptlang.org/




【基本】

main.tsファイルを作成

tsc main.ts //実行

node main.js //コンソール出力




型推論が適用される

var i: number = 10; //型明示

var i = 10; //型推論でintと判断される

var x; //any型 

■配列

var results: number[];

results = [10, 5, 3];

■列挙

enum Signal {

    Red = 0,

    Blue = 1,

    Yellow = 2

}

enum Signal {   //数値は省略できる

    Red,    //0

    Blue = 3,

    Yellow  //4 ※設定の後からの連番になる

}

var result: Signal;

■関数

function 関数名(引数): 戻り値 {

    return a + b;

}

例)

function add(a: number, b: number): number {

    return a + b;
}

//戻り値が無い場合はvoid

//?を付けて引数の要求を任意にすることができる。(a: number, ?b: number)

ただし、任意の引数の後に必須の引数を定義することはできない

//引数に初期値を渡すこともできる(a: number = 10, ?b: number)




■無名関数

var add = function(a; number, b: number): number{ 

    return a + b;

}

アロー関数にすると

var add = (a; number, b: number): number => { 

    return a + b;
}

さらに短く

var add = (a; number, b: number): number => a + b;

■関数のオーバーロード(関数名が同じで型が違う)

function add(a: number, b: number): number;
function add(a: string, b: string): string;

function add(a: any, b: any): any { //関数宣言はany型にする
    if(typeof a === "string" && typeof b ==="string"){
        return a + " " + b;
    }

    return a + b;
}

console.log(add(5, 3)); //8
console.log(add("hello", " world"));    //hello world

//その他の組み合わせはコンパイルエラーになる

■クラス

class User {

    public name: string;

    constructor(name: string){

        this.name = name;
    }

//変数宣言とコンストラクタ処理を同時に行う場合、

//以下のように宣言もコンストラクタ内の記述も不要

    constructor(public name: string){

//private _nameのように、プライベートの場合は慣習的に_を付ける
    }

    sayHi(): void{  //メソッド。functionは書かない

        console.log("hi! i am " + this._name);
    }

    //ゲッター(getter)とセッター(setter)

    get name() {

        return this._name;
    }

    set name(newValue: string) {

        this._name = newValue;
    }
}

var tom = new User("Tom");

console.log(tom.name);

tom.sayHi();

■継承 ※例として上記のUserクラスを継承

class AdminUser extends User {

    constructor(_name: string, private _age: number) {

        super(_name);
    }

    public sayHi(): void {  //親クラスと同じメソッド名を使うとオーバーライドする

        console.log("my age: " + this._age);

        super.sayHi();  //親クラスのメソッドを呼ぶ
    }
}

継承される可能性があるクラスは、親クラスのプロパティの修飾子はprotectedが良い




■静的メンバ・静的メソッド

class User {

    constructor(private _name: string){

        User.count++; //静的メンバにアクセスするにはクラス名(User)を付ける
    }

    static count: number = 0; //静的メンバ

    static showDescription(): void { //静的メソッド

        console.log("this class is about users");
    }
}

console.log(User.count); //静的メンバ呼び出し

User.showDescription();

【環境構築】

参考:https://qiita.com/ochiochi/items/efdaa0ae7d8c972c8103

・node.jsのインストール

https://nodejs.org/ja/

コマンドプロンプトで確認

node -v

npm -v

・typescriptコンパイラのインストール

npm install -g typescript //-g:グローバル環境にインストール

確認

tsc -v