[TypeScript] 기본 타입 - (2) :: 함수, 익명 함수, 객체 타입

1. 함수

타입스크립트에서 함수는 입출력 타입을 지정할 수 있다.

 

1️⃣ 매개변수 타입 표기

함수 선언 시 각 매개변수 뒤에 타입을 표기할 수 있다.

const getSum (num1: number, num2: number) => console.log(num1 + num2);

getSum(1, 2); // 3

 

만약 다음과 같은 상황이 발생하면 런타임 에러가 발생하게 된다.

📍 다른 타입을 표기한 경우

const getSum (num1: number, num2: number) => console.log(num1 + num2);

getSum('1', '2'); // 런타임 애러

 

📍 인자의 개수가 다른 경우

const getSum (num1: number, num2: number) => console.log(num1 + num2);

getSum('1'); // 런타임 애러

 

2️⃣ 반환 타입 표기

함수 선언 시 매개변수 목록 뒤에 반환 타입을 표기할 수 있다.

const getNum (): number => {
  return 25;
}

📍 반환 타입을 표기할 순 있지만 표기하지 않아도 된다.

타입스크립트는 리턴값의 타입을 추리하기 때문에 위 예시에서의 타입 표기는 큰 의미를 가지지 않는다.

---

2. 익명 함수

익명 함수는 어떻게 호출될지 알아낼 수 있다면 매개 변수에 자동으로 타입을 부여한다.

const strs = ['apple', 'banana', 'circle'];

strs.forEach(str => {
    console.log(str.Split(''));
});

 

위 예시는 배열 strs를 forEach 반복문을 통해 문자열을 분할(split)하는 예시이다.

하지만 split() 메서드를 Split으로 잘못 작성해 아래와 같은 에러가 발생했다.

 

위 예시에서 'Split' 속성이 'string' 형식에 없습니다. 라는 문장을 주목해야 한다.

매개 변수 str에 타입을 표기하지 않았음에도 타입스크립트는 매개 변수 str를 string 형식으로 인식했다.

이런 현상을 '문맥적 타입 부여'라고 불리는데, 함수가 실행되는 문맥을 통하여 타입을 추론하기 때문이다.

 

Split() 이라고 잘못 썼던 예시는 아래 예시처럼 작성하면 에러가 나지 않고 정상적으로 출력된다.

const strs = ['apple', 'banana', 'circle'];

strs.forEach(str => {
    console.log(str.split(''));
});

// 출력 결과
// ['a', 'p', 'p', 'l', 'e']
// ['b', 'a', 'n', 'a', 'n', 'a']
// ['c', 'i', 'r', 'c', 'l', 'e']

---

3. 객체 타입

객체 타입을 정의하려면 해당 객체의 프로퍼티들과 프로퍼티의 타입들을 나열하면 된다.

const getSum = (obj: { a: number, b: number }) => {
  console.log(obj.a + obj.b);
}

getSum({ a: 1, b: 2 }); // 3

각 프로퍼티를 구분할 때 콤마(,) 또는 세미콜론(;)을 사용하며 마지막에 위치한 구분자한테는 적용하지 않아도 된다.

📍 타입을 지정하지 않으면 any 타입으로 간주한다.

 

1️⃣ 옵셔널 프로퍼티

객체에 있는 프로퍼티를 옵셔널 프로퍼티를 통해 선택적으로 타입을 지정할 수 있다.

옵셔널 프로퍼티는 프로퍼티명 뒤에 물음표(?)를 붙이면 된다.

const consoleToNum = (obj: { num1: number; num2?: number }) => {
  // ...
}

// 아래 예시 모두 사용 가능
consoleToNum({ num1: 1 });
consoleToNum({ num1: 1, num2: 2 });