// EX : CSV 파일처럼 헤더 행에 열 이름이 있고, 데이터 행을 열 이름과 값으로 매핑하는 객체로 나타내고 싶은 경우
function parseCSV(input: string): { [columnName: string]: string }[] {
const lines = input.split("\n");
const [header, ...rows] = lines;
const headerColumns = header.split(",");
return rows.map((rowStr) => {
const row: { [columnName: string]: string } = {};
rowStr.split(",").forEach((cell, i) => {
row[headerColumns[i]] = cell;
});
return row;
});
}
// 열 이름이 무엇인지 미리 알 방법이 없으므로 인덱스 시그니처 사용
// 1. Record 사용
type Vec3D = Record<"x" | "y" | "z", number>;
// 2. 매핑된 타입 사용
type Vec3D = { [k in "x" | "y" | "z"]: number };
type Vec3D = { [k in "x" | "y" | "z"]: k extends "b" ? string : number }; // a: number; b: string; c:number;
아이템 16. number 인덱스 시그니처보다는 Array, 튜플, ArrayLike를 사용하기
타입스크립트는 자바스크립트의 배열 키가 문자열로 처리되는 혼란을 바로잡기 위해 숫자 키를 허용하고, 문자열 키와 다른 것으로 인식한다. 이는 실제로는 동작하지 않고 런타임에 타입 정보가 제거된다.
// Array에 대한 타입 선언
interface Array<T> {
// ...
[n: number]: T;
}
어떤 길이를 가지는 배열과 비슷한 형태의 튜플을 사용하고 싶다면 타입스크립트에 있는 ArrayLike 타입을 사용한다.
아이템 17. 변경 관련된 오류 방지를 위해 readonly 사용하기
readonly number[]는 타입이다. 배열의 요소를 읽을 수 있지만, 쓸 수는 없으며 length를 변경할 수 없다. 또한 pop을 비롯한 배열을 변경하는 다른 메서드를 호출할 수 없다.
매개변수를 readonly로 설정하면?
타입스크립트는 매개변수가 함수 내에서 변경이 일어나는지 체크한다.
호출하는 쪽에서는 함수가 매개변수를 변경하지 않는다는 보장을 받는다.
호출하는 쪽에서 함수에 readonly 배열을 매개변수로 넣을 수도 있다.
👀 readonly는 얕게 동작한다! 깊게 동작하려면 ts-essentials의 DeepReadonly 제너릭을 사용해야 한다.
아이템 13. 타입과 인터페이스의 차이점 알기
I
T
접두사를 붙이는 네이밍 방식은 지양해야 한다. (C#에서 유래)인터페이스 선언
과타입 선언
의 비슷한 점인터페이스 선언
과타입 선언
의 다른 점type
키워드는 쓰임새가 더 많다.아이템 14. 타입 연산과 제너릭 사용으로 반복 줄이기
Pick
이라고도 한다.extends
를 사용하는 것이다.아이템 15. 동적 데이터에 인덱스 시그니처 사용하기
아이템 16. number 인덱스 시그니처보다는 Array, 튜플, ArrayLike를 사용하기
ArrayLike
타입을 사용한다.아이템 17. 변경 관련된 오류 방지를 위해 readonly 사용하기
readonly number[]
는 타입이다. 배열의 요소를 읽을 수 있지만, 쓸 수는 없으며 length를 변경할 수 없다. 또한 pop을 비롯한 배열을 변경하는 다른 메서드를 호출할 수 없다.매개변수를
readonly
로 설정하면?아이템 18. 매핑된 타입을 사용하여 값을 동기화하기