본문 바로가기
Frontend/TypeScript(완)

[TS] TS 연습하기3

by VictorMeredith 2023. 4. 12.

TypeScript

//엄격한 type 지정 : literal Type
let 이이름 : 'lee' = 'lee'; //'lee' 만 들어갈 수 있다
let 납니다 : '대머리' | '솔로' = '대머리'; //'대머리' 혹은 '솔로' 만 들어갈 수 있다.

//함수에서 사용
function 뻥션(a:'hello'):1 | 0{ //파라미터는 'hello'만 받을 수 있고, 1|0 만 출력할 수 있다.
  return 1
}

// 리터럴 연습하기
type rsp = ('가위'|'바위'|'보')[]
const 가위바위보 = (a:'가위'|'바위'|'보'):rsp => {
  return ['보','가위']
}

// 리터럴 타입의 문제점 : 값이 타입이다.
const 자료 = {
  name : 'lee'
}
function 예시함수(a:'lee'){
  return;
}
// 예시함수(자료.name) 
// 이렇게 사용하면 에러가 난다. 파라미터 a는 값이 'lee'가 아니고 타입이 'lee'여야 하기 때문이다.

// 그래서 해결방법은 ? 
const 자료2 = {
  name : 'lee',
  age : {
    t1 : 23,
    t2 : {
      t3 : 'thing'
    }
  }
} as const // as const를 붙이면 key자리의 속성을 value(lee) 의 타입으로 바꿔준다. + object 속성들에 모두 readonly를 붙여준다.

// 자료2.age.t2.t3 = 'that'; 
// 에러가 난다(변경 불가능. 즉, 깊은 불변성의 readonly를 제공한다.) 하지만, as const를 자주 사용하면 타입추론은 강력해지나, 예상치 못한 타입에러 발생가능성이 있다.

예시함수(자료2.name); // 이러면 에러가 안난다. (as const를 사용해서 name속성의 type을 lee로 변경해주었기 때문에)

 

'Frontend > TypeScript(완)' 카테고리의 다른 글

[TS] TS연습하기5  (0) 2023.04.12
[TS] TS연습하기4  (0) 2023.04.12
[TS] TS 연습하기2  (0) 2023.04.12
[TS] TS 연습하기1  (0) 2023.04.12
[TS] 타입스크립트 변수 문법 빠르게 정리하기  (0) 2023.04.10

댓글