TypeScript의 객체 배열 인터페이스

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문자열 유형의 이름이 있습니다. 그것은 또한 다른 특성을 가질 수 있습니다.

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

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

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

튜토리얼이 마음에 드시나요? DelftStack을 구독하세요 YouTube에서 저희가 더 많은 고품질 비디오 가이드를 제작할 수 있도록 지원해주세요. 구독하다
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