타입 - 배열, 튜플, 객체 리터럴

1. 배열

// 배열
let numArr: number[] = [1, 2, 3];

let strArr: string[] = ["hello", "im", "su"];

// 제네릭 문법 사용
let boolArr: Array<boolean> = [true, false, true];

// 배열에 들어가는 요소가 다양할 경우
let multiArr: (string | number)[] = [1, "hello"];

// 다차원 배열의 타입을 정의하는 경우
let doubleArr: number[][] = [
  [1, 2, 3],
  [4, 5],
];

일반적으로 배열을 만들때 사용할 타입[]으로 지정할 수 있다.
제네릭 문법을 사용할 경우 Array<타입>으로 지정하면 된다.

만약 배열에 들어가는 요소가 한가지 타입이 아니라면
(타입1 | 타입2)[]으로 배열을 지정할 수 있다.

다차원 배열의 경우 타입[][]으로 지정하면 된다.

2. 튜플

튜플은 js에는 없지만 ts에서 존재하는 타입이다.
길이와 타입이 고정된 배열이라고 생각하면 된다.

// 튜플
let tup1: [number, number] = [1, 2];

let tup2: [number, string, boolean] = [1, "2", true];

const users: [string, number][] = [
  ["박씨", 1],
  ["이씨", 2],
  ["김씨", 3],
  [4, "최씨"], // 에러가 생긴다.
];

튜플을 컴파일해보면 일반 배열과 똑같이 생겼다.
그래서 ts 파일에서 배열 메서드를 사용해도 아무런 에러를 띄우지 않고 사용가능하므로 주의해서 사용해야 한다.

튜플의 경우, 인덱스에 따라 들어가야할 값이 정해져 있을때 사용하면 유용할 것 같다. 위 예시처럼 string, number로 값이 들어와야할 배열에 number, string으로 들어오면 에러를 던지기 때문에 형식을 맞춰서 배열을 작성할 수 있게된다.

3. 객체 타입

let user: object = {
	id: 1,
	name: "su",
};

user.id //'object' 형식에 'id' 속성이 없습니다. 에러!

객체의 경우 object로 타입을 명시해주면 될것 같지만
그렇게 하면 점 접근법으로 객체의 속성을 접근할 수 없게된다.
따라서 객체의 경우 객체 리터럴 타입을 명시해주면 된다.

1. 객체 리터럴 타입

let user: { id: number; name: string } = {
  id: 1,
  name: "su",
};

let dog: { name: string; color: string } = {
  name: "별이",
  color: "흰색",
};

위와 같이 객체 리터럴 타입으로 작성해주면 된다.
구조를 기준으로 타입을 명시하기 때문에 구조적 타입 시스템 (property based type system)이라고 한다.

2. optional property

let user: { id?: number; name: string } = {
  id: 1,
  name: "su",
};
user = {
  // id 값이 없어도 되고 있으면 반드시 number 타입
  name: "홍길동",
};

객체에서 당장 값이 없지만 추후에 사용하게 될 수도 있을만한 값들은 선택적 프로퍼티로 명시해주면 된다. ?: 를 사용해서 명시 가능하다.

3. readonly property

// 읽기전용 프로퍼티
let config: { readonly apikey: string } = {
  apikey: "api key",
};

만약 api key 값처럼 읽기 전용으로만 남겨둬야하는 값이 있다면 읽기전용 프로퍼티로서 readnoly 키워드를 붙여주면 된다.