💡

Reactで型をよく忘れるのでメモ

2023/01/18に公開

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