【書評】プログラミングTypeScript 〜第5章〜

2020-04-04

O’Reillyから発売されている「プログラミングTypeScript」の書評。

https://www.oreilly.co.jp/books/9784873119045/

5章 クラスとインターフェース

TypeScriptは。クラスのプロパティとメソッドに3つの修飾子をサポート

  • public
  • どこからでもアクセス可能。これがデフォルトのアクセス
  • protected
  • このクラスとサブクラスのインスタンスからアクセスができる
  • private
  • このクラスのインスタンスからのみアクセス可能
abstract class Price {
  constructor ()
}

new Price('White', 'E', 1)  // エラー

abstractは抽象クラスを呼ばれ直接インスタンス化しようとするとエラーになる。

super

JavaScriptと同様に、呼び出し可能。

  • メソッド呼び出し、コンストラクター呼び出し

thisの戻り値型

thisの型付けは可能なので、当然使用可能

以下は別のクラスを拡張するクラスを作成する時に使える記述。

let set = new Set 
set.add(1).add(2).add(3) 
set.has(2) // true 
set.has(4) // false

class Set {
  has(value: number): boolean {
  ... 
  }
  add(value: number): this {
  ...
  }
}

インターフェース

typeと同じような形で使えるが違いがある。

食べ物を型付けして具体的な食べ物を更に型付けする場合

// Typeで書く場合
type Food = { 
  calories: number
  tasty: boolean 
}

type Sushi = Food & {
  salty: boolean
}
type Cake = Food & {
  sweet: boolean
}

// interfaceで書く場合
interface Food {
  calories: number
  tasty: boolean
}
interface Sushi extends Food {
  salty: boolean
}
interface Cake extends Food {
  sweet: boolean
}
  • インターフェースはnamsspaceのように2つ宣言したものが出てきても1つにマージしてくれる
  • typeはマージしてくれないので重複した場合にエラーになる。

実装例

  • readonlyが使える
  • implementsを使うとそのクラスが特定のインターフェースを満たすことを実現できる
interface Animal {
  readonly name: string 
  eat(food: string): void
  sleep(hours: number): void
}

interface Feline {
  meow(): void
}
class Cat implements Animal, Feline {
  name = 'Whiskers'
  eat(food: string) {
    console.info('Ate some', food, '. Mmm!') }
  sleep(hours: number) {
    console.info('Slept for', hours, 'hours') }
  meow() {
    console.info('Meow')
  }
}

デザインパターン

ファクトリーパターン

  • 何らかの型オブジェクトを作成するための方法。
type Shoe = {
  purpose: string
}

class BalletFlat implements Shoe {
  purpose = 'dancing'
}

class Boot implements Shoe {
  purpose = 'woodcutting'
}

class Sneaker implements Shoe {
  purpose = 'walking'
}

上記のようにじっそうしておけば.createで呼び出すだけ

ビルダーパターン

  • オブジェクト構築と実装部分を分けるやり方。
new RequestBuilder()
  .setURL('/users')
  .setMethod('get')
  .setData({firstName: 'Anna'})
  .send()

class RequestBuilder {
  private url: string | null = null
  setURL(url: string): this {
    this.url = url
    return this
  }
}

ソースコードはこちらのリポジトリにあります。

Google Analyticsを使っています。