TypeScript 정의 인터페이스(interface)사례 튜 토리 얼

인터페이스의 역할:
인터페이스,영어:interface,그 역할 은 우리 코드 에 약속 을 제공 하 는 것 으로 간단하게 이해 할 수 있 습 니 다.
Typescript 에서 이렇게 설명 합 니 다:
4.567917.TypeScript 의 핵심 원칙 중 하 나 는 값 이 가지 고 있 는 구조 에 대해 유형 검 사 를 하 는 것 이다.그것 은 때때로'오리 식 변 형 법'또는'구조 적 성격 자 유형 화'라 고 불 린 다4.567917.TypeScript 에서 인터페이스의 역할 은 바로 이러한 유형 을 위해 당신 의 코드 나 제3자 코드 로 계약 을 정의 하 는 것 입 니 다예 를 들 어:

//      Person
interface Person {
    name: string;
    age: number;
}

//         man         Person "  " 【         ，        】
let man: Person;

//   ，    man    ，man            Person   ，      number     age      string     name   
man = { age: 10, name: 'syw' }
#     
function fun(women:Person){} //    womem       Person   

위의 예 에서 나 는 인터페이스 와 인터페이스의 역할 을 어떻게 정의 하 는 지 간단하게 말 했다.다음은 인터페이스의 다른 게임 방법 을 간단하게 말 하 겠 다.
인터페이스 선택 속성 설정:
선택 가능 한 속성 을 가 진 인 터 페 이 스 는 일반적인 인터페이스 정의 와 차이 가 많 지 않 습 니 다.선택 가능 한 속성 이름 정의 뒤에 만 추가 하 시 겠 습 니까?기호

interface Person {
    name: string
    age?: number
}

선택 가능 한 속성 입 니 다.우리 가 가장 흔히 볼 수 있 는 사용 상황 은 이 매개 변수 가 전달 되 거나 존재 하 는 지 확인 하지 않 는 것 입 니 다.
Typescript 에서 선택 할 수 있 는 매개 변수의 장점 을 설명 합 니 다.
4.567917.선택 가능 한 속성의 장점 중 하 나 는 존재 할 수 있 는 속성 을 미리 정의 할 수 있 고 장점 중 하 나 는 존재 하지 않 는 속성 을 인용 할 때의 오 류 를 포착 할 수 있다 는 것 이다추가 속성 검사:
이 점 을 간단하게 요약 하면 우 리 는 속성 을 설정 할 수 있 지만 잘못된 속성 을 전달 할 수 없다 는 것 이다.

위의 Person 인 터 페 이 스 를 예 로 들 면,만약 우리 가 사용 할 때 age 속성 오 류 를 aag 로 썼 다 면,typescript 은 오 류 를 보고 할 것 입 니 다.age 속성 자체 가 반드시 전달 해 야 하 는 것 이 아니 더 라 도

이것 이 바로 추가 속성 검사 입 니 다.
물론,우 리 는 유형 단언 을 사용 하여 이러한 속성 검 사 를 돌 릴 수 있 습 니 다.위의 링크:TypeScript 중의 유형 단언[as 문법|＜문법]
인터페이스 읽 기 전용 속성 설정:
일부 대상 속성 은 대상 이 막 만 들 었 을 때 만 값 을 수정 할 수 있 습 니 다.그래서 우 리 는 속성 명 앞에서 readonly 로 읽 기 전용 속성 을 지정 할 수 있 습 니 다.

interface Person {
    readonly name: string;
    readonly age: number;
}
//     
let man: Person = {name: 'syw', age: 10};

//            ，    。
man.age = 20；// error！
// Cannot assign to 'age' because it is a read-only property.

말하자면 속성 만 읽 고 사용 하 는 효과 와 const 의 차이 가 많 지 않다.물론 둘 은 하나 도 아니다.내 가 이렇게 말 하 는 것 은 단지 이 해 를 잘 하기 위해 서 이다.
Typescript 에 서 는 readonly 와 const 를 이렇게 설명 합 니 다.
4.567917.readonly 를 사용 해 야 하 는 지 const 를 사용 해 야 하 는 지 를 가장 간단하게 판단 하 는 방법 은 그것 을 변수 로 사용 해 야 하 는 지 속성 으로 사용 해 야 하 는 지 를 보 는 것 이다.변수 로 사용 하면 const 를 사용 하고 속성 으로 사용 하면 readonly 를 사용 합 니 다함수 형식 인터페이스:
쉽게 말 하면 함수 유형의 인 터 페 이 스 는 함수 의 매개 변수 유형 과 함수 의 반환 값 유형 을 규정 하 는 것 이다.

interface PersonFun {
    (name: string, age: number): boolean
}
//     ，   PersonFun   
let manFun: PersonFun = (name: string, age: number) => {
    return age > 10;
}

주의:
4.567917.함수 매개 변수 유형 은 변경 할 수 없고 반환 값 을 포함 하여 제약 을 지 켜 야 합 니 다4.567917.함수 매개 변수 이름 은 인터페이스 에 있 는 이름과 대응 하지 않 고 매개 변수 위치 에 대응 하 는 유형 만 호 환 할 수 있 습 니 다

//          
let manFun: PersonFun = (name12: string, age12: number) => {
    return age > 10;
}

인덱스 형식 인터페이스:
색인 형식 인 터 페 이 스 는 쉽게 말 하면 색인 의 유형 과 반환 값 의 유형 을 규정 할 수 있 습 니 다.
4.567917.예 를 들 어 배열 에서 우 리 는 number 형식의 값 으로 색인 할 수 있 고 색인 은 string 형식의 값 이 라 고 규정 할 수 있다.그러면 이 배열 의 형식 은 대체적으로 고정 된다

interface PersonArr {
    [index: number]: string
}
//     
let manArr: PersonArr = ['syw','syw1','syw2'];
//   
manArr[0]; //    0       number   ，0         syw   string   

Typescript 에 서 는 두 가지 색인 서명 을 지원 합 니 다.사실은 색인 형식 입 니 다.각각 number 와 string 입 니 다.
또한,number 형식의 색인 을 사용한다 면,정 의 된 반환 값 형식 은 string 형식의 색인 반환 값 을 정의 하 는 하위 형식 이 어야 합 니 다.
Typescript 은 이 말 을 이렇게 설명 합 니 다.
4.567917.number 를 사용 하여 색인 을 할 때 자 바스 크 립 트 는 string 으로 변환 한 다음 에 색인 대상 을 찾 습 니 다.즉,100(하나의 number)으로 색인 을 찾 는 것 은'100'(하나의 string)으로 색인 을 찾 는 것 과 같 기 때문에 이들 은 일치 해 야 한 다 는 것 이다나 는 처음에 이 말 을 보 았 을 때 문자 의 뜻 을 알 아 보 았 지만 이 말 을 어떻게 간단하게 표현 해 야 할 지 몰 랐 다.자세히 연구 해 보 니[내 가 너무 못 했 나 봐]사실은 매우 간단 하 다 는 것 을 알 게 되 었 다.

//       PersonArr      ，    index（number）  ，    item（string）   ，                   ，           ：
//    number      ，                  string            。

//                 
interface PersonArr {
    [index: number]: string;
    [item: string]: number;
}
//    index      string    ，      item     number       
//       ？      ，  index           number    。

TypeScript 정의 인터페이스(interface)사례 튜 토리 얼 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 TypeScript 정의 인터페이스 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 지원 을 바 랍 니 다!