TypeScript에 대한 깊은 이해 - 인터페이스

1, 제한된 속성

개체 자격

이 입력에는 문자열 유형의 이름 속성만 있어야 합니다. 그렇지 않으면 오류가 보고됩니다.

/*对象限制*/
function sayName1(obj: {
     
      name: string }) {
    
    
	console.log("我的名字叫:" + obj.name);
}
sayName1({
    
    name: "张三"})

효과:

我的名字叫:张三

인터페이스 제한

기능은 위와 동일합니다.

interface People {
    
    
	name: string
}
function sayName2(obj: People) {
    
    
	console.log("我的名字叫:" + obj.name);
}
sayName2({
    
    name: "李四"})

효과:

我的名字叫:李四

약간의 철자법

선택 사항
없음.

유형으로 코드 힌트가 있습니다.

interface People {
    
    
	name: string
	age?:number
}

읽기 전용
속성의 일반적인 자격입니다.

interface People {
    
    
	readonly id:number
	name: string
	age?:number
}

3, 기타 제한

기능 유형

함수의 반환을 제한할 수 있습니다.

매개변수 이름은 필수는 아니지만 유형은 일관성이 있어야 합니다.

interface sayName {
    
    
	(obj: {
    
     name: string }): void
}
let a: sayName
a = function (s: {
     
      name: string }): void {
    
    
	console.log(s.name)
}

배열 유형

배열의 값 유형은 한정될 수 있습니다.

interface MyStringArray {
    
    
	[index: number]: string;
}

let myArray: MyStringArray;
myArray = ["AAA", "BBB"];

let myStr: string = myArray[0];

4, 제한된 클래스

사용이 간편함

클래스는 인터페이스를 구현하며 모든 속성과 메서드가 있어야 합니다.

interface User {
    
    
	name:string
	sayName():void
}
class MyUser implements User {
    
    
	name:string;
	sayName() {
    
    
		console.log(this.name)
	}
}
let a=new MyUser()
a.name="( ⊙ o ⊙ )啊!"
a.sayName()

상속 관계

인터페이스는 여러 인터페이스에서 상속할 수 있습니다. 한계가 중첩됩니다.

인터페이스는 클래스에서 상속할 수도 있습니다.

5, 컴파일러를 속이는 것(권장하지 않음)

컴파일러에게 이 개체가 이 인터페이스에 속해 있으며 확인할 필요가 없다고 알려줍니다.

유형 주장

어설션 후에 컴파일러는 이를 확인하지 않습니다.

interface People {
    
    
	name: string
}
function sayName2(obj: People) {
    
    
	console.log(1)
}
sayName2({
    
    } as People)

속성 자격

속성 요구 사항을 완화하면 컴파일러에서 오류를 보고하지 않습니다.

interface People {
    
    
	name?: string
	[propName: string]: any
}
function sayName2(obj: People) {
    
    
	console.log(1)
}
sayName2({
    
    age:3})

추천

출처blog.csdn.net/qq_37284843/article/details/123768071