TypeScript의 객체 배열 인터페이스

Rana Hasnain Khan 2023년6월21일
TypeScript의 객체 배열 인터페이스

객체 배열을 인터페이스하는 방법과 객체 배열을 TypeScript의 예제와 인터페이스하는 다양한 방법을 소개합니다.

TypeScript의 객체 배열 인터페이스

객체 배열에 대한 인터페이스를 정의했습니다. 각 객체의 타입에 대한 인터페이스를 설명했습니다. 배열을 Type[]으로 지정합니다.

예를 들어:

# typescript
 const arr: Worker[] =[];

배열에 추가된 모든 객체는 유형을 따라야 합니다. 그렇지 않으면 유형 검사기에서 오류가 발생합니다.

# typescript
interface student {
studentId: number;
studentName: string;
}
const arr: Employee[] = [
{ studentId: 1, studentName: 'Maham' },
{ studentId: 2, studentName: 'Maryam' },
];

위의 예에서 객체 배열의 유형이 인터페이스로 사용됩니다. 각 개체에는 숫자 유형의 Id문자열 유형의 이름이 있습니다.

유형 검사기에 오류를 일으키는 다른 유형의 개체를 배열에 추가하려고 합니다.

# typescript
interface Company {
CompanyId: number;
CompanyName: string;
[key: string]: any;
}

이는 배열을 null로 할당할 때 매우 유용할 수 있습니다. null 배열을 할당하면 TypeScript는 해당 유형을 any[]로 가정합니다.

# typescript
const arr2: Student[] = [
{ StudentId: 1, StudentName: 'Maham' },
{ StudentId: 2, StudentName: 'Maryam', wage: 100 },
];

위의 예에서 우리는 any 유형의 요소를 배열에 추가할 수 있다는 것을 알고 있으며 유형 검사기에서 도움을 받지 못했습니다.

오히려 우리는 모든 null 배열의 유형을 표현해야 합니다.

# typescript
interface Student {
  StudentId: number;
  StudentName: string;
}
const arr: Student[] = [
  { StudentId: 1, StudentName: 'Maham' },
  { StudentId: 2, StudentName: 'Maryam' },
];
arr.push({ Wage: 100 });

Worker 유형을 따르는 개체만 arr 배열에 추가할 수 있습니다.

시간 이전에 개체의 모든 속성 이름이 없다고 가정합니다. 인터페이스에서 색인 서명을 사용했습니다.

# typescript
const worker = [];

인덱스 서명은 유형 속성의 모든 이름과 모양의 값을 시간 경과에 따라 알 수 없을 때 유용합니다.

# typescript
interface Worker {
  WorkerId: number;
  WorkerName: string;
}

const arr: Worker[] = [];

위의 예에서 색인 서명 {[key: string]: string}을 볼 수 있습니다. 그것은 문자열로 인덱싱될 때 문자열 유형의 값으로 반환되는 키-값 구조를 표현했습니다.

또한 배열의 각 요소에는 숫자 유형의 id문자열 유형의 이름이 있습니다. 그것은 또한 다른 특성을 가질 수 있습니다.

여기서 키는 문자열이고 키의 값은 모든 유형이 될 수 있습니다.

이 접근 방식을 사용하는 동안 미리 알고 있는 인터페이스에 모든 속성을 명시적으로 추가해야 합니다.

유형 검사기의 사용을 가능한 한 제한하는 것이 이상적입니다.

Rana Hasnain Khan avatar Rana Hasnain Khan avatar

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

LinkedIn

관련 문장 - TypeScript Interface