TypeScript 오류 : 'IntrinsicAttributes & BaseType & { children?: ReactNode; }' 형식에 선언된 'todos' 속성에서 가져옵니다.

[App.tsx]

export type Todo = {

    id: string;

    title: string;

    content: string;

    isDone: boolean;

};

function App() {

    const initialState: Todo = {

        id: uuid(),

        title: '제목1',

        content: '내용1',

        isDone: false,

    };

    //데이터 : 배열 안 객체

    const [todos, setTodos] = useState<Todo[]>([initialState]);

    return (

        <div>

            <header>

                <p>My Todo List</p>

            </header>

            <main>

                <InputForm todos={todos} setTodos={setTodos} />

 

[InputForm.tsx]

import { Todo } from '../App';

type Props = {

    todos: Todo[];

    setTodos: React.Dispatch<React.SetStateAction<Todo[]>>;

};

function InputForm({ todos, setTodos }: Props) {

    const [title, setTitle] = useState<string>('');

 

1. 오류

App.tsx에서 상태값을 컴포넌트에 props로 할당하고 싶었음.

Todo[] 형식은 string 형식에 할당할 수 없습니다=> InputForm.jsx에서 string으로 설정해서 오류 발생

 

2. 해결

props로 내려주는 부분에서 타입을 모르겠으면 마우스 호버해서 붙여넣으면 됨

 

 

(1) todos의 타입 : Todo[ ]

 

(2) setTodos의 타입 : React.Dispatch<React.SetStateAction<Todo[]>>;

 

[InputForm.tsx]

import { Todo } from '../App';

type Props = {

    todos: Todo[];

    setTodos: React.Dispatch<React.SetStateAction<Todo[]>>;

};

function InputForm({ todos, setTodos }: Props) {

 

 

이렇게 해주면 끝