React和TypeScript的基本类型定义

2 年 ago

逸, 科

3 minutes

首先

之所以无法理解描述，是因为不了解基础知识。因此，我们将解释React × TypeScript开发中必须了解的最基本的类型定义，以供学习使用。

1. 引入类型

import React from "react"

const HelloComponent: React.VFC = () => {
  return <div>通常のインポート</div>
}

当您写上 import type { 特定的类型 }，就可以只导入类型信息。

import type { VFC } from "react"

const HelloComponent: VFC = () => {
  return <div>型情報のみインポート</div>
}

2. 函数组件的类型定义

在函数组件的类型定义中，使用了名为React.VFC的类型。
VFC = 空函数组件（Void Function Component）

import React from "react"

const HelloComponent: React.VFC = () => {
  return <div>関数コンポーネントの型定義</div>
}

3. props的类型定义

通过定义可以接收什么样的值作为props，可以防止意外传递特定的props。

如果不接受道具 (props)

import React from "react"

const TypeInference = () => {
  return <div>型推論のパターン</div>
}

const TypeAnnotation: React.VFC = () => {
  return <div>型注釈のパターン</div>
}

如果接收props，假设场景是3-2。

以下有两种模式。

ジェネリック型として指定する

import React from "react"

// propsとして受け取る型の定義
interface Sample = {
  text: string
}

const TypeAnnotation = (props: Sample) => {
  return <div>型注釈 {props.text}</div>
}

const GenericType: React.VFC<Sample> = (props) => {
  return <div>ジェネリック型 {props.text}</div>
}


/* -- 呼び出す側 -- */
const Parent: React.VFC = () => {
  return (
    <div>
      {/* 結果は同じ */}
      <TypeAnnotation text="TypeScript" />
      <GenericType text="TypeScript" />
    </div>
  )
}

4. useState函数的类型定义

4-1. 交由类型推理决定

// 初期値から型が明確な場合は型推論に任せる
const [text, setText] = useState("")         // string型
const [count, setCount] = useState(0)        // number型
const [isShow, setIsShow] = useState(false)  // boolean型

// 配列の場合
const [foods, setFoods] = useState(["pan", "rice"]) 
const [numbers, setNumbers] = useState([1, 2, 3])   

// オブジェクトの場合 { name: string型, age: number型, isMarried: boolean型 } というオブジェクトの型がuserステートに自動で付く
const [user, setUser] = useState({ name: "akihiro", age: 27, isMarried: false})

4-2. useState的类型定义（原始值）

当保持的状态不是数组或对象的情况。

// useStateのジェネリック型<T>に明示的に型を指定する
const [text, setText] = useState<string>("") 
const [count, setCount] = useState<number>(0)
const [isShow, setIsShow] = useState<boolean>(false)

// nullを含む場合は、合併型（Union Type）を用いて複数の型を指定する
const [count, setCount] = useState<number | null>(null) //number型またはnull型

4-3. useState的类型定义（数组）

如果状态的值是一个数组，指定类型的方法如下。

// useStateのジェネリック型<T>に直接配列の型を指定する
const [foods, setFoods] = useState<string[]>([])
const [numbers, setNumbers] = useState<number[]>([])

// 文字列と数値など、複数の値の配列を受け取る場合は以下の様に型を指定する
const [fuga, setFuga] = useState<(string | number)[]>([])   // string型またはnumber型の値を受け取る配列

4-4. useState的类型定义（对象）

这是当状态的值是对象时的类型指定方法。

import React from "react"

// ステートが持つオブジェクトの構造を型定義
interface UserData = {
  id: number
  name: string
}

const StateSample: React.VFC = () => {
  const [user, setUser] = useState<UserData>({}) // 初期値が型の構造を満たしていないのでエラー
  const [user, setUser] = useState<UserData>({ id: 123, name: "akihiro" }) // OK

  return (
    <div>
      <h1>{user.id}</h1>
      <h1>{user.name}</h1>
    </div>
  )
}

4-5. useState的类型定义（对象数组）

这是一个关于当状态的值是对象数组时的类型指定方法。

import React from "react"

// ステートが持つオブジェクトの構造を型定義
interface Todo = {
  id: number
  body: string
}

const StateSample: React.VFC = () => {
  const [todos, setTodos] = useState<Todo[]>([{}]) // 初期値が型の構造を満たしていないのでエラー
  const [todos, setTodos] = useState<Todo[]>([])   // 空配列はOK
  const [todos, setTodos] = useState<Todo[]>([{ id: 1, body: "OK" }])

  return (
    <ul>
      {todos.map((item: Todo) => {
        return <li key={item.id}>{item.body}</li>
      })}
    </ul>
  )
}

5. 事件对象（event）的类型定义

使用onClick、onChange等事件处理程序来定义处理事件对象event的类型。

// `handleChange`などの関数を定義する際のイベントオブジェクトの型定義
const [inputText, setInputText] = useState("")
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  setInputText(event.target.value)
}

// propsとして`onClick`などのイベントハンドラを子コンポーネント側で受け取る時の型定義
interface Props = {
  handleClick: (event: React.MouseEvent<HTMLInputElement>) => void    // onClick
  handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void  // onChange
  handleSubmit: (event: React.FormEvent<HTMLFormElement>) => void     // onSubmit
}

首先