Vue + ts のコンポーネントにおいて必ず実装してほしいメソッドのリストを定義(Javaなどで言うIFの実装)する方法はありますか？

自分はReactなどは使ったことがないのですが、フロントの開発において、この種類のコンポーネントにはこの関数を必ず実装する必要があるからそれをIFとして定義してコンポーネントに対して指定する、と言うようなことができたら便利だと思うのですがそのような方法はないでしょうか？

例えばJavaなどで考えると、「受付インターフェース」があるとしてそこには挨拶()関数や会計()関数があるとして、「銀行受付クラス」はそれを実装したクラス、というような作りはあるかと思います。

Vueコンポーネントでも例えば同じように「リストインターフェース」があって、それではソート()関数が定義されており、「履歴リストコンポーネント」でそれを実装する事によって必ず「履歴リストコンポーネント」は必ずソート()を実装しなければならないというような作りにすることは可能かと言う事です。

自分が知る限りではでき無さそうですが、他のフロント系の言語だとできたりするのでしょうか？？

回答2件

uky

総合スコア207

投稿2023/02/06 03:20

Reactでは、ClassComponentとFunctionalComponentがあり、前者の場合はJavaのようにコンポーネント単位で必要なメソッドをInterfaceに定義することで実装を強制することが可能です（原理的には）。

※ただ、現在ではClassComponentは非推奨とされています。

サンプル

jsx
1interface IClassComponent {
2  get: () => void;
3}
4
5class ClassComponent extends React.Component implements IClassComponent {
6  constructor() {
7    super({ props1: 'a', props2: 2 }); 
8    this.get = () => console.log('getMethod');
9  }
10  get: () => void;
11
12  render() {
13    return <div></div>;
14  }
15}

Hayato1201

総合スコア220

投稿2023/02/06 07:29

#1
ご回答ありがとうございます！
Vueでも確かにClassの表記を使えばできなくはなさそうな気がしますね。
因みに現在そのような表記が非推奨な理由って何なのでしょうか？？

最新の回答から1ヶ月経過したためこの意見交換はクローズされました

意見をやりとりしたい話題がある場合は質問してみましょう！

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

Vue + ts のコンポーネントにおいて必ず実装してほしいメソッドのリストを定義(Javaなどで言うIFの実装)する方法はありますか？

関連した質問