「はじめてつくるReactアプリ with TypeScript」の感想・備忘録

kindle本「はじめてつくるReactアプリ with TypeScript」のまとめ。

点数

82点

感想

とてもわかりやすかった。

作成するアプリは簡単なものだが、ひとつひとつの説明が丁寧で理解しやすい内容だった。

Reactのimportが不要になった

React version 17からはindex.tsx以外のファイルではimport React from 'react';を省略できるようになった。
よって、App.jsなどのimport React from 'react';は削除してもよい。

https://ja.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html

typeによる型定義

type ForecastType = {
  targetArea: string,
  text: string
}
// 上記のように型を定義して、以下のように使う
const [forecast, setForecast] = useState<ForecastType>({targetArea: '', text: ''})
type ResultPropsType = {
  forecast: {
    targetArea: string,
    text: string
  }
}
// 上記のように型を定義して、以下のように使う
const Results = (props: ResultPropsType) => {
   // 省略
}

typeとinterface

typeとinterfaceではできることが異なるが、型を定義するだけであれば同じように使うことができる。

type ForecastType = {
  targetArea: string,
  text: string
}
// と以下は同一。interfaceの場合は=による代入は不要。
interfase ForecastType {
  targetArea: string,
  text: string
}

型定義のexport

typeやinterfaceにexportを付けることで、型定義を別ファイルで使用することができる。

// App.jsxで以下のようにした場合、
export type ForecastType = {
  targetArea: string,
  text: string
}
// 別のコンポーネントで以下のように使用することができる。
import {ForecastType} from '../App'
type ResultPropsType = {
  forecast: ForecastType,
}

コンポーネントの型指定

const Form = (props: FormPropsType) => {

const Form: React.FC<FormPropsType>= (props) => {
と書くこともできる。
(propsの型を仮引数ではなくコンポーネントのジェネリックで指定)

※ ただし、React.FCは非推奨になる可能性があるので使わない方がいいという意見もある。


【古い記事】

コメントを残す

メールアドレスが公開されることはありません。