TypeScriptの基本備忘録

Angularを触る上でTypeScriptは必須なので勉強した内容を残しておこう。

・型
・変数宣言
・関数
・アロー関数
・クラス
・アクセス修飾子
・クラスの継承
・インターフェース

型

配列型: string[ ], number[ ]
オブジェクト型: {[index: string]: string}
タプル型: [number, string]
enum型(列挙型) :Color{red,blue,green}
※stringやnumberなどの基本的な型省略します

変数宣言

var =>変数の巻き上げが起こる
let => 変数の巻き上げが起こらない
const => 定数にする　再代入が不可能 誤った代入を防ぐ

主にletとconstを使うようにする

関数

仮引数と返り値に型指定できるない場合は:voidを指定

例：
function greet(name: string = 'Taro') :string{
  return 'hello + name + !!!';
}

アロー関数

例：
let hello = (name:string): string => {
  return 'hello, ${name}!';
}

・オブジェクトのthisが固定出来る
・javascriptのアロー関数thisは曖昧らしい
・functionの代わりになる

クラス

class クラス名 {
  アクセス修飾子　プロパティ名: 型 = 値;
  // クラス自身のアクセスの制御

  constructor(引数: 型) {
    this.プロパティ２ = 'プロパティ2';
  } //クラスの初期化時に実行

  メソッド(引数: 型): 返り値の型 {
    console.log(this.プロパティ === 'プロパティ')
  } 

}

例：
class Animal {
    age: number = 10;

    constructor(private isCry: boolean, private legs: number) {} //初期化

    cry(): void { //メソッド
        if(this.isCry) {
            alert('legs:' + this.legs);
        }
    }
}

let dog = new Animal(true, 4); //インスタンス化
dog.cry();

アクセス修飾子

public : 外部のどこからでもOK デフォルト
protected : 自身のクラスとその派生クラス
private : そのクラスのみ

クラスの継承

クラスの上書き、使いまわせる、クラスの肥大化を防げる

例：
class Animal {
    age: number = 10;

    constructor(private isCry: boolean, private legs: number) {} //初期化

    cry(): void { //メソッド
        if(this.isCry) {
            alert('legs:' + this.legs);
        }
    }
}

class Dog extends Animal {  //extends Animal アニマルクラスを継承したdogクラスを作った

    cry(): void { //メソッドを変更
        super.cry(); //superアニマルクラス・メソッドを呼び出すことができる
         if (this.isCry) {
             alert('ばうばう');
          }
     }
}
let dog = new Dog(true, 4);
dog.cry();

 // アニマルクラスののcryメソッドが上書きされる意味

インターフェース

・定義だけで実装がないクラスのようなもの
・クラスの特定の機能を強制的する
・実装の設計図みたいなもの

interface Animal {
    name: string;
    legs: number;
    isCry: boolean;
    cry(): void;
} //実装の設計図

class Dog implements Animal { //implementsはクラスにインターフェースを適用 Animalは使うインターフェース名
    name: string = 'taro';
    legs: number = 4;
    isCry: boolean = true;

    cry(): void {
        if (this.isCry) {
            alert('ばうばう');
        }
    }
}

一言

とりあえずメモした内容を残しておく。
クラスは設計図でその設計図から出来上がったのがインスタンス。
ようやく意味がわかったのでした。
この辺は後でイラストにして書こうっと♪