9장 타입 조작

9.1 인덱스 시그니처 (Index Signature)

9.1.1 인덱스 시그니처란?

interface StringArray {
  [index: number]: string;
}

9.1.2 인덱스 시그니처의 허용 타입

1) string 인덱스 시그니처

interface StringDictionary {
  [key: string]: string;
}

let refDictionary: StringDictionary = {};

refDictionary["first"] = "Hello";
refDictionary["second"] = "World";

console.log(refDictionary["first"]);  // Hello
console.log(refDictionary["second"]); // World

2) number 인덱스 시그니처

interface NumberDictionary {
  [index: number]: string;
}

let refDictionary: NumberDictionary = {};

refDictionary[0] = "zero";
refDictionary[1] = "one";
refDictionary[2] = "two";

console.log(refDictionary[0]); // zero
console.log(refDictionary[1]); // one
console.log(refDictionary[2]); // two

3) 템플릿 문자열 인덱스 시그니처

interface TemplateStringIndex {
  [K in `key${number}`]?: string;
}

let refObj: TemplateStringIndex = {};
refObj["key1"] = "Value 1";

interface StringNumberDictionary {
  [index: string]: string;
  [index: number]: string; // OK
}

interface StringNumberDictionary2 {
  [index: string]: string;
  [index: number]: number; // Error
  // "숫자 인덱스 타입 'number'는 문자열 인덱스 타입 'string'에 할당될 수 없습니다."
}

const key = Symbol("key");

let refObj = {
  [key]: "1234"
};

console.log(refObj[key]); // "1234"

interface UnionValueIndex {
	[index: string]: string | number;
}
let myObj: UnionValueIndex = {};
myObj["test"] = "Test String";
myObj["example"] = 123;

9.1.3 인덱스 시그니처의 확장

interface Parent {
	[index: string]: string | number;
  name: string;
}

interface Child extends Parent {
  age: number;
}

let myInfo: Child = {
	name: "Duke",
	age: 30
};

9.1.4 인덱스 시그니처의 readonly

interface ReadonlyStringArray {
  readonly [index: number]: string;
}

let refArray: ReadonlyStringArray = ["Duke", "Bella"];
refArray[1] = "Alice"; // Error: readonly로 컴파일 에러가 발생합니다.

9.2 인덱스드 액세스

9.2.1 객체 예시

interface Animal {
    name: string;
    species: string;
    description: {
        color: string[];
        diet: string;
        weight: number;
    };
}

let animal: Animal = {
    name: "푸바오",
    species: "판다",
    description: {
        color: ["검은색", "흰색"],
        diet: "채식",
        weight: 110,
    },
};

function introduceAnimal(description:{
        color: string[];
        diet: string;
        weight: number;
    }) {
    console.log(
        `${description.diet}이며, 몸무게는 ${description.weight}kg입니다.`
    );
}

interface Animal2 {
    name: string;
    species: string;
    description: {
        color: string[];
        diet: string;
        weight: number;
        siblings: string[]; //추가
    };
}

let animal2: Animal2 = {
    name: "푸바오",
    species: "판다",
    description: {
        color: ["검은색", "흰색"],
        diet: "채식",
        weight: 110,
        siblings: ["후이바오", "루이바오"], //추가
    },
};

function introduceAnimal(description:{
        color: string[];
        diet: string;
        weight: number;
				siblings: string[]; //추가

    }) {
    console.log(
        `${description.diet}이며, 몸무게는 ${description.weight}kg입니다.`
    );
}

function introduceAnimal(description: Animal["description"]) {
    console.log(
        `${description.diet}이며, 몸무게는 ${description.weight}kg입니다.`
    );
}

function printAnimalColor(color: Animal2["description"]["color"]) {
    console.log(`이 동물은 ${color}입니다.`);
}

1) 주의할 점

const desciptionKey = "description";

function introduceAnimal(description: Animal[descriptionKey]) {
    console.log(
        `${description.diet}이며, 몸무게는 ${description.weight}kg입니다.`
    );
}
//Error

function introduceAnimal(description: Animal["whatever"]) {
    console.log(
        `${description.diet}이며, 몸무게는 ${description.weight}kg입니다.`
    );
}
//Error

9.2.2 배열 예시

type MovieList = {
    title: string;
    genre: string;
    premiere: number;
    information: {
        cast: string[];
        ott: boolean;
        cinema: boolean;
    };
}[];

const firstmovie: MovieList[number] = {
    title: "웡카",
    genre: "판타지",
    premiere: 20240131,
    information: {
        cast: ["티모시 샬라메", "휴 그랜트", "칼라 레인"],
        ott: false,
        cinema: true,
    },
};

const secondmovie: MovieList[0] = {
    title: "듄2",
    genre: "액션",
    premiere: 20240228,
    information: {
        cast: ["티모시 샬라메", "젠데이아 콜먼", "레베카 퍼거슨"],
        ott: false,
        cinema: true,
    },
};

function printCastInfo1(information: MovieList[number]["information"]) {
    console.log(`이 영화에는 ${information.cast}이 출연합니다.`);
}

function printCastInfo2(cast: MovieList[number]["information"]["cast"]) {
    console.log(`이 영화에는 ${cast}이 출연합니다.`);
}

