Javascript vs. Typescript
Javascript로 function을 쓰는 방법이 3가지 있지만 (Function Declaration, Function Expression, Arrow Function), 우선 Arrow Function으로 비교를 해보자.
Javascript :
const subtract (a, b) => {
return a - b;
}위와 똑같은 코드를 Typescript으로 (with full annotations) 작성하자면 :
const subtract
:(a: number, b: number) => number
= (a: number, b: number): number => {
return a - b;
}엄청 복잡하다. 새로운 코드가 두 줄은 더 생긴 듯 보인다.
새로 생겨난 두 줄의 코드를 여러 부분으로 나누어서 생각해보자.
난 3조각으로 나누어서 생각해보겠다.
결론
결론부터 얘기하자면 위의
1번은 보통 생략한다.
2번은 반드시 적어야된다.
3번은 생략해도 되지만 적어줘야 좋은 코드가 된다.
즉, 1번은 생략 2, 3번은 적어준다. 그 이유를 좀 더 자세히 알아보자.
이를 위해서는 우선 Type Inference와 Type Annotation을 우선 알아야한다.
Inference vs. Annotation
Type Inference : Typescript가 type을 추측하는 것.
Type Annotation : 개발자가 Typescript에게 type을 일일이 적어서 알려주는 것.
즉, Typescript가 추측하는 데 문제가 전혀 없다면 안 적어도 된다.
1. 변수 type에 대한 annotation
const a = 5;위 코드는 두 부분으로 나눌 수가 있다.
변수 "선언" 부분과 "초기화" 부분이다. (초기화는 처음으로 값을 assign 해주는 것을 말한다.)
이 선언 같은 줄에 있으면 Typescript가 추측을 할 수 있다 → 즉, 생략해도 무난하다.
그러나 두 줄로 나눠서 쓸 때는 꼭 type을 적어야 한다.
const a: number;
a = 5;결국
여기에서 녹색 바탕 1번에 해당하는 것은
우리가 subtract라는 variable에 함수를 넣는 것인데, 이 variable이 어떤 type인지 설명하는 부분이다.
이 설명은 같은 줄 (세미콜론 없으니깐 줄 바뀌어도 같은 줄로 간주)에 적어주었으니깐 TS inference가 동작을 하고
그러므로 생략해도 된다.
2. function property (argument)에 대한 type inference
const subtract
:(a: number, b: number) => number
= (a: number, b: number): number => {
return a - b;
}위 코드 3번째 line부터는 이제 실제 함수의 시작이다.
그러나 인자들에 대해서는 Type Inference가 동작을 아예 하지 않는다. 그러므로 이건 필수적으로 입력해줘야한다.
3. return 값에 대한 type inference
위 코드의 3번 : number 부분은 return값의 type인데
이것은 TS의 inference가 동작한다. 그러므로 입력하지 않아도 에러가 안 난다.
그러나, 입력하는 습관을 들이는 것이 좋다. 그 이유는...
const subtract = (a: number, b: number) => {
a - b;
}위에 처럼 내가 원래는 값을 return을 할려고 했는데, 실수로 return을 안 적어주면
TS가 이 함수는 void 함수구나라는 inference가 동작하여 에러가 안 나는 것이다.
그래서 이 부분은 inference가 동작을 해도 반드시 입력하는 습관을 기르는 것이 좋다.
최종 결론
Javascript :
const subtract = (a, b) => {
return a - b;
}Typescript :
const subtract = (a: number, b: number): number => {
return a - b;
}이렇게 입력해주면 된다는 설명을 길게 돌려서 설명하였다.
다른 함수들
다른 함수 선언 방식들도 위와 똑같이 해주면 된다.
Function Declaration (혹은 named function)
function divide(a: number, b: number): number {
return a / b;
}Function Expression (혹은 anonymous function assigned to a variable)
const multiply = function (a: number, b: number): number {
return a * b;
}
