타입스크립트 - 기본 타입 알아보기

들어가며

• 자바스크립트 타입을 정의하는 기본적인 타입 정의가 있다. 그리고 자바스크립트에는 없는 기본적인 타입 정의가 있다. 간단한 예시와 함께 정리해보려 한다.

리터럴 타입

//리터럴(값) 타입
let numA: 10 = 10;
let strA : 'hello' = 'hello'
let boolA : false = false

• 타입을 설정하는 자리에 값 자체를 넣는 형태다. numA 같은경우 10 외에는 다른걸 못넣는 것이다.

배열 정의하기

//배열 정의 방식 1.
let numArr: number[] = [1, 2, 3];
let strArr: string[] = ["hello", "im", "hoon"];

//배열 정의 방식 2.
let boolArr: Array<boolean> = [true, false, false];

• 보통 1번을 더 많이 쓴다. 더 간단히 쓸 수 있으니까.

//배열 들어가는 요소 타입이 다양할 경우
let multiArr: (number | string)[] = [1, "hello"];

//다차원 배열의 타입을 정의하는 방법
let doubleArr: number[][] = [
  [1, 2, 3],
  [4, 5],
];

튜플

//튜플
//길이와 타입이 고정된 배열
let tup1: [number, number] = [1, 2];
let tup2: [number, string, boolean] = [1, "2", true];

• 이러한 튜플은 막상 컴파일하고 나면 js 파일에서는 보통의 배열과 다를 바 없다.

  그래서 tup1.push() , tup1.pop() 과 같은 배열 메서드를 사용할 수 있는데, 그렇게 되면 고정된 배열을 말하는 튜플임에도 오류를 인식하지 못한다. 그러므로 배열 메서드를 사용할 때는 주의해야한다.

• 그러면 언제 튜플이 유용할까? 아래와 같을 때가 유용하다.

const users : [string, number][] = [
  ["강아무개", 1],
  ["이아무개", 2],
  ["김아무개", 3],
  ["박아무개", 4],
 // [5, "강아무개"]
];

• 무언가 정해진 배열의 양식이 있을 때, 그걸 따르라고 할 때가 가장 알맞다.

객체

//object
//객체의 프로퍼티까지 정의하는 객체 리터럴을 사용
//구조적 타입 시스템 -> property based 타입시스템
//명목적 타입 시스템 (대부분의 언어의 타입 시스템)
let user: {
  id?: number; //optional property
  name: string;
} = {
  id: 1,
  name: "Kim",
};

• 객체를 정의할 때는 단순히 object 라 해도 되지만, 그렇게되면 객체 안에 있는 프로퍼티가 무엇이 있는지 몰라서 점 표기법으로 쓸 때 에러가 발생한다.
• 그렇기 때문에 프로퍼티까지 정의해주는 객체 리터럴의 형태로 타입을 정의해주면 된다.
• 또 프로퍼티 중 있을수도, 없을수도 있는 프로퍼티의 경우(위에서는 id) 물음표 를 붙여주면 된다.
• 앞의 포스팅에서 얘기했듯 대부분의 언어 타입 시스템은 명목적 타입시스템이라고 하여 object면 object , string이면 string 이렇게 해주면 되지만, 타입스크립트는 위처럼 프로퍼티까지 정의해주는 기존의 언어들과는 다른 형태이다. 타입스크립트는 구조적 타입 시스템 이라고 부른다.

let config : {
  readonly apiKey: string
} = {
  apiKey : 'my api Key'
}

• 다음과 같이 어떤 변하면 안될 것 같은 프로퍼티가 있다? 타입정의할 때 readonly 를 붙여보자. 읽기전용으로 되어 바꾸려고 하면 에러가 발생한다.

타입 별칭과 인덱스 시그니처

//타입 별칭 type alias
type User = {
  id: number;
  name: string;
  nickname: string;
  birth: string;
  bio: string;
  location: string;
};

function func() {
  type User = {}; // 함수 안에서는 이 타입이 적용
}

