type 키워드 & literal Type

미누도 개발한다·2021년 10월 10일
0

타입스크립트

목록 보기
5/7

type alias

type alias 라는 것을 통해, 타입을 미리 정의 해두고 사용할 수 있습니다.
alias명은, 보통 대문자로 시작하거나 끝에 Type을 붙입니다.
또한 타입변수는 재정의 불가능 합니다.

type Animal = string | number | undefined;
let lion:Animal = 'dddd' ;

주로 object 형을 미리 정의하면 편합니다.

type student = {
  readonly name: String,
  age:number
}

const boy:student = {
  name:'ddd',
  age:3
}

boy.name = "ddf" // 에러

readonly 키워드를 붙여 object의 속성값 변경을 막을 수 있습니다.
물론 변경시, 타입스크립트에서만 에러를 띄워주고 런타임에서는,그대로 동작합니다.

참고로 const는 변수값의 재할당을 막는 것이기 때문에, const 변수에 담겨있는 object의 지번을 이용하여, object의 속성값을 변경하는데에는 전혀 문제가 없습니다.

  • Type 키워드를 여러개 합칠 수 있다.
type Name = string;
type Age = number;
type NewOne = Name | Age;  // union Type으로 합칠수있습니다.
  • Type 키워드를 extend 할 수 있다.

ex 1)

type PosX = {x:number};
type PosY = {y:number};

type Pos = PosX & PosY; // {x:number, y:number}

// {x:number} & posY 이런형태로도 사용할 수 있습니다. 

ex 2)


type Obj = {
  name:string,
  age:number
}
type Obj2 = {
  name:string,
  addr:string
}

type newType = Obj & Obj2 
//extend 중에 속성명 이 중복되어도 동작합니다

const person:newType = {
  name:'홍길동',
  age:20,
  addr:'서울'
}  

함수도 타입 Alias가 가능합니다.

함수표현식에서만 사용할 수 있습니다.

type Func  = (a :string) => number;

let myFunc:Func = function(x){
  return 3
}

object안에 함수를 Alias 하려면 아래와 같이 쓸 수 있겠죠?

type MyObj = {
  name:string
  plus: (x:number)=>number
  changeName: (x:string) => void
};

let obj:MyObj = {
  name:'kim',
  plus: (x) => x+1,
  changeName: (x)=> {
    obj.name = x
  }
}

콜백함수도 마찬가지로 아래와 같이 사용하면 됩니다.

type CutType = (x :string) => string

type RemoveType = (x:string) => number

type CutAndRemoveType = (a:string, b: CutType, c: RemoveType) => number

let cutZero :CutType = function (x){
    let result = x.replace(/^0+/, ""); // 0를 지워주는 정규식
    return result
}
let removeDash:RemoveType = function(x){
    let result = x.replace(/-/g, ""); // -를 지워주는 정규식
    return parseFloat(result)
}

let cutAndRemoveFunc:CutAndRemoveType = function(str,func1,func2) {
  let output = func1(str);
  return func2(output)
  
  
}

cutAndRemoveFunc('1231ffasf',cutZero,removeDash);


literal Type

리터럴 타입으로 어떤 값 자체를 타입, 값으로 지정할 수 있습니다.(타입자체가 값이 됩니다.)
특정 글자나 숫자만 가질 수 있게 제한을 둘 수 있습니다.

let foo : 'kim';
foo = 'lim';  // 에러

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

함수의 매개변수,리턴값을 아래와같이 리터럴타입으로 지정할 수 있습니다.

function foo(a : 'hello') : 1 | 0 | -1 {
  return 1 
}

리터럴 타입의 문제

let foo = {
  name:'kim'
}

function myFunc(a:'kim'):void {
  
}

myFunc(foo.name) // 에러 발생

foo.name은 string 타입의 'kim' 입니다.
따라서 'kim' 타입의 매개변수가 될 수 없습니다.

해결 방법은 크게 세가지가 있습니다.

  • object 선언시 속성 타입을 리터럴타입으로 지정
  • assertion (as 사용하기)
  • as const 키워드 붙이기

해결책 1 )

let foo:{
  name:'kim'
} = {
  name:'kim'
}

function myFunc(a:'kim'):void {
  
}

myFunc(foo.name)

해결책 2 )

let foo = {
  name:'kim'
}

function myFunc(a:'kim'):void {
  
}

myFunc(foo.name as 'kim') 

// 위처럼 하거나 , 아래와같이 지정합니다.
let foo = {
  name:'kim' as 'kim
}

해결책 3 )

as const 효과

  1. 타입을 object의 value로 바꿔줍니다. (타입을 'kim'으로)
  2. object안에 있는 모든 속성을 readonly로 바꿔줍니다 (잠금)

let foo = {
  name:'kim'
} as const;

function func(a:'kim'):void{

}

func(foo.name)
profile
빨리 가는 유일한 방법은 제대로 가는 것이다

0개의 댓글