9.2.3 튜플 예시

type Tup = [number, string, boolean];

type Tup0 = Tup[0];
// number

type Tup1 = Tup[1];
// string

type Tup2 = Tup[2];
// boolean

type Tup3 = Tup[3];
//Error: 길이가 '3'인 튜플 형식 'Tup'의 인덱스 '3'에 요소가 없습니다.

type Tup4 = Tup[number];
// number | string | boolean

9.3 Mapped Types

9.3.1 자바스크립트의 map 함수

const newArray = array.map(callback(currentValue, index, array), thisArg);

const newArray = ['1', '2', '3'].map((value) => Number(value));
// newArray: [1, 2, 3]

9.3.2 Mapped Types 기본 문법

type NewType = { [K in KeysType]: ValueType };

1) 예시 코드

type Fruits = 'Apple' | 'Banana' | 'Cherry';

type FruitsInfo = { [K in Fruits]: number };
const FruitsList: FruitsInfo = {
  Apple: 3000,
  Banana: 2000,
  Cherry: 5000,
};

2) Index Signature

type FruitsInfo = { [K: string]: number };

3) in

type FruitsInfo = { [K in Fruits]: number };

4) keyof

type Fruits = { 
	Apple: string;
	Banana: string;
	Cherry: string;
};

// keyof로 'Apple' | 'Banana' | 'Cherry'로 변환
type FruitsInfo = { [K in keyof Fruits]: number };
const FruitsList: FruitsInfo = {
  Apple: 3000,
  Banana: 2000,
  Cherry: 5000,
};

9.3.3 Mapped Types 응용

1) 읽기 전용 프로퍼티

interface FileData {
	fileName: string;
	createDate: string;
	fileSize: number;
}

// 파일 정보 생성
const fileInfo: FileData = {
  fileName: 'example.txt',
  createDate: '2024-03-01',
  fileSize: 1024,
};

// 파일 정보 출력
console.log('File Name:', fileInfo.fileName);
console.log('Create Date:', fileInfo.createDate);
console.log('File Size:', fileInfo.fileSize);

// 파일 정보 수정
fileInfo.fileName = 'updated.txt';
fileInfo.createDate = '2024-03-03';
fileInfo.fileSize = 2048;

// 수정된 파일 정보 출력
console.log('Updated File Name:', fileInfo.fileName);
console.log('Updated Create Date:', fileInfo.createDate);
console.log('Updated File Size:', fileInfo.fileSize);

interface ReadonlyFileData {
	fileName: string;
	readonly createDate: string;
	readonly fileSize: number;
}

interface FileData {
  fileName: string;
  createDate: string;
  fileSize: number;
}

type MakeReadonly<T, K extends keyof T> = {
  readonly [P in keyof T]: P extends K ? T[P] : T[P];
};

type ReadonlyFileData = MakeReadonly<FileData, 'createDate' | 'fileSize'>;

interface FileData {
  fileName: string;
  createDate: string;
  fileSize: number;
}

// Mapped Type
type MakeReadonly<T, K extends keyof T> = {
  readonly [P in keyof T]: P extends K ? T[P] : T[P];
};

type ReadonlyFileData = MakeReadonly<FileData, 'createDate' | 'fileSize'>;

const fileInfo: ReadonlyFileData = {
  fileName: 'example.txt',
  createDate: '2024-03-01',
  fileSize: 1024,
};

fileInfo.createDate = '2024-03-03'; // Error: 읽기 전용 프로퍼티
fileInfo.fileSize = 2048; // Error: 읽기 전용 프로퍼티

type Readonly<T> = {
  readonly [P in keyof T]: T[P];
};

2) 유저 정보 수정 API

interface UserData {
  id: number;
  name: string;
  email: string;
}

// UserData 가져오기
function fetchUserData(): UserData {
  // ...
}

interface NewUserData {
  id?: number;
  name?: string;
  email?: string;
}

function updateUserData(newData: NewUserData) {
  // ...
}

interface UserData {
  id: number;
  name: string;
  email: string;
}

interface NewUserData {
  id?: number;
  name?: string;
  email?: string;
}

type UserDataUpdate = {
  id?: UserData['id'];
  name?: UserData['name'];
  email?: UserData['email'];
};

type UserDataUpdate = { [K in 'id' | 'name' | 'email']?: UserData[K] };

type UserDataUpdate = { [K in keyof UserData]?: UserData[K] };

type Partial<T> = {
  [P in keyof T]?: T[P];
};

9.4 keyof 연산자

interface Employee {
	name: string;
	age: number;
	salary: number;
}

type ExtractEmployee = keyof Employee;

interface Student {
  name: string;
  age: number;
  school: string;
  major: string;
  graduation: boolean;
}


function extractKeyValue(student: Employee, key: string) {
	return student[key];
}

const student: Student = {
	name: "김철수",
	age: 30,
	school: "서울대학교",
	major: "컴퓨터공학과",
	graduation: true
};

extractKeyValue(student, "name");

function extractKeyValue(
   person: Student,
   key: "name" | "age" | "school" | "major" | "graduation"
) {
   return student[key];
}

extractKeyValue(student, "name");

function extractKeyValue(person: Student, key: keyof Student) {
  return student[key];
}