일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
- 수제비
- useState
- 백엔드개발자
- Redux
- 프론트엔드
- TS
- JS
- security
- Node.js
- 정보처리기사
- JavaScript
- 자바스크립트
- spring boot
- spring boot security
- TypeScript
- Front-End
- frontend
- 백엔드
- 웹개발자
- VUE
- JWT
- It
- React
- 타입스크립트
- Authentication
- 리액트
- 큐넷
- 스프링부트
- 정보처리기사 실기
- spring
- Today
- Total
솔적솔적
Typescript 내가 너의 것을 딱 정해줄게 Literal타입 PART4 본문
이번 시간에는 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();
'Front-end > typesrcipt' 카테고리의 다른 글
Typescript rest parameter / destructuring일 때 타입지정은?_part6 (0) | 2022.01.21 |
---|---|
Typescript Object에 쓸 수 있는 interface_part5 (0) | 2022.01.19 |
Typescript 타입을 변수에 쏙 part3 (0) | 2022.01.16 |
Typescript 애매할 때 딱 잡아바꾸자!(narrowing과 Assertion) Part2 (0) | 2022.01.16 |
TypeScript 왜 사용해? (이유와 기본 타입 정리 간단히 ) part1 (0) | 2022.01.16 |