TypeScript 타입종류

TypeScript에서 설정할 수 있는 타입들에 대한 설명글입니다.

 

 

1. number - 숫자

let numberVal: number;
numberVal = 3;

 

 

 

2. string - 문자열

let stringVal: string;
stringVal = '3';

 

3. boolean - 논리형

let booleanVal: boolean;
booleanVal = true;

 

4. void - null / undefined / 반환값이 없는 함수

let voidVal: void;
voidVal = null;
voidVal = undefined;

function voidFunc(a:number,b:number): void {
    console.log(a+b);
}

function voidFunc(a:number,b:number): void {
    console.log(a+b);
    return a+b; //error
}

 

- hoistion때문에 함수를 변수에 넣어서 쓰고 싶다면?

const voidFunc4:void = function(a:number,b:number) {
    console.log(a+b);
}
//error

//

const voidFunc4 = function(a:number,b:number): void {
    console.log(a+b);
}

1번 예시처럼은 보이드타입 함수를 쓸 수 없음.

왜냐하면 함수안에 리턴값이 없는 것이지 voidFunc4에는 함수가 리턴될것이기 때문

(맞는지 확신은 없음)

 

 - 함수 파라미터가 옵션일 경우 아래와 같이 사용할 수 있다.

function voidFunc2(a:number,b?:number): void {
    let c: number = b ? b : 3;
    console.log(a+c);
}
voidFunc2(4);

 

 - 혹시 파라미터에 default가 설정돼있으면 어떻게 될까?

function voidFunc3(a:number,b?:number=5): void {
    let c: number = b ? b : 3;
    console.log(a+c);
}
voidFunc3(4); //error

function voidFunc3(a:number,b:number=5): void {
    let c: number = b ? b : 3;
    console.log(a+c);
}
voidFunc3(4);

에러가 난다.

default가 설정돼어있으면 굳이 인자를 보내지 않아도 됨

 

 

5. object - 객체

let objectVal1: object;
let objectVal2: {name: string, age:number};
objectVal1 = {name:'aaa'};
objectVal2 = {name:'aaa',age:15};

단순하게 object로만 선언을 할 수도,

key마다의 타입을 정하여 선언할 수도 있음

 

 

6. array - 배열

let arrayVal1: number[];
let arrayVal2: Array<number>;
arrayVal1 = [4,2,5];
arrayVal2 = [4,2,5];

배열에 대한 타입을 정할때

위와 같지 두가지 방식으로 선언할 수 있다.

나는 arrayVal1이 좋음

 

 

7. tuple - 길이가 고정되고 타입이 다를 수 있는 배열

let tupleVal: [string,number,boolean];
tupleVal = ['string',5,true];

 

8. any - 모든 타입 가능

let anyVal: any;
anyVal = [5,3];
anyVal = [4,'5'];
anyVal = null;
anyVal = {age:3}

 

9. union : 여러가지 타입 설정

let union: string|number;
let unionArray: string[]|number[];
union = 5;
unionArray = ['5','4'];
unionArray = ['5',4]; //error

여러가지 타입을 허용할 수 있는것이 union문법

위와같이 | 로 구분해주면 됨

배열을 사용할 때 주의점이라면

5줄처럼 string,number를 동시에 받는 배열이 아닌,

string배열, number배열 이란 뜻임

 

 

10. 반환값이 있는 function

function numFunc1(a:number,b:number): number {
    return a+b;
}
const numFunc2 = (a:number,b:number): number => {
    return a+b;
}

void 타입의 함수와는 달리 반환값이 있을 시에

반환값의 타입에 맞춰 함수에 타입을 지정해 줄 수 있음

 

 

11. unknown - 어떤 타입이 올 지 정말 모를 때

function reqLength1(str: unknown): void{
    console.log(str.length);
}
reqLength1('d') //error

function reqLength2(str: any): void{
    console.log(str.length);
}
reqLength2('d')

reqLength1은 안되고 reqLength2는 되는 이유가 뭘까?

쉽게 설명하자면

any타입은 "아무타입이나 와도 괜찮아~" 이고

unknown타입은 "뭔타입이 올지 겁나니 우리(타입스크립트)가 체크해줄께~" 로 보면 된다.

 

reqLength1에 보내는 인자가 현재 'd'로 string이지만

계속 string 일지는 모른다.

다음엔 숫자를 보낼지 객체를 보낼지 개발자가 정해 놓지 않았기 때문에.

 

만약 객체의 인자가 reqLength2로 보내진다면 undefined란 결과가 나올 것.

unknown 타입은 이러한 에러를 방지하는 타입으로

 

기본적으론 any타입처럼 아무타입의 값이 와도 되지만

모든 타입이 잘 실행될수 있는지 타입스크립트에서 한 번 보증해준다 보면 될듯함.

결론 : any보다 안전

 

- 추가로 unknown은 unknown이나 any를 제외하고 다른 타입의 변수나 함수에 대입될 수 없다.

무슨 말이냐면

let stringValue:string = '3';
let unknownValue:unknown = 4;
let anyValue:any = 4;
// stringValue = unknownValue;
unknownValue = stringValue;
anyValue = unknownValue;

논리적으로 생각해보면 당연하다.

string타입에 무슨타입이 올지도 모르는 변수를 넣는다는게 말이 안된다.

위 예시코드처럼 string인 변수에 unknown인 변수가 들어가버리면 4가 들어가게되버리기 때문에

당연히 ts에서 막아주고 있다. 

 

any타입인 변수에는 아무값이나 들어가도 상관없으니 문제 없다.

 

 

12. never - 절대 반환 될 수 없는 타입

function never(): never{
    throw new Error("");
}
console.log(never());​

never() 처럼 절대 반환될 수 없는 값에 never타입을 걸어주면 된다.

 

- never는 any와 정반대로 다른 모든 타입의 값에 할당할수도, 할당될수도 없다.

 

 

 

13. enum - 상수의 집합

 

enum FoodEnum {
    hamburger,
    bulgogi,
    pasta
}
console.log(FoodEnum) //아래와 같이 출력됨
//
{
  '0': 'hamburger',
  '1': 'bulgogi',
  '2': 'pasta',
  hamburger: 0,
  bulgogi: 1,
  pasta: 2
}
//

function getFoodNum(v: FoodEnum): number {
    switch (v) {
        case FoodEnum.hamburger:
            return 1;
    
        case FoodEnum.bulgogi:
            return 2;

        case FoodEnum.pasta:
            return 3;
    }
}
console.log(getFoodNum(2)); // 3

function getFoodName(v: FoodEnum): string {
    return FoodEnum[v];
}
console.log(getFoodName(2)); // pasta

enum은 FoodEnum의 출력값처럼

인덱스넘버를 호출하면 enum안의 값이 반환되고,

enum안의 값을 호출하면 인덱스넘버가 반환된다.