let user: User = {
  id: 1,
  name: "Kim",
  nickname: "kingtypescript",
  birth: "1992",
  bio: "안녕",
  location: "OO시",
};

• 객체안에 타입을 정의할 게 많은데, 심지어 뭐 user1, user 2, user3 이렇게 나오면 중복되는 타입의 정의가 너무 길어지기에, 타입 별칭을 이용한다.
• 참고로 함수 안에 동일한 이름의 타입 별칭은 해당 func 안에서는 함수 안에서 정의한 타입 별칭이 적용된다.

// 인덱스 시그니처
//key, value 규칙을 기준으로 맞추는 것

type CountryCodes = {
  [key: string] : string
}

let countryCodes  : CountryCodes

  // Korea : string;
  // UnitedState : string;
  // UnitedKingdom : string;
= {
  Korea: 'ko',
  UnitedState : 'us',
  UnitedKingdom: 'uk'
}

type CountryNumberCodes = {
  [key: string] : number
}

let countryNumberCodes: CountryNumberCodes = {
  Korea: 410,
  UnitedState: 840,
  UnitedKingdom: 826,
};

• countryCodes 가 겁나 많다고 생각해보자. 지금은 3개 적었지만, 한 200개 된다면? 언제 다 정의하고 앉아있나. 이를 해결하기 위해 인덱스 시그니처라는 게 있다. key, value의 규칙을 보고 정의하는 형태이다.
• countryCodes 는 key가 string, value 도 string이므로, 아래와 같이 정의한 것이다.

type CountryCodes = {
  [key: string] : string
}

• 참고로, 규칙과 다른 형식을 넣으려고 하면 당연하게도 오류가 발생하니 규칙에 맞게 사용할 수 있도록 하자.

enum 타입

const user1 = {
  name: '김갑수',
  role: 0 //0 <- 관리자
}
const user2 = {
  name: '홍길동',
  role: 1 //1 <- 일반 유저
}
const user3 = {
  name: '아무개',
  role: 2 //2 <- 게스트

• 보통 권한을 줄 때 위와 같이 숫자로 주곤 한다. 그런데 이런 권한을 설정할 때 헷갈려서 0번 관리자를 2번 주는 등 어처구니없지만 발생할 수 있는 실수가 간혹 있는데, 이를 방지해줄 수 있는 게 바로 enum 이다.

//enum 타입
//여러가지 값들에 각각 이름을 부여해 열거해두고 사용하는 타입

//숫자만 보고 role을 하긴하는데 가끔 헷갈릴 때가 있다.
//숫자 제거해도 enum은 순서대로 0, 1, 2로 가져감
//enum은 특이하게도 컴파일해도 사라지지 않는다 ! 객체로 변환되기에 아래에서 값을 할당해주듯 사용 가능 한 것 
enum Role {
  ADMIN = 0,
  USER = 1,
  GUEST = 2,
}

const user1 = {
  name: "김갑수",
  role: Role.ADMIN,
};
const user2 = {
  name: "홍길동",
  role: Role.USER,
};
const user3 = {
  name: "아무개",
  role: Role.GUEST,
};

console.log(user1);

• 위와같은 enum Role이 사용되면, role에는 숫자 0, 1, 2 대신 Role.ADMIN 과 같은 값을 넣어주면 된다.
• 또 Role에 위와같이 숫자를 할당하지 않아도 enum은 알아서 0부터 순서대로 숫자를 가져간다.

enum Role {
  ADMIN,
  USER,
  GUEST,
}

• 만약 ADMIN에 10을 준다면 10, 11, 12로 숫자가 찍히고,
• USER에 10을 주면 0, 10, 11 이 찍힌다.

enum Language {
  korean = "ko",
  english = "en",
}

const user1 = {
  name: "김갑수",
  role: Role.ADMIN,
  Language: Language.korean,
};

이런식으로 enum을 해주게 되면 오류 방지에 큰 힘이 된다 ^^!

아 !참고로 enum은 컴파일해도 사라지지 않고 객체로 변환되기에 값처럼 할당해줄 수 있는 것이다.