답변.

TypeScript에서 복잡한 데이터 구조를 설명하기 위해 인터페이스(interface)와 타입 별칭(type)을 사용합니다. 이를 객체, 배열 및 중첩된 유형과 결합하여 복잡한 컬렉션에 대한 엄격한 타입 검사를 수행할 수 있습니다.

중첩 객체에 대한 경우:

interface Address {
  city: string;
  zip: number;
}

interface UserProfile {
  name: string;
  age: number;
  address: Address;
}

다양한 유형의 배열에 대한 경우:

// 튜플
let tuple: [string, number] = ['John', 30];

// 유니온 타입의 배열
let arr: (string | number)[] = [1, 'a', 2, 'b'];

// 객체 배열
let users: UserProfile[] = [ {...}, {...} ];

구조가 복잡하고 선택적 필드가 있는 경우에는 ?를 사용하고, Partial, Record, Mapped Types 또는 재귀적 유형을 조합하여 중첩된 트리에 대해 사용합니다.

함정 질문.

질문: 여러 유형의 요소가 포함된 배열을 설명하기 위해 인터페이스를 사용할 수 있나요? (예: [string, number, boolean])?

답변: 아닙니다. 이런 경우에는 튜플을 사용하는 것이 좋습니다. 인터페이스는 고정된 위치와 유형에 적합하지 않습니다. 튜플은 각 위치에 대한 유형을 엄격하게 지정할 수 있게 해줍니다.

type MyTuple = [string, number, boolean];
let foo: MyTuple = ['ok', 12, false];

주제의 미세한 차이로 인한 실제 오류 사례.

이야기

프로젝트에서 복잡한 구조를 잘못 설명했습니다: 다양한 유형의 배열에 대해 any[]를 사용하여 올바른 튜플 또는 유니온 타입을 사용하지 않았습니다. 결과적으로, 요소 중 하나에 잘못된 유형의 값이 있게 되었고, 이는 비즈니스 로직의 오류로 이어졌습니다(문자열과의 산술 연산).

이야기

데이터 구조에 깊이 중첩된 객체가 재귀적 유형이나 Partial을 사용하지 않고 선언되었습니다. 트리 노드에 새 하위 트리를 추가하려고 할 때 컴파일러 오류가 발생하여 개발자들은 이를 any로 다운캐스팅하여 우회하고, 그로 인해 프로덕션에서 런타임 버그가 발생했습니다.

이야기

사용자 프로필을 설명하는 객체가 부분적으로 선택적이었지만, 개발자는 ?를 사용하지 않았습니다. 서버에서 데이터를 가져올 때 TypeScript는 오류를 발생시키지 않았지만, 애플리케이션은 객체에 존재하지 않는 필드에 접근하려고 시도하면서 크래시가 발생했습니다.

복잡한 데이터 구조(예: 중첩 객체, 다양한 유형의 배열)에 대한 유형을 TypeScript에서 어떻게 설명합니까? 어떤 접근 방식이 있으며 일반적으로 어떤 함정이 있습니까? 실제 예를 들어보세요.

답변.

함정 질문.

주제의 미세한 차이로 인한 실제 오류 사례.