TS 대상 확장 연산 자 와 rest 연산 자 를 자세히 설명 합 니 다.

개술
TypeScript 2.1 은 대상 확장 연산 과 rest 속성 제안 에 대한 지원 을 추 가 했 고 이 제안 은 ES 2018 에서 표준화 되 었 다.rest 와 spread 속성 을 유형 안전 한 방식 으로 사용 할 수 있 습 니 다.
대상 rest 속성
세 가지 속성 을 가 진 간단 한 글자 의 대상 을 정의 했다 고 가정 합 니 다.

const marius = {
  name: "Marius Schulz",
  website: "https://mariusschulz.com/",
  twitterHandle: "@mariusschulz"
};

ES6 재 구성 문법 을 사용 하면 해당 속성의 값 을 저장 하기 위해 몇 개의 부분 변 수 를 만 들 수 있 습 니 다.TypeScript 는 모든 변수의 종 류 를 정확하게 추정 합 니 다.

const { name, website, twitterHandle } = marius;

name;          // Type string
website;       // Type string
twitterHandle; // Type string

이것들 은 모두 정확 하지만,이것 도 지금까지 무슨 신선 한 것 이 냐?관심 있 는 속성 을 추출 하 는 것 외 에 도...문법 을 사용 하여 나머지 속성 을 rest 요소 에 수집 할 수 있 습 니 다:

const { twitterHandle, ...rest } = marius;

twitterHandle; // Type string
rest; // Type { name: string; website: string; }

TypeScript 는 결 과 를 얻 은 부분 변 수 를 위해 정확 한 유형 을 확인 합 니 다.트 위 터 Handle 변 수 는 일반적인 문자열 이지 만 rest 변 수 는 하나의 대상 이 며,나머지 두 개의 해체 되 지 않 은 속성 을 포함 하고 있 습 니 다.
대상 확장 속성
만약 우리 가 fetch()API 를 사용 하여 HTTP 요청 을 보 내 기 를 원한 다 면.이것 은 두 개의 인 자 를 받 아들 입 니 다.하나의 URL 과 하나의 options 대상,options 는 요청 한 모든 사용자 정의 설정 을 포함 합 니 다.
응용 프로그램 에 서 는 fetch()호출 을 패키지 하고 기본 옵션 과 주어진 요청 의 특정 설정 을 덮어 쓸 수 있 습 니 다.이 설정 항목 들 은 다음 과 같 습 니 다.

const defaultOptions = {
  method: "GET",
  credentials: "same-origin"
};

const requestOptions = {
  method: "POST",
  redirect: "follow"
};

대상 확장 을 사용 하면 두 대상 을 하나의 새로운 대상 으로 합 쳐 fetch()방법 에 전달 할 수 있 습 니 다.

// Type { method: string; redirect: string; credentials: string; }
const options = {
  ...defaultOptions,
  ...requestOptions
};

대상 확장 속성 은 새 대상 을 만 들 고 defaultOptions 의 모든 속성 값 을 복사 한 다음 왼쪽 에서 오른쪽으로 requestOptions 의 모든 속성 값 을 복사 합 니 다.마지막 으로 얻 은 결 과 는 다음 과 같 습 니 다.

console.log(options);
// {
//   method: "POST",
//   credentials: "same-origin",
//   redirect: "follow"
// }

분배 순서 가 중요 하 니 주의 하 세 요.하나의 속성 이 두 대상 에 동시에 나타 나 면 나중에 분 배 된 것 은 앞의 것 을 교체 합 니 다.
물론 TypeScript 는 이런 순 서 를 이해 합 니 다.따라서 여러 확장 대상 이 같은 키 로 속성 을 정의 하면 결과 대상 에서 이 속성의 유형 은 마지막 할당 의 속성 유형 이 될 것 입 니 다.이전 할당 의 속성 을 덮어 쓰기 때 문 입 니 다.

const obj1 = { prop: 42 };
const obj2 = { prop: "Hello World" };

