잠온다

TS) 함수 타입 지정 및 Type Narrowing 본문

Typescript

TS) 함수 타입 지정 및 Type Narrowing

블블디 2022. 5. 28. 17:57

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. 어떤 타입이 들어올지 정말 확실하게 알고 있는데 컴파일 에러가 방해할 때
Comments