Typescript Basics & Basic Types

목차

• enum 열거형으로 작업하기
• any 타입
• union 타입
• literal 타입
• aliases 타입 / 사용자 정의 타입
• aliases 타입 및 객체 타입

✧ enum 열거형으로 작업하기

• enum 타입은 다른 프로그래밍 언어에도 존재하는 타입이지만 자바스크립트에서는 존재하지 않는 타입이다. 타입스크립트에만 존재하는 이 enum 키워드에 사용하는 enum을 생성하는 방법은 식별자들을 중괄호 쌍 안에 넣는 것이다. 열거형 타입은 열거 목록을 제공한다. 이 목록의 라벨들은 0부터 시작하는 숫자로 변환되며, 여기에는 코드 내에서 작업 가능한 (인간이 읽을 수 있는) 라벨로 표현 되어있다.

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

• 위의 코드와 같은 객체 내부의 요소인 role에 'admin', 'read_only', 'author'를 추가하고자 한다. 각각의 id는 'admin'에서는 0으로 설정하고, 읽기 전용 'read_only'은 1, 그리고 'author'은 2로 설정한다.

const person = {
  name: "Maximilian",
  age: 30,
  hobbies: ["Sports", "Cooking"],
  role: 2, // author
};

• 그리고 위의 사례(숫자 2는 'author'의 id이다.)처럼 id 숫자로 정확하게 설정할 수 있을 것이다. 하지만 여기서 한 가지 단점이 있는데 바로 역할(role)이 없을 수도 있는 숫자를 추가할 수 있다는 가능성이다. 코드를 작성하면서 나중에서야 role을 추출하고 if 검사를 수행하면 에러가 발생할 수 있게 된다. 또한 개발자로서 이 사용자의 role이 무엇일지 바로 이해하기 어려울 가능성도 있다. 2가 'author' 인지 'admin' 인지를 언제나 외우고 있지는 않기 때문이다. 그렇기 때문에 차라리 인간이 읽을 수 있는 식별자로 구분하는 것이 훨씬 나을지도 모른다. 어쩌면 문자열 식별자를 사용해볼 수도 있을 것이다. 아래의 경우라면 어떨까?

const person = {
  name: "Maximilian",
  age: 30,
  hobbies: ["Sports", "Cooking"],
  role: "READ ONLY USER",
};

...

if (person.role === "READ-ONLY-USER") {
  console.log('is read only');
}

• 위의 코드의 문제는 "READ ONLY USER"처럼 그저 단어로만 이루어져 있는지, "READ-ONLY-USER" 처럼 밑줄이 쳐져있는지 등을 정확히 기억해서 확인을 해야 한다는 것에 있다. 이것을 출력했을 때 "READ ONLY USER"와 "READ-ONLY-USER"는 다르기 때문에 제대로 작동되지 않을 것이다. 문자열 식별자는 이러한 단점을 내포하고 있다. 이런 경우, 보통은 전역 상수를 정의해서 사용할 때도 있다. 예를 들어,

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

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

• 이런 식으로 전역 상수를 정의해서 사용할 수 있도록 할 수도 있을 것이다. 물론 숫자를 사용해서 코드의 양과 메모리 점유를 낮출 수 있으니, 각각의 값에 숫자를 할당하고 role에 필요한 상수를 가져다 사용하는 방법은 어쩌면 우리에겐 꽤나 익숙한 방법일 것이다.

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

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

if (person.role === ADMIN) {
  console.log("is admin");
}

• 하지만 이런 패턴에는 단점이 있다. 모든 상수를 정의하고 관리해야 한다는 것이다. 그리고 enum은 앞서 말한 패턴의 문제를 해결할 수 있는 타입이다.

enum Role

• 먼저, enum 키워드로 enum을 생성하고, 키워드는 대문자로 시작하는 Role로 지정한다. enum 역시 사용자 지정 타입이기 때문에 이러한 방식을 따르는 것이다. 그리고 중괄호 쌍을 입력한 뒤,

