[내일배움캠프-TIL]5. React-9기 2주차 - 공부요약

타입스크립트 강의를 듣다가 정리해본다. 나중에 타입스크립의 타입에 대해 요약해 놔야겠다.

Tuple Type

형태는 [1, 2] 같이 배열형태이지만, 고정 길이 배열이다. 길이뿐만 아니라 타입도 고정이다. 입력받는 데이터 타입을 더 명확하고 엄격하게 처리한다.

예시

const person = {
  name : string;
  age : number;
  hobbies : string[];
  role : [number, string];         /// role의 길이와 타입 지정
} = {
  name : "Max",
  age : 30,
  hobbies : ["Sports", "Cooking"]
  role : [2, 'author']
}

person.role[1] = 10;            /// role[1]은 string이므로 컴파일 오류
person.role = [2, "admin", "user"]  /// role의 길이는 정해져 있으므로 컴파일 오류

person.role.push("readOnly")   /// 예외규정 ts가 push함수로 추가되는 오류는 잡지 못함

Enum Type

형태는 enum {NEW, OLD}. 열거된 목록을 제공함. 0으로 시작하는 숫자로 변환된다.

예시

const ADMIN = 0;
const READ_ONLY = 1;
const AUTHOR = 2;

const person = {
  name : "Max",
  age : 30,
  hobbies : ["Sports", "Cooking"]
  role : ADMIN
}

이런식으로 해도 되지만 enum을 사용하면 편하다.

enum Role {ADMIN, READ_ONLY, AUTHOR}; // 내부적으로 {0, 1, 2}

const person = {
  name : "Max",
  age : 30,
  hobbies : ["Sports", "Cooking"]
  role : Role.ADMIN
}
/////////////////////////////////////////////////////////////////
enum Role {ADMIN = 5, READ_ONLY, AUTHOR}; // 이러면 {5, 6, 7}
enum Role {ADMIN = "ADMIN", READ_ONLY = 100, AUTHOR = 30}; // 이렇게 문자열을 사용하거나
                                                           // 다른 형식으로 할 수 있다.

ANY Type

할당할 수 있는 타입 중 가장 유연한 타입이다. 어떤 종류의 값이든 저장이 가능하다. 어디든 어떻게 쓸 수 있는게 좋아보이지만, 이는 타입스크립트의 장점을 활용하지 못하게된다. 모든 타입을 any 타입으로 사용하면 자바스크립트랑 다를게 없다.

Union Type

변수나 함수 매개변수가 여러 가지 타입 중 하나를 가질 수 있도록 하는 타입 시스템입니다.
| 기호를 사용하여 두 개 이상의 타입을 결합할 수 있다.

예시

function combine(input1: number|string, input2: number|string){ //숫자나 문자열 타입을 가질 수 있다.
  // const result = input1 + input2 그냥 이렇게만 작성하면 오류가 난다. ts에서 더하기 연산자를 
  // 사용할 수 없는 타입이 들어왔을지도 모른다 판단해 오류를 띄운다. 그래서 아래와 같이 사용해야 한다. 
  let result;
  if(typeof input1 === "number" && typeof input2 === "number"){
    result = input1 + input2; 
  }else{
    result = input1.toString() + input2.toString();
}
  return result;

const combineAges = combine(30, 26);
console.log(combineAges);             // 56 출력

const combineNames = combine("Max", "Anna");
console.log(combineNames);           // MaxAnna 출력

유니언 타입은 매개변수를 유연하게 받을 수 있다. 그러면 정확히 어떤 타입을 받는냐에 따라 함수에 그에맞는 로직이 필요하다.

후기

아직 타입스크립트가 뭐가 뭔지 잘 모르겠다. 나중에 타입들 한번 정리해서 올려야겠다. 금방 적응하도록 여러번 봐야겠다.