TypeScript memo - ふらぱいく

オブジェクト指向の復習も含め初歩の初歩から

型キャスト

()で囲むとオブジェクトになる?

let message;
message = 'abs;
let endsWithC = (<string>message).endsWith('c');
let alternativeWay = (message as string).endsWith('c');

関数

let log = function(message){
   console.log(message);
}

// X
let doLog = (message) => {
   console.log(message);
}

// O
let doLog = () => console.log();

複数の引数の関数

// X
let drawPoint = (x, y) => {
   // ...
}

// O
let drawPoint = (point) =>{
   // ...
}

drawPoint({
   x: 1,
   y: 2
})

型指定インターフェイス

interface Point {
   x: number,
   y: number
}

let drawPoint = (point: Point) => { 
   // ...
}

drawPoint({
  x: 1,
  y: 2
})

クラス

関連性の高い変数(プロパティ)と関数(メソッド)をグループ化したもの

class Point {
  x: number;
  y: number;
 
  draw() {
      console.log('X: ' + this.x + 'Y: ' + this.y); 
   }

  getDistance(another: Point) {
      //...
   }
}

// X
// let point: Point;  // エラー

// O
let point = new Point();
point.x = 1;
point.y = 2;
point.draw();

コンストラクタ

class Point {
  x: number;
  y: number;

  constructor(x: number, y?: number) {  // ?: nullable
     this.x = x;
     this.y = y;
 
  draw() {
      console.log('X: ' + this.x + 'Y: ' + this.y); 
   }

  getDistance(another: Point) {
      //...
   }
}

// X
let point = new Point();
point.x = 1;
point.y = 2;
point.draw();

// O
let point = new Point(1, 2);
point.draw();

// O
let point = new Point(1);
point.draw();

アクセス修飾子

private, public, protected

class Point {
  constructor(private x: number, private y?: number) {  // ?: nullable
     this.x = x;
     this.y = y;
 
  draw() {
      console.log('X: ' + this.x + 'Y: ' + this.y); 
   }

  getDistance(another: Point) {
      //...
   }
}

// X
let point = new Point(1, 2);
// point.x = 3;
// point.y = 4;

プロパティ(getter, setter)

値の受け渡し程度しか，まだ理解してない。なにしてんのこれけっきょく。

よく分からない解説

以下の2つのコードは同じ処理

class Point {
  constructor(private x: number, private y?: number) {  // ?: nullable

  draw() {
      console.log('X: ' + this.x + 'Y: ' + this.y); 
   }

  getX() {
      return this.x;
  }

  setX(value) {
      if (value < 0) 
         throw new Error('value cannot be less than 0.');
      this.x = value;
}

let point = new Point(1, 2);
let x = point.getX();   // get: 値を受け取る
point.setX(10);           // set: 値をセットする
point.draw();

class Point {
  constructor(private x: number, private y?: number) {  // ?: nullable

  draw() {
      console.log('X: ' + this.x + 'Y: ' + this.y); 
   }

  get X() {
      return this.x;
  }

  set X(value) {
      if (value < 0) 
         throw new Error('value cannot be less than 0.');
      this.x = value;
}

let point = new Point(1, 2);
// let x = point.getX();   // get: 値を受け取る
let x = point.X;

// point.setX(10);           // set: 値をセットする
point.X = 10;

point.draw();

readonlyはset Xをコメントアウトすることでも実現できる(その場合 point.X = 10 がエラーとなる)。
なるほど。

Module

typescriptでは，1ファイル1classと言う規則がある。クラスと呼び出しを別ファイルで行う場合Moduleとして扱う。import, export の関係。

// Moduleとして外部へ提供する場合，アクセス修飾子にexport を付与。
class Point {
  constructor(private x?: number, private y?: number) { 
  draw() {
      console.log('X: ' + this.x + 'Y: ' + this.y); 
   }
}

// import {クラス名} from 'ライブラリのパス'
import { Point } from './point';
let point = new Point(1, 2);
point.draw();