kindle本「はじめてつくるReactアプリ with TypeScript」のまとめ。
点数
82点
感想
とてもわかりやすかった。
作成するアプリは簡単なものだが、ひとつひとつの説明が丁寧で理解しやすい内容だった。
Reactのimportが不要になった
React version 17からはindex.tsx以外のファイルではimport React from 'react';を省略できるようになった。
よって、App.jsなどのimport React from 'react';は削除してもよい。
新しい JSX トランスフォーム – React Blog
このブログはアーカイブされています。最新の記事は ja.react.dev/blog でご覧ください。 React 17 には新機能はありませんが、新バージョンの JSX トランスフォーム (JSX transform) に対応します。この記事ではこれがどのようなもので、どのように試せるのかについて説明します。 JSX トランスフォームとは？ ブラウザはそのままでは JSX を理解しないため、ほと...
js.legacy.reactjs.org
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は非推奨になる可能性があるので使わない方がいいという意見もある。