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 | 31 |
Archives
Tags
- Display
- 자바 환경변수
- clear
- Openjdk
- db
- vue
- switch
- To Do List
- Break Continue
- 조건문
- 전자정부프레임워크
- Heidi
- java
- 자바 기초
- 로또 번호 생성
- react
- JS
- DropDown
- mysql
- 자바
- CSS
- 자료형
- HTML
- position
- overflow
- 연산자
- float
- javascript
- do while
- 웹디자인 기능사
- Today
- Total
잠온다
TS) 함수 타입 지정 및 Type Narrowing 본문
1. 함수 타입 지정
function getDouble(x: number) :number {
return x * 2;
}
// function 함수(x: 매개변수타입) :리턴타입 { return ... }
=============================================================================================
function myFunc(x: number) :void {
console.log('x * 2 = ' + (x * 2));
}
// 함수는 void 타입이 존재한다.
=============================================================================================
// 매개변수가 옵션일 경우(필수가 아닐 경우)
function myFunc(x?: number) :void {
console.log(typeof x);
}
myFunc(1); // number
myFunc(); // undefined
// 매개변수 옆에 '?'를 붙이면 해당 매개변수는 옵션이다.
// 정확히 말하면 x는 number | undefined 인 union type이 된다.
=============================================================================================
function myFunc(x?: number) :number {
return x * 2; // error - x는 union type 이기에 연산이 불가능하다.
}
2. Type Narrowing
// 인자 값의 타입이 어떤 타입일지 확실하지 않기에 타입을 좁혀주는 것이 좋다.
function myFunc(x: number | string) {
if (typeof x === 'number') {
return x + 1;
} else if (typeof x === 'string') {
return x + 1;
} else { // ex) null
return 0;
}
}
// x는 number 혹은 string 타입이지만 그럼에도 else문으로 리턴하는 조건문을 작성해주어야 한다.
// 해당 과정이 번거롭다면 tsconfig.js 파일에 "noImplicitReturns": false 옵션을 추가해주면 된다.
// (되도록이면 해당 옵션 추가보다는 엄격하게 코드를 작성해주는 것이 좋다.)
// (꼭 typeof가 아니라도 타입을 하나로 확정지을 수 있는 코드라면 narrowing이 가능하다.)
3. Type Assertion
function myFunc(x: number | string) {
return (x as number) + 1;
}
myFunc('123');
// assert는 '주장하다'라는 뜻으로, 말 그대로 해당 타입이라고 주장만 해줄 뿐이다.
// 위 예제처럼 myFunc('123')이라고 호출을 한다면 리턴 값은 '1231'이 된다.
// assert는 주장만 해줄 뿐, x의 타입이 number로 바뀌는 것이 아니다.
// 즉 union type이었던 x를 number type이라고 주장하여 연산은 작동하도록 해주지만
// x의 값은 문자열 '123'이기에 +1을 해준다면 결과는 '1231'이 된다.
// as는 간편하지만 타입을 마음대로 주장하는 것이라 타입 체크 기능을 잠깐 쓰지 않겠다는 말과 같다.
// 그래서 가급적이면 아래 경우에만 사용하도록 하자
// 1. 왜 타입에러가 나는지 정말 모르겠는 상황에 임시 에러해결용으로 사용
// 2. 어떤 타입이 들어올지 정말 확실하게 알고 있는데 컴파일 에러가 방해할 때
'Typescript' 카테고리의 다른 글
TS) Typescript로 HTML 변경 및 조작할 때 주의점 (0) | 2022.05.30 |
---|---|
TS) Literal Types / as const (0) | 2022.05.28 |
TS) type alias / readonly / object 옵션 / type 키워드 합치기 (0) | 2022.05.28 |
TS) 기본 타입 및 union, any, unknown type (0) | 2022.05.28 |
Typescript 설치 및 설정 (0) | 2022.05.28 |
Comments