Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
Tags
- KDT 프로그래머스
- git 같은계정 다른 컴퓨터
- react next
- postcss
- 리액트
- 프로그래머스 K_Digital Training
- 프로그래머스 프론트엔드 데브코스
- Spacer
- flex
- Vue
- 이벤트 수식어
- vue mixin
- SCSS extend
- 고양이 사진 검색기
- netlify redirect
- KDT 프로그래머스 데브코스 프론트엔드
- intersection opserver
- SCSS forward
- 리스트 렌더링
- 폼 입력 바인딩
- SCSS use
- 다른컴퓨터에서 git사용
- 쌓임맥락
- 프로그래머스 데브코스
- vue 지역 컴포넌트
- vuex map
- vue 이벤트 수신
- 프로그래머스 데브코스 프론트엔드
- nextjs사용법
- SCSS import
Archives
- Today
- Total
혼자 적어보는 노트
[TypeScript] enum / 타입추론 본문
enum
특정 값들의 집합을 의미하는 자료형
=> 상수를 정의할 때 사용한다.
enum Direction {
Up = "UP",
Down = "DOWN",
Left = "LEFT",
Right = "RIGHT",
}
초기 값을 넣어주지 않으면 0부터 차례대로 증가한다.
enum Direction {
Up, // 0
Down, // 1
Left, // 2
Right, // 3
}
enum의 문제점
변수에 타입을 지정한 후 값을 변경해도 에러가 발생하지 않는다.
let position:Direction = Direction.Left
position = Direction.Up;
position = 10 // 에러가 발생하지 않는다.
console.log(position) // 10
💡 union으로 대체하여 사용하기
type Direction2 = 'Up' | 'Down' | 'Left' | 'Right';
let position : Direction2 = 'Up';
position = 10;
타입 추론(Type Inference)
타입스크립트가 코드를 해석해서 타입을 추론하는 것
타입을 명시하지 않아도 타입 추론을 통해 타입을 지정하게 된다.
let name = 'hello';
name = 1; // Error
name에 type을 지정하지 않더라도 name은 string으로 간주된다.
함수의 인자는 기본으로 any로 지정되며 default 값 사용 시 해당 default 값의 타입으로 지정된다.
function greeting(message = 'hello'){
console.log(message);
}
greeting(1) // Error
타입 표명(Type Assertion)
타입에 대해 확신하는 경우 사용한다.
* 가능하면 사용 하지 않는 것을 권장
function greetingMessage(): any {
return 'hello';
}
const result = greetingMessage();
console.log(result.length);
console.log((result as string).length);
console.log((<string>result).length);
함수가 any type의 값을 반환한다고 정의했을 때
받은 값은 무조건 string이라고 작성을 해줄 수 있다.
❗ 무조건 값이 있을 경우를 확신할 때
function makeArray(): string[] | undefined {
return [];
}
const list = makeArray();
list!.push("hello") // OK
list.push("hello") // error
makeArray를 통해 리턴되는 값은 배열일 수도 있지만 undefined일 수도 있기 때문에
push를 하면 error가 발생하게 되는데, !를 사용하여 해당 변수 및 함수에 값이 있다는 것을 장담할 때 사용할 수 있다.
'Typescript' 카테고리의 다른 글
[Typescript] Type Guard로 타입 좁히기 (0) | 2022.07.13 |
---|---|
[Typescript] React에서 Typescript 사용하기 (0) | 2022.05.24 |
[TypeScript] 제네릭(Generics) (0) | 2022.05.23 |
[TypeScript] 인터페이스(interface) / Type과의 차이점 (0) | 2022.05.22 |
[TypeScript] 기본 타입 / 타입 별칭 / 유니온 타입 / 인터섹션타입 (0) | 2022.05.19 |
Comments