enum Role {
  ADMIN,
  READ_ONLY,
  AUTHOR,
}

• ADMIN, READ_ONLY, AUTHOR, 같은 값을 지정한다. 순서대로 각각 0, 1, 2 라는 숫자가 할당될 것이다.

enum Role {
  ADMIN,
  READ_ONLY,
  AUTHOR,
}

const person = {
  name: "Maximilian",
  age: 30,
  hobbies: ["Sports", "Cooking"],
  role: Role.ADMIN,
};

• 그리고 아래 role 에서 Role.ADMIN으로 접근하여 값을 지정한다.

enum Role {
  ADMIN,
  READ_ONLY,
  AUTHOR,
}

const person = {
  name: "Maximilian",
  age: 30,
  hobbies: ["Sports", "Cooking"],
  role: Role.ADMIN,
};

...

if (person.role === Role.AUTHOR) {
  console.log("is author");
}

• if 문에서 role이 AUTHOR 인지 확인하고 참이면 콘솔에 문자열을 출력하도록 했다. 지금까지 이 모든 작업을 라벨을 숫자로 할당하게 해주는 enum으로 수행해보았다. 해당 코드를 컴파일한 자바스크립트를 살펴보면,

var Role;
(function (Role) {
  Role[(Role["ADMIN"] = 0)] = "ADMIN";
  Role[(Role["READ_ONLY"] = 1)] = "READ_ONLY";
  Role[(Role["AUTHOR"] = 2)] = "AUTHOR";
})(Role || (Role = {}));
var person = {
  name: "Maximilian",
  age: 30,
  hobbies: ["Sports", "Cooking"],
  role: Role.ADMIN,
};

...

if (person.role === Role.AUTHOR) {
  console.log("is author");
}

• 컴파일된 코드가 재현되고 있음을 알 수 있다. 숫자 값을 저장할 수 있는 해당 코드 블록에는 ADMIN, READ_ONLY, AUTHOR 속성 등이 포함되므로 다소 복잡하지만 타입스크립트에서는 아주 간단하게 수행이 가능하다.

enum Role {
  ADMIN = 5,
  READ_ONLY = 100,
  AUTHOR = 200,
}

• enum의 경우 기본 동작에만 국한되지 않는다. 특정 이유로 인해서 시작 숫자를 0으로 시작하지 못하는 경우, 식별자에 등호를 추가하여 다른 숫자를 입력할 수도 있다. 시작 값이 0이 아니라 5라면 이 시작 값 식별자 다음의 다른 식별자 값은 시작 값으로부터 증가시켜서 할당해줘야 한다. 이를테면 이전의 기본 동작이 0, 1, 2 였다면 5로 시작 값을 할당한 지금은 5, 6, 7이 되는 것이다. 물론 enum에는 숫자 뿐만 아니라 텍스트를 할당할 수도 있고, 혼합도 가능하다.

enum Role {
  ADMIN = "ADMIN",
  READ_ONLY = 1,
  AUTHOR = "200",
}

• 어떤 것이든 할당이 가능하고, 숫자가 증가하기 시작하는 기본 값(ADMIN)이 0이지만 동작을 다른 식으로 구성하기 위해선 문자열에 이어서 숫자를 입력할 수도 있고 다른 문자열을 입력해도 된다. 이렇게 enum으로 정의한 Role은 role 타입을 참조하거나, 사용자 정의 타입을 참조하거나, 생성한 사용자 정의 사용 가능하다는 장점이 있고 이것은 enum의 강점이라고 할 수 있다. 인간이 읽을 수 있고 백그라운드에 매핑된 값이 있는 식별자가 필요할 때 enum의 강점을 우리는 활용할 수 있다.

✧ any 타입

