TIL 221108 타입스크립트에서 props 넘기기 + 함수에 타입 지정해주기

타입스크립트에서 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;

 

참고