타입스크립트 02. 여러가지 타입(union, literal, unknown, ...)

union

---

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

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

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

 

위와 같은 함수에서, combineNames는 작동하지 않는다. 매개변수의 타입이 number로 명시되어 있기 때문.

이럴 때 union 타입을 사용할 수 있는데, | 기호로 여러 타입을 연결해주면 된다.

 

하지만 타입스크립트는 입력될 값이 number와 string이라는 것만 알지, 그 두개의 값을 더할 수 있는지 없는지에 대해서는 알지 못한다.

 

 

union 타입을 사용하면 코드의 매개변수를 보다 유연하게 사용할 수 있기 때문에 아래와 같이 추가적인 런타임 검사를 하기도 한다.

경우에 따라 런타임 검사를 수행하지 않고도 union 타입을 사용할 수도 있다.

 

function combine(input1: number | string, input2: number | string) {
  let result;
  if (typeof input1 === "number" && typeof input2 === "number") {
    result = input1 + input2;
  } else {
    result = input1.toString() + input2.toString();
  }

  return result;
}

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

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

 

 

literal

---

 

 

타입을 리터럴로 정해버리는 방법도 있다.

 

 

타입 알리어스 Type alias / 사용자 정의 타입

---

 

union 타입이나 리터럴 타입에 별칭을 사용하면 좀 더 가독성 높은 코드를 작성할 수 있다.

복잡한 개체 타입에도 별칭을 붙일 수 있다.

 

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;
}

 

위 코드를

 

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;
}

 

이렇게 바꿀 수 있다.

 

 

 

함수 반환 타입 및 "무효"

---

 

 

매개변수를 작성한 것 우측에 기재된: void는 함수가 반환하는 값의 타입을 나타낸다.

void는 반환값이 없다는 의미다.

 

자바스크립트에서는 아무 것도 반환하지 않는 함수의 반환값을 출력하면 undefined 가 나온다.

자바스크립트에서 undefined는 '값'이다. 객체 내에 존재하지 않는 속성에 접근하려는 경우에도 undefined가 출력된다.

 

반면, 타입스크립트에서 undefined는 타입이다.

 

함수가 undefined를 반환하거나 아무 것도 반환하지 않는다면 void를 사용해야 한다.

void는 해당 함수에 의도적으로 반환문을 넣지 않았다는 것을 의미하기 때문이다.

 

위의 코드 맨 아랫줄이 undefined를 반환하니까 void 대신 undefined를 써도 되지 않을까? 하고 생각할 수 있지만,

 

 

undefined를 입력하면 타입스크립트는 함수 내에 값을 반환하지 않는 반환문이 있을 거라고 여긴다. (3번째 줄)

 

 

함수 타입

---

 

 

 

함수였던 combineValues에 숫자형 값을 할당해도 Typescript 컴파일러는 잘 작동한다.

하지만 숫자를 함수처럼 쓰려고 했기 때문에 런타임에서 에러가 발생한다.

 

 

이렇게 해결할 수는 있지만 완벽하지만은 않다.

 

 

예를 들어, combineValues를 입력하고 printResult를 재할당하면 타입스크립트는 문제가 없다고 여기겠지만 printResult는 두 인자를 받는 함수가 아니다.

 

 

이런 식으로 입력될 매개변수와 반환값을 지정해줄 수 있다.

 

 

 

콜백 함수

---

 

 

 

 

콜백함수가 아무 것도 반환하지 않는다고 명시했지만,

위 코드처럼 무언가를 반환하더라도 오류가 발생하지 않는다.

콜백 타입에 void를 지정하면, 반환된 값을 사용하지 않을 거라는 뜻이다. 컴파일은 된다.

 

하지만 만약 반환값이 있고 그 반환값을 사용해야 하는 콜백 함수를 사용해야 하는 경우라면,

어떤 값이 반환될 지에 대해 명확하게 정의하는 과정이 필요하다.

 

 

unknown

---

 

any와 비슷하지만 다르게 동작한다.

 

let userInput: any;
let userName: string;

userInput = 5;
userInput = 'jongon';

userName = userInput;

 

위 코드에서는 오류가 발생하지 않는다.

 

 

unknown을 사용하면 string이 아닐 경우 userName에 할당될 수 없다는 오류가 생긴다.

아래와 같은 조건문을 이용하는 것과 같다.

 

if (typeof userInput === 'string') {
	userName = userInput;
}