• any 타입은 타입스크립트에서 할당할 수 있는 가장 유연한 타입이다. 이 타입은 모든 종류의 값을 저장하고, 타입 배정도 딱히 필요하지 않다. 그리고 any 타입을 사용하더라도 타입스크립트에 아무런 문제가 되지 않는다.

any 타입의 문제점

• any는 아주 유연하고 훌륭한 타입처럼 보이지만, 이것이 지닌 큰 단점 때문에 any를 가능한 쓰지 않아야 겠다고 생각하게 될 것이다. 왜냐하면 타입스크립트를 사용함으로써 가지게 되는 모든 장점을 any가 상쇄시켜 그저 바닐라 자바스크립트를 사용할 때와 다를 바가 없게 되기 때문이다. any 또는 any 변수가 어떤 값도 저장하지 않기 때문에 컴파일러가 검사할 부분이 없어진다. 따라서 any를 사용해야만 하는 몇 가지 이유가 있을 때에만 사용해야 한다. 이를 테면 어떠한 값이나 종류의 데이터가 어디에 저장될지 전혀 알 수 없는 경우를 대비하거나, 런타임 검사를 수행하는 경우 도중에 특정 값에 수행 하는 작업의 범위를 좁힐 때에만 말이다. 그외에는 any 타입을 가능한 사용하지 않는 게 좋다.

✧ union 타입

• 숫자와 문자열로 작업 가능한 유연한 조합의 함수를 포함하는 어플리케이션을 구축할 수 있도록 우리는 union 타입을 사용해보려고 한다.

function combine(input1: number, input2: number) {
  const result = input1 + input2;
  return result;
}

const combinedAges = combine(30, 26);
console.log(combinedAges); // 56

const combinedNames = combine("Max", "Anna");

console.log(combinedNames); // error !!!!

• 위의 코드인 경우, 문제가 있다. 지금은 함수에서 받는 매개변수 모두 숫자 타입으로 설정되어 있기 때문에 숫자로 작업을 하는 경우 해당 함수를 호출할 수 있지만, 문자열로 작업을 하는 경우, 즉시 에러가 발생하기 때문이다. 물론, 매개 변수의 타입을 문자열로 변환할 수도 있지만 그렇게 되면 숫자로 작업을 할 수 없게 된다. 이럴 때 우리는 union 타입을 사용해서 문제를 해결할 수 있다.

function combine(input1: number | string, input2: number | string) {
  const result = input1 + input2;

  return result;
}

const combinedAges = combine(30, 26);
console.log(combinedAges); // 56

const combinedNames = combine("Max", "Anna");
console.log(combinedNames); // MaxAnna

• 두 종류(숫자, 문자열)의 값을 사용해야 하는 어플리케이션에서 매개변수를 유연하게 받아오기 위해서는 union 타입을 사용하여 타입스크립트에세 숫자나 문자열 중 하나를 사용해도 괜찮다는 것을 알려야 한다. 이때 우리는 파이프 기호| 을 사용하여 다른 타입을 입력하면 된다. 이처럼 예시의 두 가지 이상의 타입이나 혹은 그 이상의 타입을 필요한 만큼 사용할 수 있게 된다. 하지만 더하기 연산자에서는 '문자열'이나 '숫자' 타입을 적용할 수 없다는 에러가 발생한다. 물론 더하기 연산자는 숫자와 문자열 모두 사용할 수 있으므로 문제가 없어야 하지만, 더하기 연산자를 사용할 수 없는 타입도 있을 것이라고 타입스크립트는 이해하고 있는 것이다. 이를 해결하기 위해서는 간단한 런타임 검사를 추가하여 매개변수가 숫자 타입일 때와 문자열 타입일 때를 각각 다르게 연산하여 반환할 수 있다.

function combine(input1: number | string, input2: number | string) {
  let result;
  // 런타임 검사 추가
  if (typeof input1 === "number" && typeof input2 === "number") {
    // number type
    result = input1 + input2;
  } else {
    // string type
    result = input1.toString() + input2.toString();
  }
  return result;
}

