TypeScript 타입 지정하는 방법

이주희·2022년 3월 27일

typescript

TypeScript

목록 보기

3/10

🌟 Props 타입 지정할 때 꿀팁 : 여러 단어를 한번에 복사하기

1) option + command + 아래 방향키
2) shift + option + 오른쪽 방향키

타입 추론과 타입 명시

타입 추론: 처음에 들어간 값으로 자동으로 타입이 지정된다.

  /* 타입 추론 */
  let aaa = "안녕하세요";
  // aaa = 3;

  /* 타입 명시 */
  let bbb: string = "반갑습니다";

  /* 타입 명시가 필요한 상황 */
  let ccc: number | string = 1000;
	ccc = "1000원";

state

선언 시
interface
setCurrent: Dispatch<SetStateAction<number>>;

Props

props를 받는 화면(ex. presenter)에 interface를 만들어서 타입을 명시해주면 된다.

타입을 명시하지 않으면 어디서 에러가 나냐?!
👉 넘기는 component(ex. container)에서 빨간 밑줄로 에러 표시가 생긴다.
(받는쪽에서 지정을 하지 않으면, 아무것도 안 받는다고 되어있는데 넘기고 있게 되니까 에러!)

emotion이 props를 받는 경우에도, 똑같이 명시해주면 된다!

HTML 태그

react에서 제공하는 타입을 써줘야 한다. (검색해서 찾아서 쓰자!)

type 찾는 팁: presenter에서 onChange={(}까지 입력하면, 예측값을 볼 수 있다.

위 방법으로 onChange의 타입이 무엇인지 확인하고, 함수를 선언하는 부분(ex. container)에서 타입을 지정해준다. 👇🏻
& import도 해야한다!! from 'react'

함수를 props로 전달한 경우, 받는 화면(ex. presenter)에서 타입을 지정해준다. 👇🏻
return값이 없는 경우에 void로 처리한다. number나 string 등등 return값이 있으면 그에 맞게~!
인자가 없으면 () 비워놓고, 있으면 인자의 타입을 선언할 때와 마찬가지로 적어준다.

string, number, boolean

  /* 문자 타입 */
  let ccc: string;
  ccc = "반가워요!";
  // ccc = 3;

  /* 숫자 타입 */
  let ddd: number = 10;
  // ddd = "qqq";

  /* 불린 타입 */
  let eee: boolean = true;
  eee = false;
  // eee = "true";

Array

  let fff: number[] = [1, 2, 3, 4, 5];
  // let fff2: number[] = [1, 2, 3, 4, 5, "안녕하세요"];
  let ggg: string[] = ["철수", "영희", "훈이"];
  // let ggg2: string[] = ["철수", "영희", "훈이", 13];
  let hhh: (number | string)[] = ["철수", "영희", "훈이", 13]; // or과 and 연산자는 하나만 쓰면 된다.: |, &

Object

객체의 타입은 직접 만들어주고 적용시켜줘야 한다.
타입 이름 앞에 I를 붙이는 것이 관례이다.

  interface IProfile2 {
    // 타입을 지정했으면 데이터가 꼭 있어야 한다. & 값이 있으면 타입도 꼭 지정해야 한다.
    name: string;
    age: string | number;
    school: string;
    hobby?: string; // ?를 붙이면 데이터가 있어도 되고, 없어도 된다.
  }
    
  const profile2: IProfile2 = {
    name: "철수",
    age: 8,
    school: "다람쥐초등학교",
  }; 
  profile2.age = "8살";

Function

함수를 만들 때 인자와 리턴값의 타입을 정한다.
함수는 어디서 몇번이든 호출이 가능하므로, 타입 추론을 할 수 없어 반드시 타입 명시가 필요하다.
(타입을 명시하지 않으면 any가 된다.)

  const add = (money1: number, money2: number, unit: string): string => { 
    // 마지막 string은 리턴값
    return money1 + money2 + unit;
  };
  add(1000, 2000, "원");

  const add2 = (money1: number, money2: number, unit: string): number => { 
    //숫자와 문자를 더하기 때문에 return이 number가 될 수 없어 에러!
    return money1 + money2 + unit;
  };
  add2(1000, 2000, "원");