📝기본 타입과 타입 정의

타입스크립트에는 9가지의 타입이 존재한다.

string
number
boolean
null
undefined
array
tuple
object
any

자바스크립트와 달리, 타입스크립트는 변수에 타입을 정의할 수 있다. 타입을 정의하면 에러를 사전에 방지할 수 있다는 장점을 가진다.

let name = "홍길동"; // 자바스크립트
let name: string = "홍길동"; // 타입스크립트

타입을 정의하는 방법은 간단하다. 위의 코드처럼 변수 옆에 콜론(:)을 붙이고 해당 변수의 타입을 정의하면 된다. 이때 이 콜론(:)을 타입 표기(type annotation)라고 한다.

여러 기본 타입 중에서 array, tuple, any 타입을 정의하는 방법을 알아보자.

1. array
array는 Array<타입> 혹은 타입[ ] 2가지 방법으로 정의할 수 있다. (대부분 후자를 많이 쓴다.)
타입을 지정하면 배열 안에 해당 타입만 넣을 수 있다. 다른 타입을 넣을 경우 에러 메세지가 발생한다.

let companies: Array<string> = ["naver", "coupang"];
let companies: string[] = ["naver", "coupang"];

// Type 'number' is not assignable to type 'string'.에러 출력
let companies3: string[] = ["naver", 123];

여기서 의문점이 든다. 그렇다면 타입스크립트는 배열 생성 시, 하나의 타입만 넣을 수 있는 건가? 만약 string과 number 타입을 담은 배열을 만들려면 자바스크립트를 사용해야하는가?

정답은 아니다. 여러 타입이 담긴 배열을 정의하기 위해서는 tuple이라는 타입을 사용하면 된다.

2. tuple
튜플은 특정 형태를 갖는 배열로, 배열의 길이가 고정되고 각 요소 타입이 정의된 배열을 의미한다.

let companies2: [string, number] = ["naver", 123];

이 때 배열의 길이와 다르거나 지정한 타입과 다른 타입을 넣는다면 에러가 발생한다.

// Source has 3 element(s) but target allows only 2.
let companies2: [string, number] = ["naver", 123, 456];

// Type 'number' is not assignable to type 'string'.
// Type 'string' is not assignable to type 'number'.
let companies2: [string, number] = [123, "naver"];

3. any
any타입은 아무 데이터나 취급하겠다는 의미이다. 타입을 쓰지 않는 자바스크립트에서 넘어왔을 경우, any를 사용하면 편하다.

let anything: any = 123; // string, boolean, tuple 등.. 전부 가능하다.

Document

📝함수에 타입을 정의하는 방법

함수에 타입을 정의할 땐 파라미터(입력값)와 반환값(출력값) 2곳에 타입을 정의한다.
마찬가지로 콜론(:)을 붙이고 뒤에 타입을 정의하면 된다.

// a: number, b: number -> 파라미터(입력값) 타입 선언
// : number -> 반환값 타입 선언
function sum(a: number, b: number): number {
  return a + b;
}

여기서 함수를 호출할 때, 선언한 파라미터 개수와 인자의 개수가 다르다면 오류가 발생한다.

그렇다면 만약 인자의 개수를 파라미터 개수와 다르게 하고싶다면 어떻게 해야할까? -> 옵셔널 파라미터를 사용하면 된다.

옵셔널 파라미터(optional parameter)란 함수의 파라미터를 선택적으로 사용할 수 있게하는 것을 의미한다.
옵셔널 파라미터를 사용하는 방법은 간단하다. 선택적으로 사용할 파라미터에 ?만 붙이면 된다.

function sayName(firstName: string, lastName?: string): string {
  return "my name " + firstName + " " + lastName;
}
sayName("길동"); // 오류가 나지 않는다.