22.10.25 TIL

1. Done

---

1.1 타입스크립트

타입스크립트는 코드에 에러가 있더라도 컴파일은 진행된다.

function add(n1: number, n2: number) {
  return n1 + n2;
}

const num1 = '5'; // Argument of type 'string' is not assignable to parameter of type 'number'
const num2 = 2.2;
const result = add(num1, num2);
console.log(result);

// 매개변수에 지정한 타입과 전달인자의 타입이 일치하지 않음.
// 하지만 에러가 나도 컴파일은 진행됨.

타입스크립트의 주요 원시 타입은 모두 소문자로 시작한다

• number, string ,boolean, ….etc

React.FC 타입

리액트 타입 패키지에서 제공되는 타입 중 하나이다. (node_modules → @types → react) App 컴포넌트에 할당된 React.FC 타입은 React.FunctionComponent를 말한다. 즉, 리액트 함수 컴포넌트를 타입으로 할당한 것이므로 App 함수는 JSX나 리액트 함수 컴포넌트를 리턴해야 한다.

import React from 'react';

const App: React.FC = () => {
  return <div className="App"></div>;
};

export default App;

Props 의 타입 할당

부모가 자식 컴포넌트에게 props 를 내려 줄 경우에, 자식은 내려받는 props의 타입을 지정해야 한다. 아래 코드에선 TodoListProps 라는 이름의 interface를 정의하여 items 배열 안의 객체의 각 프로퍼티의 타입을 지정하였다.

// components > TodoList.tsx
import React from 'react';

interface TodoListProps {
  items: { id: string; text: string }[];
}

const TodoList: React.FC<TodoListProps> = props => {
  return (
    <ul>
      {props.items.map(todo => {
        return <li key={todo.id}>{todo.text}</li>;
      })}
    </ul>
  );
};

export default TodoList;

// App.tsx
import React from 'react';
import TodoList from './components/TodoList';

const App: React.FC = () => {
  const todos = [
    {
      id: 't1',
      text: '운동하기',
    },
  ];

  return (
    <div className="App">
      <TodoList items={todos} />
    </div>
  );
};

export default App;

---