[TypeScript 독학] #2 함수

안광의·2022년 2월 11일

TypeScript 독학

목록 보기

2/12

시작하며

기본 타입과 예제 코드들을 살펴보며 느낀점은 생각보다 독학이 어렵지 않을 것 같다는 것이다. 새로운 프로그래밍 언어를 배운는 것이기 때문에 쉽지 않겠다고 생각했으나 타입스크립트를 보고 느낀 첫인상은 자바스크립트+(플러스) 같은 느낌이 들었다. 자바스크립트와 동일한 문법과 동일한 변수 선언 키워드에 약간의 추가적인 기능만 포함된 느낌이여서 마치 CSS와 CSS 전처리기의 관계와 비슷한 느낌을 받았다.
이번 파트에서는 타입스크립의 함수에 대해서 공부할 예정인데, 기존의 프로젝트를 타입스크립트로 바꾸는 연습을 하기 위해서 제일 중요한 부분이라고 생각하기 때문에 최대한 자세하게 정리해보려고 한다.

함수의 기본적인 타입 선언

function sum(a: number, b: number): number {
  return a + b;
}

이전 포스팅의 타입스크립의 장점 부분에서 예시로 사용한 함수인데 위 코드처럼 각 파라미터의 뒤와 괄호가 닫힌 뒤에 :을 사용하여 파라미터, 리턴 값의 타입을 정의할 수 있다.

function sum(a: number, b: number): number {
  return a + b;
}
sum(1) //error, Expected 2 arguments, but got 1.
sum(1, 2, 3); //error, too many parameters

타입스크립트는 파라미터의 타입이 다를 때뿐만 아니라, 지정된 개수의 파라미터를 전달하지 않았을 때도 에러가 발생하기 때문에 정상적으로 리턴되는 자바스크립트에 비해서 에러 핸들링에 유리하다.

function sum(a: number, b?: number): number {
  if(b !== undefined) {
    return a + b
    } else {
      return a
    }
}
sum(10, 20); // 30
sum(10); // 10

타입스크립트에서는 지정된 타입의 지정된 인자를 전달받아야 정상적으로 함수가 실행되지만,
선택적으로 인자를 설정하고 싶은 경우가 있을 수 있다. 파라미터가 전달되지 않아도 함수가 정상적으로 실행되게 하고 싶을 경우 파리터뒤에 ?를 작성해주면 된다.

주의할점

function sum(a?: number, b: number): number {
  return a + b;
} //error, A required parameter cannot follow an optional parameter.

단, 필수 파라미터는 선택적 파라미터보다 먼저 작성되어야 한다. 선택적인 파라미터 없이 필수 파라미터를 두번째 인자로 전달한다는 것이 문법적으로 성립이 되지 않는다.

function sum(a: number | undefined, b: number): number {
  if(a !== undefined) {
    return a + b
    } else {
      return b
    }
}
sum (undefined, 10)  //10

굳이 선택적 파라미터를 먼저 작성하고 싶은 경우에는 |(유니온 타입)과 undefined를 사용하는 방법이 있다.

function sayHi(): void {
  console.log('Hi')
}

리턴 값이 없는 경우에는 void 타입을 정의해서 예상치 못하게 return 하는 경우를 방지할 수 있다.

매개변수 기본값 지정

function sum(a=1, b: number): number {
  return a + b;
}
sum(undefined,3)  //4

자바스크립트와 마찬가지로 파라미터에 기본값을 지정해 줄 수 있는데, 동일한 방법으로 작성하면 타입스크립트가 자동으로 a를 number 타입으로 인식한다.

REST 문법이 적용된 매개변수

function sum(...nums: number[]): number {
  let totalOfNums = 0;
  for (let key in nums) {
    totalOfNums += nums[key];
  }
  return totalOfNums;
}
sum(1)  //1
sum(1,2,3)  //6
sum(1,2,3,5,6)  //17

javaSciprt의 REST 파라미터를 사용하면 인자를 배열 형태로 받아오기 때문에 인자를 배열로 정의해주어야 한다.

this

interface User {
  name: string
}
const Sam: User = { name:'Sam' }
function showName() {
  console.log(this.name)
}
const a = showName.bind(Sam);
a(); //errors, 'this' implicitly has type 'any' because it does not have a type annotation.

showName이란 함수에 Sam 객체를 바인드해서 this.name을 콘솔에 출력하는 a 함수가 있다. (interface에 대한 내용은 다음 포스팅에 자세하게 다룰 예정이다.) 타입스크립트에서는 this에 타입 지정이 되지 않아서 에러가 발생하게 된다.

interface User {
  name: string
}
const Sam: User = { name:'Sam' }
function showName(this:User) {
  console.log(this.name)
}
const a = showName.bind(Sam);
a(); //'Sam'

showName의 인자 부분에 this의 타입을 interface로 정의한 User로 지정해주면 에러가 사라지게된다.

interface User {
  name: string
}
const Sam: User = { name:'Sam' }
function showName(this:User, age:number) {
  console.log(this.name, age)
}
const a = showName.bind(Sam);
a(27);  //'Sam', 27