[TS]Union Type, 함수에 타입 지정하는 법 & void 타입

이해용·2022년 6월 22일
0
post-thumbnail
post-custom-banner

Union Type

유니온 타입(Union Type)이란 자바스크립트의 OR 연산자(||)와 같이 A이거나 B이다.

let myName: string | number = 'kim';
let myAge: (string | number) = 100;
let arr: (number | string)[] = [1,'2',3]
let obj: {data : (number | string) } = { data : '123' }

any type

아무 자료나 집어넣을 수 있는 타입, 쉽게 비유하면 실드해제.

let myName: any = 'kim';
myName = 123;
myName = undefined;
myName = [];

any 타입은 버그가 생기면 추적이 어렵기 때문에 잘 사용하지 않으며 타입스크립트를 사용하는 의미가 없어진다. 따라서 변수 타입체크 해제기능이라 생각하면 된다.

unknown

any와 똑같이 모든 타입을 집어넣을 수 있다.

let myName: unknown = 'kim';
myName = 123;
myName = undefined;
myName = [];
// error 발생 X

특징
1. unknown 타입엔 모든 자료 다 집어넣을 수 있다.
2. 자료집어넣어도 타입은 그대로 unknown
3. 함수 본문에 any 값이 없어도 모든 값을 허용하는 함수를 설명할 수 있기 때문에 함수 유형을 설명할 때 유용하다.
반대로, 알수 없는 유형의 값을 반환하는 함수를 설명 할 수 있다.

함수에 타입 지정하는 법

  1. 함수로 들어오는 자료 (파라미터)
  2. 함수에서 나가는 자료 (return)

ex)

//es5
function myFunction(x : number) : number {
  return x * 2;
}

//es6
const myFunction = (x : number) : number => {
  return x * 2;
}

Void 타입

변수에는 undefinednull만 할당하고, 함수에는 반환 값을 설정할 수 없는 타입입니다.

let unuseful: void = undefined;
function notuse(): void {
  console.log('sth');
}

함수에서 뭔가를 return하려고할 때 에러를 내기 때문에 함수에 return 방지장치를 주고 싶을 때 void 타입을 활용하면 된다.

파라미터가 옵션일 경우?

함수에 파라미터자리를 만들어놨지만 가끔 파라미터 없이 사용할 때도 있다.

const myFunction = (x? : number) : number => {
  return x * 2;
}

위처럼 사용하면 파라미터는 옵션이라는 정의이며 x : number | undefined 와 똑같은 의미이다.

참고 및 출처
코딩애플 강의
https://www.typescriptlang.org/
https://joshua1988.github.io/ts/

profile
프론트엔드 개발자입니다.
post-custom-banner

0개의 댓글