const result1 = { ...obj1, ...obj2 }; // Type { prop: string }
const result2 = { ...obj2, ...obj1 }; // Type { prop: number }

제작 대상 의 얕 은 복사
대상 확장 은 대상 을 만 드 는 얕 은 복사 에 사용 할 수 있 습 니 다.만약 에 우리 가 새로운 대상 을 만 들 고 모든 속성 을 복사 해서 기 존의 todo 항목 에서 새로운 todo 항목 을 만 들 고 싶다 면 대상 을 사용 하면 쉽게 할 수 있 습 니 다.

const todo = {
  text: "Water the flowers",
  completed: false,
  tags: ["garden"]
};

const shallowCopy = { ...todo };

실제로,당신 은 새로운 대상 을 얻 을 수 있 습 니 다.모든 속성 값 이 복 사 됩 니 다:

console.log(todo === shallowCopy);
// false

console.log(shallowCopy);
// {
//   text: "Water the flowers",
//   completed: false,
//   tags: ["garden"]
// }

현재 text 속성 을 수정 할 수 있 지만 원본 todo 항목 은 수정 하지 않 습 니 다:

hallowCopy.text = "Mow the lawn";

console.log(shallowCopy);
// {
//   text: "Mow the lawn",
//   completed: false,
//   tags: ["garden"]
// }

console.log(todo);
// {
//   text: "Water the flowers",
//   completed: false,
//   tags: ["garden"]
// }

그러나 새로운 todo 항목 은 첫 번 째 와 같은 tags 배열 을 참조 합 니 다.얕 은 복사 이기 때문에,배열 을 바 꾸 면 이 두 todo 에 영향 을 줄 것 이다.

shallowCopy.tags.push("weekend");

console.log(shallowCopy);
// {
//   text: "Mow the lawn",
//   completed: false,
//   tags: ["garden", "weekend"]
// }

console.log(todo);
// {
//   text: "Water the flowers",
//   completed: false,
//   tags: ["garden", "weekend"]
// }

