Frontend/Typescript

[TS] 함수 타입 설정

rachel_13 2022. 9. 5. 00:09

1. 함수의 타입 설정

파라미터도 일종의 변수, 타입 설정이 가능하다

return 되는 값 의 타입 지정도 가능하다,

function multipleTwice(x:number) :number {
    return x*2;
}

2. 함수의 특징 - void 타입 

return이 없을 경우 void 타입 선언 가능

return 문이 없어야 하는데 return될 때, 이를 방지해준다.

function multipleTwice(x:number) :void {

}

3. 파라미터 옵션

파라미터를 지정해두고 함수 호출시 파라미터를 사용하지 않을 경우에는, 타입스크립트의 경우 에러를 뱉는다.

(자바스크립트에서는 상관없다.)

function multipleTwice(x?:number) :void {

}
multipleTwice() //에러 안남

❗️변수? 타입 의 의미는 변수: 타입 | undefined ~ union type 와 같다.

따라서 다음과 같은 경우, 타입스크립트에서 에러로 인식한다.

function multipleTwice(x?:number) :number {
	reutrn x * 2;
}

왜냐하면, 파라미터인 x의 타입이 확실치 않기 때문이다. x 가 number 또는 undefined일 수 있기 때문에 엄격한 검사에 의해  위 함수는 에러로 인식한다.

4. Narrowing

타입에 대한 조건을 걸어줘서 엄격하게 검사한다.

👉 타입이 하나로 확정되지 않은 경우, Type Narrowing을 사용한다.

function multipleTwice(x?:number) :number {
	if(typeof x === 'number'){
    	return x * 2;
    } else {
    	return x + '1';	
    }
}