솔적솔적

Typescript 내가 너의 것을 딱 정해줄게 Literal타입 PART4 본문

Front-end/typesrcipt

Typescript 내가 너의 것을 딱 정해줄게 Literal타입 PART4

솔솔봄향기 2022. 1. 16. 21:53

 

이번 시간에는 Literal Types에 대해서 알아보자.

 

내가 어떤 변수를 만들 때 딱 5라는 값만 갖게 제한을 두고 싶으면 어떻게할까요?

네, const 변수를 사용하면 되지요. 

근데 "흠~ 5아니면 6만 가질 수 있게 하고 싶다." 라면 어떻게 할까요?

 

그 변수에 number 이러 식으로 타입을 정해준다면 모든 숫자들을 넣을 수 있으니깐 범위가 커지게될 것인데..

 

이럴 때 쓰는 변수가 바로 Literal type을 사용합니다.

 

| Literal Type 만드는 법

 let 짱아 : '아기';
 let 짱구 : '어린이';

지금까지 number, string, boolean 이런 것들만 타입을 지정할 수 있는 것이 아니라, 이렇게 내가 정한 것도 

변수 또는 함수에 할당할 수 있습니다. 

 

짱아란 변수는 '아기'라는  글자만 할당될 수 있고, 짱구는 '어린이'라는 글자만 할당할 수 있습니다.

이렇게 특정 글자 또는 숫자만 가질수 있게 제한을 두는 타입이 바로 Literal type이라고 부릅니다.

 

 

함수의 경우

function 함수(a: 'hi') : 4 | 5 | 6 {
	return 5
}

파라미터 타입선언할 때 글자나 숫자를 넣고 return 타입선언할 때도 글자나 숫자를 넣으면 그 값만 return 가능.

 

 

| as const 문법

var person = {
  name : 'park'
}

function 함수(x : 'park'){
}

함수(person.name) //에러에러

에러가 나는 이유는 함수는 'park'만 입력할 수 있다 해놨지만 person.name은 string타입이지 'park' 타입이 아니기 때문.

 

이럴 때 as const를 사용하는데 as const는

- 타입을 오브젝트의 value로 바꿔준다. 즉 타입을 'park'으로 변경시키고

- 오브젝트안에 있는모든속성을 변경하면 에러방지용으로 readonly로 바꿔줍니다.

var person{
	name : 'park'
} as const;

function 함수(a : 'kim){
}

함수(person.name)

함수와 methods에 type alias 지정

 

함수에서도 타입지정이 가능합니다.

| type alias에 함수 type 저장해서 쓰는 법

함수에서도 타입지정이 가능합니다.

type 함수타입 = (a:string) => number;

let 함수 : 함수타입 = function() =>{ 

}

let 가족 = { name : 'park' , plusOne(){}
} //콜백함수도 넣을 수 있고

 

| function type 도 저장가능

type Num = (x : number, y : number ) => number ;

 

|methods 안에 타입지정

object 자료 안에 함수도 맘대로 집어넣을 수 있습니다.

let person = {
	
	name : 'kim',
    age : 30,
    
    함수(x){
    	return x + 1
    }, 
    name2 : () => { console.log(hi)}
}
}

person.함수(1);
person.name2();