TypeScript - Himeyama/himeyama GitHub Wiki

開発環境

Node.js をインストールする

TypeScript をインストールする

npm install -g typescript

型ヒント

x: number

tsconfig.json の生成と編集

tsc --init

バージョンの指定

    "target": "ES2015",

ビルド先の設定

    "outDir": "build",

言語

関数

例1: 引数のある関数

function func(message: string){
  console.log(message);
}

func("Hello, world!");

例2: 引数と戻り値のある関数

function func(message: string): string {
  return "Hello, " + message + "!";
}

console.log(func("world"))

例3: 省略可能な引数

function addNumbers (x: number, y?: number): number {
    if (y === undefined) {
        return x;
    } else {
        return x + y;
    }
}

console.log(addNumbers(1, 2));
console.log(addNumbers(1));

例4: 引数に規定値を設定

function addNumbers (x: number, y = 25): number {
   return x + y;
}

console.log(addNumbers(1, 2));
console.log(addNumbers(1));

例5: 引数に構造体を設定

interface Message {
   text: string;
   sender: string;
}

function displayMessage({text, sender}: Message) {
    console.log(`Message from ${sender}: ${text}`);
}

displayMessage({sender: 'Christopher', text: 'hello, world'});

例6: アロー関数

let addThreeNumbers = (x: number, y: number, z: number): number => x + y + z;
let addThreeNumbers = (x: number, y: number, z: number): number => {
   return x + y + z;
}

クラス

用語

  • プロパティ...別名、フィールド。オブジェクトのデータ (属性) のこと。
  • コンストラクタ...オブジェクトの生成・初期化時の関数。
  • アクセサ...getset を行う関数。
  • メソッド...オブジェクトに対する関数。

例 1

class Car{
   make: string;
   color: string;
   doors: number;

   constructor(make: string, color: string, doors: number = 1){
      this.make = make;
      this.color = color;
      this.doors = doors;
   }

   get getMake() : string{
      return this.make;
   }

   set setMake(make: string) {
      this.make = make;
   }
}