22.04.09 타입스크립트와 함수

📍  책을 읽게 된 계기

 

4주 프로젝트를 타입스크립트로 진행했다.

타입스크입트를 도입한 이유는, 프로그램이 복잡해질 것을 우려해서다.

앱의 상당 부분에서 문자열, 숫자, 배열 등 다양한 자료형이 값으로 존재하는 객체를 data로 다뤘기때문이다.

객체 내의 값을 조작하면서 발생하는 다양한 오류들을 타입스크립트가 잡아줄거라 생각했다.

 

자바스크립트는 프로그램을 실행해야만 오류를 발견하지만

타입스크립트는 컴파일 단계에서 오류를 발견할 수 있기 때문에 프로그래밍에 더 효과적일거라 판단했다.

 

시작은 좋았으나 ! 언어를 충분히 숙지할 시간 없이 프로젝트를 진행했더니 하는 내내 찜찜했다.

내가 아는 아주 기본적인 타입 범위 안에서만 맴돌고 있다는 생각이 들었다.

타입스크립트의 장점을 백분 활용하지 못한 느낌이 들었고, 정적 타입 언어를 공부할 필요성도 깨달았다.

좀 더 근본적인 개념을 다지고 싶어서 책을 찾게 되었다.

(그 외 대기중인 책들 : 생각하는 프로그래밍, introduction to Algorithm)

 

---

목차

✔ 타입스크립트에서 함수를 선언하고 실행하는 다양한 방법
✔ 시그니처 오버로딩
✔ 다형적 함수
✔ 다형적 타입 별칭

 

 

📍 타입스크립트에서 함수를 선언하고 실행하는 다양한 방법

 

타입스크립트는 특별한 상황을 제외하면 함수의 매개변수 타입은 추론하지 않는다.
그에 비해 반환 타입은 추론한다 ❗
→ 함수의 매개변수는 개발자가 명시해주는 것이 좋지만, 반환 타입은 명시하지 않는 것이 좋다.

+타입스크립트는 함수 생성자를 제외한 모든 문법을 안전하게 지원한다.

 

// 유명 함수
function func1(name: string){
  return 'hello ' + name;
}

// 함수 표현식
let func2 = function(name: string){
  return 'hello ' + name;
}

// 화살표 함수 표현식
let func3 = (name: string) => {
  return 'hello ' + name;
}

// 단축형 화살표 함수 표현식
let func4 = (name: string) => 
  'hello ' + name;
  
// 함수 생성자 (사용 자제)
let func5 = new Function('name', 'return "hello " + name');

 

 

 🔗 타입스크립트에서 함수 생성자로 함수를 선언하면 안되는 이유 ? 

 

함수 생성자로 선언한 함수의 타입은 Function 이다.

Function 타입은 Function.prototype의 메서드를 모두 가진 (중요한) 객체다.

그런데 매개변수 타입과 반환 타입을 지정하지 않았기 때문에 어떤 인수를 전달해도 호출할 수 있게 된다.

이 과정에서 문제가 생겨도 타입스크립트가 도와줄 수 있는 게 없다. 그래서 함수 생성자로 선언하지 않는거다.

 

 

 • 선택적 매개변수 & 기본 매개변수 

 

// 선택적 매개변수
function log(message: string, userId?: string){
  let time = new Date().toLocalTimeString();
  console.log(time, message, userId || 'Not signed in');
}

 

// 기본 매개변수
function log(message: string, userId = 'Not signed in'){
  let time = new Date().toISOString();
  console.log(time, message, userId);
}

 

실무에서는 선택적 매개변수보다 기본 매개변수를 더 자주 사용한다.

 

 

 • 나머지 매개변수 

 

// 안전하지 않은 arguments 타입
function sumVariadic(): number {
  return Array
    .from(arguments)
    .reduce((total, n) => total + n, 0);
}

sumVariadic(1, 2, 3);  // 6으로 평가

 

// 안전한 타입의 가변 인수 → rest parameters
function simVariadicSafe(...numbers: number[]): number {
  return numbers.reduce((total, n) => total + n, 0);
}

simVariadicSafe(1, 2, 3);  // 6으로 평가

 

rest parameter 를 사용해 더 안전한 타입 체크 😚