const combinedAges = combine(30, 26);
console.log(combinedAges); // 56

const combinedNames = combine("Max", "Anna");
console.log(combinedNames); // MaxAnna

• 이제 두 문자열을 연결할 수 있기 때문에 더이상 에러가 발생하지 않는다.

정리

• 코드의 어느 위치에서든 함수 내에서 수행하는 작업과 관련하여 보다 유연하게 유니언 타입을 활용할 수 있다. (물론 추가적인 런타임 검사는 union 타입을 사용하여 작업할 때에 종종 필요한 부분이니 기억해두자.) 이처럼 union 타입을 사용하면 코드에 적용한 매개변수를 보다 유연하게 사용할 수 있다. 그런데 이를 사용했을 때 타입에 따라 함수 내에 다른 로직을 적용할 수 있으므로 함수가 여러 유형의 값으로 작동할 수 있게 된다. 물론 타입에 따라 조금씩 달라지므로 union 타입으로 작업할 때 위의 경우처럼 종종 런타임 검사가 필요한 경우도 있고, 프로그램에 따라 런타임 검사를 수행하지 않아도 union 타입을 사용할 수 있는 경우도 있다. 단지 구성하는 로직이 어떤 식이냐에 따라 달린 문제이다.

✧ aliases 타입과 사용자 정의 타입

aliases 타입 적용 전

function combine(
  input1: number | string,
  input2: number | string,
  resultConversion: "as-number" | "as-text" // 특정 문자열을 union 타입으로 지정
) {
  let result;
  if (
    (typeof input1 === "number" && typeof input2 === "number") ||
    resultConversion === "as-number"
  ) {
    result = +input1 + +input2; // 에러를 방지하기 위해서 미리 숫자로 변환하여 더해줌.
  } else {
    result = input1.toString() + input2.toString();
  }
  return result;
}

aliases 타입 적용 후

// ⚡️
type Combinable = number | string;
type ConversionDescriptor = "as-number" | "as-text";
// ⚡️

function combine(
  input1: Combinable,
  input2: Combinable,
  resultConversion: ConversionDescriptor
) {
  let result;
  if (
    (typeof input1 === "number" && typeof input2 === "number") ||
    resultConversion === "as-number"
  ) {
    result = +input1 + +input2;
  } else {
    result = input1.toString() + input2.toString();
  }
  return result;
}

• aliases 타입은 내가 정하고 싶은 별칭으로 저장하고자 하는 모든 타입의 설정에 사용할 수 있다.

type Combinable = number | string;
type ConversionDescriptor = "as-number" | "as-text";

✧ aliases 타입 및 객체 타입

• 타입 별칭을 사용하여 타입을 직접 “생성”할 수 있다. 유니온 타입을 저장하는 것만 가능한 것이 아니라, 복잡할 수 있는 객체 타입에도 별칭을 붙일 수 있다.

type User = { name: string, age: number };
const u1: User = { name: "Max", age: 30 }; // this works!

• 타입 별칭을 사용하면 불필요한 반복을 피하고 타입을 중심에서 관리 할 수 있게 된다. 예를 들어,

function greet(user: { name: string, age: number }) {
  console.log("Hi, I am " + user.name);
}

function isOlder(user: { name: string, age: number }, checkAge: number) {
  return checkAge > user.age;
}

• 라는 타입 지정을 aliases 타입으로 관리하면

type User = { name: string, age: number };

function greet(user: User) {
  console.log("Hi, I am " + user.name);
}

function isOlder(user: User, checkAge: number) {
  return checkAge > user.age;
}

• 이렇게 단순화 할 수 있게 된다.

✦ 출처

---

🚨 해당 포스팅은 Udemy의 Typescript :기초부터 실전형 프로젝트까지 with React + NodeJS 강의를 베이스로 한 기록입니다.
✍🏻 강의 git repo 바로가기