Typescript의 타입: 함수, 그 외

급변하는 기술 시장에서 살아남기 위해 Typescript 공부를 시작하였습니다...
과연 저는 살아남을 수 있을까요?!

👀 들어가기에 앞서...

지난시간까지 타입스크립트의 여러 타입에 대해 알아보았습니다.
이쯤에서 중요한 개념 몇가지만 정리해볼까요?

1. 타입스크립트는 반드시 컴파일해서 자바스크립트로 변환해 주어야 합니다.
2. 변수를 사용할 때 타입은 명시해 주어야 합니다.
3. 타입에는 자바스크립트도 갖고 있는 기본 타입 외에도 Tuple, enum, any, union, literal, alias 등이 있습니다.
4. 만약 타입을 제대로 작성하지 않았거나 타입을 잘못 사용했다면 '컴파일 오류'가 납니다.

이제 지난시간에 이어서 함수와 함께 추가적인 타입을 좀 더 알아보고자 합니다.
타입스크립트라는 이름에 걸맞게 정말 많은 타입들이 있군요...!

👀 함수의 반환 타입

함수의 반환(return) 타입

이제까지 알아본 바 타입스크립트는 계속 타입을 명시해준다는 것을 알았습니다.
그리고 함수를 정의할 때 매개변수의 타입을 명시해 주면
타입스크립트는 반환(return) 타입을 추론합니다.
이 반환 타입이 어떤 타입인지는 vs code에서 함수 이름에 마우스 커서를 올려보면 알 수 있습니다.

function multiple(n1:number, n2:number):number{
  return n1*n2;
}

예제를 보시면 매개변수를 감싼 괄호 뒤에 :와 타입이 명시된 게 보이시나요?
이것은 반환되는 값의 타입을 명시한 것입니다.
타입스크립트는 반환값의 타입을 추론할 수도 있지만,
위의 방법으로 반환값의 타입을 명시할 수 있습니다.

void 타입

반면 void라는 타입이 있는데요,

function printHello(name:string):void {
  console.log(name+'님, 안녕하세요!');
}

아래처럼 아무것도 반환하지 않는 함수일 경우 void라고 명시해 줍니다.

물론 함수는 아무것도 반환하지 않으면 기본적으로 undefined를 리턴합니다만,
타입스크립트는 undefined를 반환하는 함수의 경우 void라고 명시해줘야 합니다.

자바스크립트 엔진은 변수를 의도적으로 초기화할 때, 함수의 반환값이 없을 때에 undefined를 할당하거나 반환합니다.
때문에 타입스크립트를 떠나, 자바스크립트에서 의도적으로 undefined를 사용하는 것은 자제하는 것이 좋다고 합니다...!

never 타입

함수가 값을 반환하지 않을 경우, 이를 명시하기 위해 사용합니다.
void와 비슷해 보일 수 있지만
다음과 같이 예외를 발생시키는 함수의 경우 주로 반환값으로 never를 명시합니다.

function error(message: string): never {
  throw new Error(message);
}

이 타입은 일반 변수에도 사용할 수 있습니다.

👀 함수의 타입

물론 함수 자체도 타입으로 사용할 수 있습니다.
다만 함수는 매개변수, 반환값도 타입이 있기 때문에 아래처럼 쓸 수 있습니다.

const myFunc1:Function;
const myFunc2: (a:number, b:number)=>number;
//a,b의 이름은 실제 함수의 매개변수명과 같지 않습니다.

함수가 아무것도 반환하지 않는다면 반환 타입을 명시한 것처럼 void를 사용하면 됩니다.
그리고 매개변수에도 myFunc2처럼 사용하여 콜백함수의 타입을 명시할 수 있습니다.
단, 콜백함수의 반환값을 void로 명시해도, 콜백함수의 return문을 작성했을 때 컴파일 에러가 나지는 않습니다.

👀 그 밖의 타입

unknown 타입

unknown은 any와 비슷하게 어떤타입인지 확실하지 않을 때 사용합니다.
다만 다음과 같은 차이로 좀 더 제한적입니다.

let a:unknown;
let myString:string;

a=2;
myString=a;

위와 같이 사용하면 에러가 발생하기 때문에 a를 myString에 할당하려면
if문을 사용하는 등 검사를 해주어야 합니다.
하지만 a의 타입을 any로 명시하면 에러가 나지 않습니다.

😝 마무리

오늘은 Typescript의 기본 타입 외에
타입스크립트에서 함수의 반환 타입과 void, never, unknown 등의 타입에 대해 추가로 알아보았습니다.
여기까지 타입스크립트의 여러 타입들에 대한 여정을 마치도록 하겠습니다.
뭔가 해낸 기분이군요!👏
다음 시간에도 잘 살아남아 보겠습니다!

• 참고:
  • Typescript 공식문서: https://www.typescriptlang.org/docs/handbook/basic-types.html
  • 【한글자막】 Typescript :기초부터 실전형 프로젝트까지 with React + NodeJS
    https://www.udemy.com/course/best-typescript-21/