0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

[TypeScript] クラスを関数で実装する

Last updated at Posted at 2022-09-10

どっちがいいのか

classキーワードなどはOOPに最適化された言語仕様だから関数よりも便利なはずなんだけど、ケースによってはことを難しくしすぎるような気もする。
今回は同じ概念をクラスと関数で実装してみる。

コンストラクタ

クラス

class Animal {
  constructor(public name: string){}
  bark(): void {
    console.log("brrr")
  }
}

関数

interface Animal {
  name: string
  bark: () => void
}
const newAnimal = (name: string): Animal => {
  const bark = () => {
    console.log("brrr")
  }
  return { name, bark }
}

継承・オーバーライド

クラス

class Dog extends Animal {
  constructor(public name: string, public breed: string){
    super(name)
  }
  bark(): void {
    console.log("ruff!")
  }
  getProfile(): string {
    return `${breed}: ${name}`
  }
}

関数

interface Dog extends Animal {
  breed: string
}
const newDog = (name: string, breed: string): Dog {
  const animal = newAnimal(name) // 親のコンストラクタ呼び出し
  const bark = () => {
    console.log("ruff!")
  }
  const getProfile = () => {
    return `${breed}: ${name}`
  }
  return { ...animal, bark, breed, getProfile } // barkが上書きされる
}

総評

可読性という観点ではクラスに軍配があがる。
関数でやりたくなったのは「入力と出力という極めてシンプルな処理でアプリケーションを完成させる」というある種の美学がバイアスをかけていたのかもしれない。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?