Open
23

React&TypeScript チートシート【サーバーメインだけどフロント書くことになったエンジニア用】

React FC宣言方法

import React from 'react'

type Props = {
  name: string
}

export const HelloWorld: React.FC = (props:Props) => {
  const {name} = props
  return (
    <div>Hello,{name}!</div>
  )
}
  • import Reactをしないとダメ
  • propsの型定義はtypeを使うのがよい(interfaceでもよいがtypeのほうが良い)
  • アロー関数の引数定義には型を明示しないと多分linterに怒られる(暗黙のanyを利用してしまうため)
  • const {name} = props という書き方でprops.nameを取ることができる。(愚直にconst name = props.name)でも良いがこっちのほうが記述がちょっと短くなる

現代ReactではclassでReactComponentを定義しなくても、propsのみで動くものはFCで関数を定義するだけ。stateが必要なものもhooksを利用するとFC内に書くことができる。

ReactComponentのrender()⇔React.FCの関数の戻り値

ajaxライブラリは何を使うのが良いの

axiosかunfetch。axiosは型定義がライブラリそのものに含まれているので@types不要。yarn add axiosでおk。

https://github.com/axios/axios

開発環境を作るには何を使ったらいいの

webpackをがちゃがちゃいじくるのも良いが正直webpackに詳しくないと消耗するのでcreate-react-appか、Next.jsでばっこり作ってしまうのがよさそう

型を明示的に宣言すべき場面

・関数の引数の型(指定しないと暗黙anyになるのでlinterに怒られると思う)

ケースバイケース

・関数の戻りの型(型推論が効くが、可読性向上のために戻りを書くことは否定しない)

型を推論すべき場面

・const変数への代入(スコープが狭いので型推論に任せるべき)

型のマージ(Intersection Types, 交差型)

二つの型を統合して新たな型を生み出す。どちらも共通するプロパティは統一される。

type Foo={
    baz: number
    hoge: string
}

type Bar={
    baz:number
    fuga: string
}

type FooBar = Foo & Bar

const foobar:FooBar = {baz: 10, hoge: "hoge",fuga:"fuga"}

console.log(foobar) // not error

なお、プリミティブ型で交差型を使用しても意味はない

型のOR(Union Types, 共用体)

// 通常の共用体。stringもしくはnumberを期待したいとき

type Input = {
    value: string | number
}

const inp1 = {value: "000"}
const inp2 = {value: 1}

console.log(inp1)
console.log(inp2)

//プロパティに?をつけるとundefinedとの共用体

type Type = {
    key?:string
}

const t: Type = {key: "hoge"}
const t2: Type = {}

console.log(t)
console.log(t2)

エディタは何がいいの

圧倒的にIDE。vimmerもemac使いもプライド捨ててVSCode使っていこう。
ちなみに自分はWebStorm

anyとunknownの違い

unknownはメソッド使用時に型キャストが必要

const str1: any = "hoge";
const str2: unknown = "fuga";

console.log(str1.indexOf("g")) // もしstr1がstringじゃなかったら実行時エラーになる
console.log((str2 as string).indexOf("g")) // str2.indexOf はコンパイルエラー

基本的には型が決まらない場合でもanyを使う前にunknownを使用した方が良さそう

ログインするとコメントできます