【React×TypeScript】クラスの基本的な考え方と作成方法をざっくり説明

はじめに

React学習を始めて早4カ月、クラスをよくわからないまま使っていたので簡単にまとめます。

クラスとは？

関連するデータとその操作をまとめて管理するためのテンプレート・設計図 みたいなものです。一度作成しておけば使いまわすことができます。

こちらはRubyの記事ですが、クラスの説明がめちゃくちゃわかりやすいです。

クラスの作成方法

Reactではconstructorを利用して、クラスの各プロパティを設定します。

下記に例を示しました。
今回はArticleというクラスに、author(著者名) ・title(タイトル)・ contents(記事の内容)という3つのプロパティを設定しています。

tsx

export class Article {
  constructor(
    public author: string,
    public title: string,
    public contents: string,
  ) {}
}

おわりに

ドキュメント等を読んでもイメージがわかなかったのですが、何度か使ってやっと掴めてきました。愚直に手を動かしていくしかない。。