문제

import React from "react";

const Foo = () => {
    const [value, setValue] = React.useState(); 
    return <input value = {value} onChange = {(e) => setValue(e.target.value)}/>
}

Playground Link

이 코드는 다음 TypeScript 오류를 생성합니다.

Argument of type 'string' is not assignable to parameter of type 'SetStateAction<undefined>'.(2345)

빠른 솔루션

제네릭 유형을 명시적으로 명시합니다.

import React from "react";

const Foo = () => {
    const [value, setValue] = React.useState<string | undefined>(); 
    return <input value = {value} onChange = {(e) => setValue(e.target.value)}/>
}

또는 초기 상태를 빈 문자열로 설정합니다.

import React from "react";

const Foo = () => {
    const [value, setValue] = React.useState(''); 
    return <input value = {value} onChange = {(e) => setValue(e.target.value)}/>
}

(이것은 모든 경우에 적합하지 않을 수 있습니다. 즉, 해당 값을 정의하지 않은 상태로 두고 싶을 수도 있습니다.)

설명

useState 함수에는 원래의 경우 설정/선언하지 않은 일반 매개변수가 있습니다.

이렇게 하면 TypeScript가 주어진 인수에서 제네릭 유형을 추론할 수 있습니다.

이 경우useState() 인수가 없으면 TypeScript는 유형을 undefined 로 유추합니다.

TypeScript는 나중에 여기서 문자열을 상태로 설정하려는 것을 알지 못합니다.

즉, 일반 매개변수를 해제하는 것은 다음을 수행하는 것과 동일합니다.

const [value, setValue] = React.useState<undefined>(); 

일반 매개변수는 value 및 setValue 변수의 유형을 결정합니다.

이 경우 setValue 함수는 다음과 같습니다.

function setValue(value: undefined) : void {

}

input 구성 요소가 이것을 좋아하지 않습니다. 생성 중인 이벤트에는 target.value 유형의 string가 있습니다.

따라서 이 문제를 해결하기 위해 명시적으로 제네릭 유형을 설정하거나 TypeScript가 제네릭 유형을 유추하는 시기와 방법을 알 수 있습니다.