[TS] 변수와 함수 타입 정의

타입스크립트 입문 - 기초부터 실전까지 강의을 듣고 정리한 내용입니다.

 

 

✅ TS 변수

타입 스크립트의 기본 타입은 12가지로 나눌 수 있으며

Boolean, Number, String, Object, Array, Tuple 등이 있다.

 

String

먼저 JavaScript에서의 문자열 정의는 아래와 같다.

 

let str = "hello";

 

똑같은 변수 str을 TS로 바꾸면 다음과 같다.

 

let str: string = "hello";

 

: 를 이용해 변수 str의 타입이 string임을 선언하고 "hello"라는 문자열을 str의 값으로 주었다.

 

 

Number

위와 동일하게 타입이 숫자인 변수의 선언은 다음과 같다.

 

let num: number = 1;

 

 

Boolean

타입이 진위값인 변수의 선언은 다음과 같다.

 

let isVisible: boolean = true;

 

Array

타입이 배열인 경우는 다음과 같다.

 

let arr: Array<number> = [1, 2, 3];
let items: number[] = [1, 2, 3];

let heroes: Array<string> = ["Thor", "Iron Man"];
let fruits: string[] = ["Apple", "Banana", "Peach"];

 

타입이 배열인 경우 타입을 선언하는 방법은 두 가지가 있다.

Array<type> 혹은 type[] 을 사용하면 된다.

두 가지 방법 모두 동일한 결과를 얻을 수 있으므로 편한 방법으로 사용하면 된다.

 

++ VS Code에서 Auto Close Tag를 사용 중이면 type[]이 편하다.

Array<type>을 적으면 이것도 태그로 인식해 자동으로 닫는 태그가 나온다.

 

 

Tuple

배열의 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열의 형식을 선언할 때 사용한다.

 

let address: [string, number] = ["pangyo", 1];

 

위처럼 사용할 수 있는데 0번 인덱스에는 string이, 1번 인덱스에는 number가 꼭 와야 한다.

 

 

Object

먼저 JavaScript에서 객체를 선언하는 방법은 다음과 같다.

 

let obj = {};

 

TypeScript에서 객체를 선언하는 방법은 다음과 같다.

 

let obj: object = {};

let animal: object = {
  name: "bbobbi",
  age: 2,
};

let animal2: { name: string; age: number } = {
  name: "nabi",
  age: 1,
};

 

obj를 선언할 때에는 이 변수의 타입이 객체임을 알려주었다.

animal을 선언할 때에는 이 변수의 타입이 객체임을 알려주었고 name과 age에 따른 값을 넣었다.

animal이라는 타입이 객체인 변수가 name과 age라는 값을 가지고 있고 각각 name은 string, age는 number라는 타입임을 명시하고 싶을 때에는 animal2처럼 선언하면 된다.

 

 

 

✅ TS 함수

TypeScript에서 함수의 타입을 정의하는 것은 크게 세 가지로 나눌 수 있다.

 

• 함수의 파라미터 타입
• 함수의 반환 타입
• 함수의 구조 타입

 

먼저 JavaScript에서 sum이라는 함수를 정의하자면 다음과 같다.

 

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

 

그리고 이를 TypeScript의 함수 선언 방법으로 바꾸어 보고자 한다.

 

함수 파라미터의 타입 정의

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

 

함수 파라미터의 타입을 정의하는 방법이다.

sum이라는 함수에 파라미터로 a와 b가 넘어오는데 이 둘이 number 타입임을 명시한다.

 

 

함수 반환값의 타입 정의

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

 

함수 반환값의 타입을 정의하는 방법이다.

sum이라는 함수의 반환값인 a + b가 number 타입임을 명시한다.

 

 

함수의 타입 정의

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

 

위의 두 가지를 혼합한 방법이다.

sum의 파라미터로 넘어오는 a와 b가 number 타입임을 알리고 sum의 반환값인 a + b도 number 타입임을 명시한다.

 

 

함수의 인자 & 옵셔널 파라미터

sum(10, 20, 30, 40);

 

TS는 함수의 인자를 모두 필수값으로 간주한다.

sum 함수의 인자는 a와 b 두 개이므로 JS에서는 위의 경우 10과 20만을 sum에 넘기고 30과 40은 무시한다.

하지만 TS에서는 에러가 발생한다. 정해진 두 개의 인자보다 많은 수의 인자가 들어왔기 때문이다.

반대로 인자의 수가 적은 경우에도 에러가 발생한다.

 

이런 경우 옵셔널 파라미터를 사용하면 에러의 발생을 줄일 수 있다.

 

옵셔널 파라미터는 필요에 따라 인자를 넘길 수도 있고 안 넘길 수도 있다.

 

function log(a: string, b?: string) {
    // ...
}
log("hello world");
log("hello world", "Hi");

 

log라는 함수에 인자를 하나 넘기고 싶을 때도 있고 두 개 넘기고 싶을 때도 있다.

이럴 때에는 ? 를 이용해 b를 옵셔널 파라미터로 지정하면 된다.

 

위의 경우에는 log("hello world")와 log("hello world", "Hi") 모두 에러가 나지 않는다.