TIL
TIL 221108 타입스크립트에서 props 넘기기 + 함수에 타입 지정해주기
2021bong
2022. 11. 8. 17:02
타입스크립트에서 props 넘기기
props를 기존에 넘겨주듯이 넘겨줬다. 그랬더니 props 부분에 빨간줄이 떴다..🥹 제발.. 그만....
// 에러
const CheckList = ({ todos }) => {
return (
<ul>
{todos.map((el: Todos) => (
<CheckItem key={el.id} todo={el.todo} checked={el.completed}/>
))}
</ul>
);
};
export default CheckList;
이유는 props를 넘길때도 타입을 지정해주어야 하기 때문이다. 그래서 이리저리 검색을 해서 넣었더니 빨간줄이 사라졌다.
interface Todos {
id: number;
todo: string;
}
interface TodosProps {
todos: Todos[];
}
const CheckList = ({ todos }: TodosProps): JSX.Element => {
return (
<ul>
{todos.map((el: Todos) => (
<CheckItem key={el.id} todo={el.todo} checked={el.completed}/>
))}
</ul>
);
};
export default CheckList;
JSX.Element 같은 경우에는 타입스크립트가 추론하게 둬도 되기 때문에 적지 않아도 에러는 발생하지 않는다.
// 가능
const CheckList = ({ todos }: TodosProps) => {
return (
<ul>
{todos.map((el: Todos) => (
<CheckItem key={el.id} todo={el.todo} checked={el.completed}/>
))}
</ul>
);
};
export default CheckList;
막연히 어렵게 생각하고 있었는데 : 뒤에 적어주는 타입은 props의 타입이다.
function Employee(props : PropsType) {
///...
}
props는 객체 형태로 들어오기 때문에 구조분해할당이 가능하다. 객체의 타입을 정해줘야 하니 interface를 사용해 어떤 키와 밸류의 자료형을 가졌는지 적어줘야 한다. 그래서 EmployeeProps 타입에 name, age, country가 포함되게 적어주면 된다! 😲
// 예제
interface EmployeeProps {
name: string;
age: number;
country: string;
}
function Employee({name, age, country}: EmployeeProps) {
return (
<div>
<h2>{name}</h2>
<h2>{age}</h2>
<h2>{country}</h2>
</div>
);
}
export default function App() {
const obj = {name: 'Alice', age: 29, country: 'Austria'};
return (
<div>
<Employee {...obj} />
</div>
);
}
Type '{ text: string; }' is not assignable to type 'IntrinsicAttributes'. 에러 해결하기
위 방법대로 타입도 잘 정해줬는데 자꾸 이런 에러가 떴다. 왜 그런지 해결하려고 하다가 포기하고 자식 컴포넌트로 가서 마저 타입을 설정해줬다. 그리고 해결하려고 다시 부모 컴포넌트로 올라왔더니 없어져 있었다.........
이 에러가 뜬다면 자식 컴포넌트까지 타입을 모두 지정해주고 나면 해결 되어있을 것이다........
함수에 타입 정해주기 ( Function Type Expressions )
props로 state를 변경하는 함수를 내려줘야했다. 함수는 state처럼 단순하게 적어줬다고 해결되지 않았다. 🙄
지금 보니 꽤나 바보같다....😀....
interface TodosProps {
todos: Todos[];
onDelete: function;
}
검색을 하니 함수는 type을 선언해서 인자의 타입과 리턴값의 타입을 정한 다음 그 타입을 넣어주면 된다.
type DeleteFunction = (text: string) => void;
interface TodosProps {
todos: Todos[];
onDelete: DeleteFunction;
}
const CheckList = ({ todos, onDelete }: TodosProps) => {
return (
<ul>
{todos.map((el: Todos) => (
<CheckItem
key={el.id}
id={el.id}
todo={el.todo}
onDelete={onDelete}
/>
))}
</ul>
);
};
export default CheckList;
728x90