TS 정리 (한 입 크기로 잘라먹는 타입스크립트(TypeScript)) - 02

해당 포스팅은 한 입 크기로 잘라먹는 타입스크립트(TypeScript)를 학습하면서 알게된 정보들을 정리하였습니다.

https://inf.run/EvrS5

한 입 크기로 잘라먹는 타입스크립트(TypeScript) 강의 | 이정환 Winterlood - 인프런

 

TypeScript 기본 타입

TypeScript에는 number, string, boolean, null, undefined, literal 타입이 존재합니다.

• number

  let num: number = 1;
  let num2: number = 0.1;
  let num3: number = Infinity;

number 타입은 일반적인 int, long, double와 같은 숫자들을 의미합니다.

• string

  let str: string = "hello";

string 타입은 문자열을 의미합니다.

• boolean

  let bool: boolean = true;

boolean은 true, false와 같은 값을 가지는 타입을 의미합니다.

• null

  let null1: null = null;

null 타입은 java의 null과 같은 타입을 의미합니다.

• undefined

  let und: undefined = undefined;

undefined는 js의 undefined와 같은 타입을 의미합니다.

• literal

  let num: 10 = 10;
  let str: "hello" = "hello"

literal type은 1개의 값만 가지는 타입을 의미합니다.

배열과 튜플

• 배열

  let numArr: number[] = [1, 2, 3];
  let numArr1: Array<boolean> = [1, 2, 3];
  let numArrs: number[][] = [
      [1, 2, 3], [4, 5]
  ]

TypeScript에서의 배열은 일반적인 배열과 동일하게 [] 으로 표시가 가능합니다.

• 튜플

  let tup1: [number, number] = [1, 2];
  let tup2: [number, string, boolean] = [1, "hello", true];

tuple은 c++의 tuple처럼 하나의 배열안에 서로 다른 타입의 값들을 포함하는 구조를 가집니다.

객체

let user: {
  id: number;
  name: string;
} = {
  id: 1,
  name: "홍길동",
}

TypeScript에서 객체는 각각의 변수와 타입들을 가지고 있는 하나의 변수로 선언할 수 있습니다.

 

만약 여기서 변수명에 ?을 붙일 경우, 해당 값이 없어도 생성할 수 있습니다.

let user: {
  id?: number;
  name: string;
} = {
  name: "홍길동",
}

타입 별칭

type User = {
    id: number;
    name: string;
};

let user: User = {
    id: 1,
    name: "홍길동"
};

타입 별칭은 number, string 대신 해당 타입으로 지정하여, 값을 선언할 수 있게 해줍니다.

인덱스 시그니처

타입 별칭에서 만약 key값이 여러 개가 존재하는 경우, 모든 key에 대한 값을 선언하여 type을 지정하기에는 무리가 있습니다.

 

이런 경우 인덱스 시그니처를 활용하여 간편하게 설정이 가능합니다.

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

let countryCodes: CountryCodes = {
    Korea: 'ko',
    UnitedState: 'us',
}

[key: string]: string;와 같이 선언하게 된다면, key는 string값을 가지게 되고, 해당 key에 대한 value 또한 string 값을 가지게 된다고 선언할 수 있습니다.

enum

enum Role {
    ADMIN,
    USER,
    GUEST,
}

다음과 같이 enum이 선언되어져 있는 경우, ADMIN의 값은 0을 가지게 되고, USER는 1, GUEST는 2번으로 순차적으로 증가된 값을 가지게 됩니다.

enum Role {
    ADMIN = 10,
    USER,
    GUEST,
}

만약 다음과 같이 ADMIN에 10이라는 값을 주어진 경우에는, USER는 11, GUEST는 12와 같이 처음 시작하는 ADMIN에서 순차적으로 1씩 증가하는 값을 가지게 됩니다.

any

let anyVar: any = 10;
anyVar = "hello";

any타입의 경우, 어떠한 값이든 모두 사용가능한 타입입니다.

let anyVar: any = 10;
let num: number = anyVar;

다음과 같이 any타입의 경우, 다른 변수들에 값을 주입할 수 있습니다.

let anyVar: any = 10;
anyVar.toUpperCase();

단, any타입의 경우 다음과 같이 숫자타입일 떄, 문자열 타입의 함수를 사용하여도 코드상으로는 문제가 발생하지 않습니다.

 

그러나, 해당 코드를 컴파일하게 된다면, 에러가 발생하게 됩니다.

unknown

let unknownVar: unknown;
unknownVar = 10;
unknownVar = "hello";

unknown 타입의 경우, any타입과 마찬가지로 어떤 타입의 값이던 모두 주입이 가능합니다.

 

그러나, 다음과 같이 unknown타입은 any타입처럼 다른 타입의 변수에 선언할 수 없습니다.

 

unknown타입은 "hello"처럼 문자열 타입의 값을 가지고 있어도 toUpperCase()와 같은 문자열 함수를 사용할 수 없습니다.

if (typeof unknownVar == "number") {
    num = unknownVar;
}

만약 unknown타입의 값을 사용하고 싶다면, 다음과 같이 typeof 연산자를 사용하여야 합니다.

void

function func(): void {
  console.log("hello");
}

void 타입의 경우, 특정 함수가 아무런 값도 반환하지 않는 경우 사용할 수 있습니다.

function func(): never {
  while(true) { }
}

never 타입의 경우, 해당 함수가 어떠한 값도 반환하지 못하는 상태인 경우에 선언하게 됩니다.

 

void타입이 존재하는데 never타입도 있는 이유가 뭘까요?

1. never 타입을 선언함으로 인해, 해당 함수는 절대 정상적으로 반환되지 않는다는 의미를 코드를 읽는 사람에게 바로 전달해 줍니다.
2. 해당 함수는 정상적인 값을 반환하지 않고, error와 같은 값들을 반환하는 함수라는 것을 알 수 있음