💡
Reactで型をよく忘れるのでメモ
props
propsはコンポーネント型のジェネリクスで定義する。
Hello.tsx
type HelloProps = {
name: string,
}
// ジェネリクスで記述する
const Hello:React.FC<HelloProps> (props) => {
return (
<h1>Hello {props.name}!</h1>
)
}
Example.tsx
import Hello from './Hello'
const Example () => {
return(
<Hello name='太郎さん' />
)
}
// => Hello 太郎さん!
children
react v18以降?childrenの型をReact.ReactNode
に定義しないとエラーになる。
Hello.tsx
// childrenの型はReact.ReactNode
type HelloProps = {
name: string,
children: React.ReactNode,
}
const Hello:React.FC<HelloProps> (props) => {
return (
<h1>Hello {props.name}!</h1>
)
}
Example.tsx
import Hello from './Hello'
const Example () => {
return(
<Hello name='太郎さん'>
元気ですか?
</Hello>
)
}
// => Hello 太郎さん!元気ですか?
useState
Example.tsx
import {useState} from 'react'
type User {
name: string,
age: number
}
const Example () => {
const [users, setUsers] =useState<User[]>([{name: 'taro', age: 18}])
}
class
Example.tsx
class User {
public name: string
public age: number
constructor(name:string, age:number) {
this.name = name
this.age = age
}
}
const Example () => {
const user = new User('taro', 18)
return (
<>
<p>{user.name}</p>
<p>{user.age}</p>
</>
)
}
Discussion