TypeScript

• About TypeScript

1. 왜 타입스크랩트를 써야하나.
2. TypeScipt 기초
3. 함수 타입을 정의하자
4. interface를 활용하자
5. 타입 별칭이란?
6. 연산자를 이용한 타입 정의 - 유니온 타입
7. enum
8. class
9. generic
10. promise Types
11. todolist 만들어보기
12. 디버깅

목차

• localStorage의 getIem의 메서드는 key값으로 string을 받는다
• return 값은 string과 null이 나온다는 것을 알고 있어야 한다

• localStorage를 변수에 담았을 때 마우스를 올려보았을 때 해당 변수의 데이터 타입은 string 혹은 null 이 될 수 있다는 정보를 알려준다.

• text는 물음표가 없으니깐 필수값으로 받아야 한다 (필수 파라미터)
• reviver? 선택적인 값 넣어도 되고 안넣어도 된다.
• 출력 결과는 any타입이 반환된다. 반환된 값도 역시 타입을 정해줘야한다.

if (localAllegie) JSON.parse(localAllegie);

interface AlgBoxProps {
  id: number;
  name: string;
  onClick?: (id: number, name: string) => void;
}
//

const AlgBox: React.FC<AlgBoxProps> = ({ id, name, onClick }) => {
  return <Molecule onClick={() => onClick(id, name)}>{name}</Molecule>;
};

• onclick은 있을 수도 없을 수 도 있다.
• 위의 코드는 아래와 같이 고칠 수 있다

const AlgBox: React.FC<AlgBoxProps> = ({ id, name, onClick }) => {
  const handleClickMolecule = () => {
    if (onClick) {
      onClick(id, name);
    }
  };

  return (
    <Molecule onClick={() => onClick && onClick(id, name)}>{name}</Molecule>
  );
};

const handleClickMolecule = () => onClick && onClick(id, name);

onClick이 전달받는 곳이 있을 수 있고 전달받지 않는 컴포넌트가 있을 수 있다. 그럴 때는 옵셔널 체이닝 값을 할당하게 되는데 그럴경우 물음표가 나온다. 물음표를 확실하게 없애주도록 조건부를 걸어주면 좋다.