기초 문법 #2 배열, 튜플

여기를 참고했다.

3.2 배열과 튜플

순서가 있는 원소의 모음(collection)을 나타내는 가장 간단하면서도 유용한 자료구조인 배열, 그리고 그 사촌 튜플을 나타내는 타입에 대해 다룬다.

배열

배열 타입은 자바스크립트 Array 값의 타입을 나타내는데 쓰인다. 원소 타입 뒤에 대괄호([])를 붙여 표현한다.

const pibonacci: number[] = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55];
const myFavoriteBeers: String[] = [
  "Imperial Stout",
  "India Pale Ale",
  "Weizenbock",
];

배열 타입을 표현하는 또다른 방식이 있다.

const pibonacci: Array<number> = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55];
const myFavoriteBeers: Array<string> = [
  "Imperial Stout",
  "India Pale Ale",
  "Weizenbock",
];

이 문법의 의미는 3.6절에서 제너릭을 소개하며 좀 더 자세히 알아본다.

튜플

튜플 타입을 이용해 원소의 수와 각 원소의 타입이 정확히 지정된 배열의 타입을 정의할 수 있다.

const nameAndHeight: [string, number] = ["박상민", 177];

튜플 타입 변수는 정확히 명시된 개수 만큼의 원소만을 가질 수 있다. 만약 타입 정의보다 더 많은, 혹은 더 적은 원소를 갖는 배열을 할당한다면 에러를 낸다.

const invalidNameAndHeight: [string, number] = ["박상민", 177, 42];
// error TS2322: Type '[string, number, boolean]' is not assignable to type '[string, number]'.
// Types of property 'length' are incompatible.
// Type '3' is not assignable to type '2'.

다만 튜플 타입의 값을 Array 프로토타입의 메소드를 통해 조작하는 것은 금지되지 않는다는 점에 유의해야 한다. 예를 들어 아래와 같은 코드는 에러를 내지 않는다.

const validNameAndHeight: [string, number] = ["박상민", 177];
validNameAndHeight.push(42); // no error

타입스크립트 2.6 이하 버전에서는 튜플 타입은 정확한 원소 개수를 보장하지 않는다. 예를 들어 다음과 같은 코드가 허용되었다.

const nameAndHeight: [string, number] = ["박상민", 177, true];

이러한 동작 방식은 대부분의 실사용례에서 도움이 되지 않는다고 판단되어 2.7 버전부터는 현재와 같이 동작하도록 바뀌었다.

3.3 객체

자바스크립트에서 가장 일반적이고 널리 사용되는 자료 구조인 객체의 타입에 대해 다룬다.

객체 타입

자바스크립트의 오브젝트 리터럴을 정의하듯 중괄호({})를 이용해 객체 타입(object type)을 표현할 수 있다.

const user: { name: string; height: number } = { name: "박상민", height: 177 };

이 때 객체 타입 정의는 오브젝트 리터럴과 다음과 같은 차이점을 갖는다.

• 콜론(:)의 우변에는 값 대신 해당 속성의 타입이 들어간다.
• 구분자로 콤마(,)뿐만 아니라 세미콜론(;)을 사용할 수 있다.

선택 속성

함수의 선택 매개변수와 비슷하게 속성명 뒤에 물음표(?)를 붙여 해당 속성이 존재하지 않을 수도 있음을 표현할 수 있다.

const userWithUnknownHeight: { name: string; height?: number } = {
  name: "박상민",
};

읽기 전용 속성

속성명 앞에 readonly 키워드를 붙여 해당 속성의 재할당을 막을 수 있다. readonly 키워드가 붙은 속성은 const 키워드를 이용한 변수의 정의와 비슷하게 동작한다.

const user: {
  readonly name: string;
  height: number;
} = { name: "박상민", height: 177 };
user.name = "상민박"; // error TS2540: Cannot assign to 'name' because it is a constant or a read-only property.

3.4 타입 별칭

타입 별칭(type alias)을 이용해 이미 존재하는 타입에 다른 이름을 붙여 복잡한 타입을 간단하게 쓸 수 있다. 또한, 프로그래머의 의도를 보다 명확하게 나타낼 수 있다.

타입 별칭 정의

타입 별칭은 다음과 같이 정의한다.

type newType = Type;

별칭을 갖게 될 타입(위에서는 Type)의 자리엔 기본 타입을 포함한 모든 타입이 올 수 있다.

type UUID = string;
type Height = number;
type AnotherUUID = UUID;
type Animals = Animal[];
type User = {
  name: string;
  height: number;
};

이 때 별칭은 단순히 새로운 이름을 붙일 뿐이고, 실제로 새로운 타입이 생성되는 것은 아니라는 점에 유의하라. 예를 들어, 아래와 같은 코드의 에러 메시지에는 UUID 대신 string이 사용된다.

type UUID = string;
function getUser(uuid: UUID) {
  // uuid: string;이 되어야 함.
  /* 함수 본문 */
}
getUser(7); // error TS2345: Argument of type '7' is not assignable to parameter of type 'string'.