[TS]Literal Types, as const, function type 에 type alias 저장

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

Literal Types

string, number 뿐 아니라 일반 글자도 타입이 될 수 있다.

let john : 'park';
let bob : 'lee';

john이라는 변수는 이제 'park' 이라는 글자만 할당할 수 있습니다.

bob이라는 변수는 이제 'lee' 라는 글자만 할당할 수 있습니다.

위처럼 특정 글자나 숫자만 가질 수 있게 제한을 두는 타입을 literal type 이라고 부른다.

let location: 'left' | 'right';
location = 'left';

or 기호도 사용 가능하다.

let myFunction = (a : 'hello') : 1 | 0 | -1 => {
  return 1 
}

함수도 사용 가능하다.

as const

let reference = {
  name : 'kim'
}

let myFunction = (a : 'kim') => {

}

myFunction(reference.name) // error: 'string' 형식의 인수는 'kim' 형식의 매개 변수에 할당 될 수 없습니다.

해결방법
1. object 만들 때 타입을 잘 정하기.
2. assertion 사용 (like as 'kim')
3. as const 라는걸 object 자료에 사용

ex)
let reference = {
  name : 'kim'
} as const

let myFunction = (a : 'kim') => {

}

myFunction(reference.name)

as const의 효과
1. 타입을 object의 value로 바꿔준다. (타입을 'kim'으로 바꿔다)
2. object안에 있는 모든 속성을 readonly로 바꿔준다. (변경하면 에러나게)

function type 에 type alias 저장

숫자 두개를 파라미터로 입력할 수 있고, 숫자를 return 하는 함수를 별명을 지어서 사용하려면 아래처럼 이용 가능하다.

ex)
type NumOut = (x : number, y : number ) => number 
let ABC :NumOut = function(x,y){
  return x + y
}

methods 안에 타입지정

type CustomerInfo = {
  name : string;
  age : number;
  plusOne : (x : number) => number,
  changeName : () => void ,
}

let customerInfo = {
  name : 'kim',
  age : 30,
  plusOne (x){
    return x + 1
  },
  changeName : () => {
    console.log('Hello')
  }
}
customerInfo.plusOne(1);
customerInfo.changeName();

arrow function, 일반함수 전부 object 안에 맘대로 집어넣을 수 있다.
함수들은 똑같이 점찍어서 사용가능하다.

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

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

0개의 댓글