직렬 화 대상 의 깊 은 복사 본 을 만 들 려 면 jsON.parse(jsON.stringify(obj)나 다른 방법,예 를 들 어 object.assign()을 사용 하 는 것 을 고려 할 수 있 습 니 다.대상 확장 은 속성 값 만 복사 합 니 다.한 값 이 다른 대상 에 대한 참조 라면 의외 의 행동 을 할 수 있 습 니 다.
keyof 와 찾기 형식
JS 는 고도 의 동적 언어 다.정적 유형 시스템 에서 어떤 조작의 의 미 를 포착 하 는 것 은 때때로 매우 까다 로 울 수 있다.간단 한 prop 함 수 를 예 로 들 면:

function prop(obj, key) {
  return obj[key];
}

대상 과 키 를 받 아들 이 고 해당 속성의 값 을 되 돌려 줍 니 다.한 대상 의 서로 다른 속성 은 완전히 다른 유형 을 가 질 수 있 습 니 다.우 리 는 심지어 obj 가 어떤 모습 인지 모 릅 니 다.
그러면 어떻게 TypeScript 에서 이 함 수 를 작성 합 니까?먼저 시도 해 보 세 요.

이 두 가지 유형의 주석 이 있 습 니 다.obj 는 대상 이 어야 하고 key 는 문자열 이 어야 합 니 다.우 리 는 지금 이미 두 매개 변수의 가능 한 값 집합 을 제한 했다.그러나 TS 는 반환 형식 을 any 로 추정 합 니 다.

const todo = {
  id: 1,
  text: "Buy milk",
  due: new Date(2016, 11, 31)
};

const id = prop(todo, "id");     // any
const text = prop(todo, "text"); // any
const due = prop(todo, "due");   // any

더 자세 한 정보 가 없 으 면 TypeScript 는 key 매개 변수 에 어떤 값 을 전달 할 지 모 르 기 때문에 prop 함수 의 더 구체 적 인 반환 유형 을 추정 할 수 없습니다.우 리 는 이 점 을 실현 하기 위해 더 많은 유형의 정 보 를 제공 해 야 한다.
keyof 조작 기호
JS 에서 속성 명 을 매개 변수 로 하 는 API 는 상당히 보편적 이지 만 아직 까지 그 API 에 나타 난 유형 관 계 는 표현 되 지 않 았 다.
TypeScript 2.1 키 of 연산 자 를 새로 추가 합 니 다.색인 형식 조회 나 keyof 를 입력 하 십시오.색인 형식 조회 keyof T 가 만 든 유형 은 T 의 속성 이름 입 니 다.만약 에 우리 가 다음 과 같은 Todo 인 터 페 이 스 를 정의 했다 고 가정 하면:

interface Todo {
  id: number;
  text: string;
  due: Date;
}

여러분 은 키 of 연산 자 를 Todo 형식 에 적용 하여 모든 속성 키 의 종 류 를 얻 을 수 있 습 니 다.이 종 류 는 문자열 의 글자 크기 형식의 결합 입 니 다.

type TodoKeys = keyof Todo; // "id" | "text" | "due"

물론 여러분 도 키 오 프 를 사용 하 는 것 이 아니 라 연합 형식 인'id'|'text'|'due'를 수 동 으로 쓸 수 있 습 니 다.하지만 이렇게 하 는 것 은 귀 찮 고 오류 가 발생 하기 쉬 우 며 유지 하기 가 귀 찮 습 니 다.그리고 일반적인 해결 방안 이 아니 라 Todo 유형 에 특 정 된 해결 방안 이 어야 한다.
색인 형식 조회
keyof 가 있 으 면 prop 함수 의 유형 주 해 를 개선 할 수 있 습 니 다.키 인자 로 임의의 문자열 을 받 아들 이 기 를 원 하지 않 습 니 다.반면,우 리 는 인자 key 가 실제 들 어 오 는 대상 의 유형 에 존재 하도록 요구 합 니 다.

function prop <T, K extends keyof T>(obj: T, key: K) {
  return obj[key]
}

TypeScript 는 현재 prop 함수 의 반환 형식 을 T[K]로 추정 합 니 다.이것 이 바로 색인 형식 조회 나 검색 형식 입 니 다.타 입 T 의 속성 K 의 타 입 을 표시 합 니 다.현재 prop 방법 을 통 해 아래 todo 의 세 가지 속성 을 방문 하면 모든 속성 은 정확 한 유형 이 있 습 니 다.

const todo = {
  id: 1,
  text: "Buy milk",
  due: new Date(2016, 11, 31)
};

const id = prop(todo, "id");     // number
const text = prop(todo, "text"); // string
const due = prop(todo, "due");   // Date

현재,todo 대상 에 존재 하지 않 는 키 를 전달 하면 어떻게 됩 니까?

컴 파일 러 가 잘못 보고 할 수 있 습 니 다.이것 은 아주 좋 습 니 다.이것 은 우리 가 존재 하지 않 는 속성 을 읽 으 려 고 하 는 것 을 막 습 니 다.
또 다른 실제 예제 입 니 다.TypeScript 컴 파일 러 와 함께 발 표 된 lib.es 2017.object.d.ts 형식 성명 파일 에서 Object.entries()방법 을 보십시오.

interface ObjectConstructor {
  // ...
  entries<T extends { [key: string]: any }, K extends keyof T>(o: T): [keyof T, T[K]][];
  // ...
}

entries 방법 은 원 그룹 배열 을 되 돌려 줍 니 다.각 원 그룹 은 속성 키 와 해당 하 는 값 을 포함 합 니 다.부인 할 수 없습니다.반환 유형 에 대량의 괄호 가 있 지만 우 리 는 유형 안전성 을 찾 고 있 습 니 다.
이상 은 TS 대상 확장 연산 자 와 rest 연산 자 에 대한 상세 한 내용 입 니 다.TS 대상 확장 연산 자 와 rest 연산 자 에 관 한 자 료 는 다른 관련 글 을 주목 하 십시오!