TypeScript의 인터페이스 및 클래스에 대한 자세한 설명(예제 포함)

이 글은 TypeScript의 인터페이스와 클래스에 대한 자세한 설명을 제공합니다(예제 포함). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

간편함을 위해 앞으로는 typescript를 ts로 축약하겠습니다

Interface

일부 학생들은 인터페이스에 익숙하지 않을 수도 있고, Strong Typed 언어와 달리 Weakly Typed 언어의 언어 수준에서는 보기 어려울 수도 있습니다. , 언어 수준에서 고려했습니다. 하지만 ts 세계에서는 그 흔적을 볼 수 있습니다. 직설적으로 말하면 객체에 있는 것, 즉 구조를 정의하고 설명하는 역할만 담당합니다.

정의

그럼 인터페이스를 어떻게 정의해야 할까요? 물론, 인터페이스 키워드를 사용하세요

interface IA {
    name: string
}

인터페이스 IA는 위에 선언되어 있고, 문자열 형식의 속성 이름이 있습니다
이런 식으로 우리는 IA를 변수 Type에 선언하고 초기 값을 할당할 수 있습니다

var a: IA = {
    name: 'hello'
}

Inherit

인터페이스도 상속될 수 있습니다. IA의 구조도 포함하는 IB 인터페이스가 있으면 간단히 상속하고 고유한 속성을 확장할 수 있습니다.

interface IB extends IA {
    id: number
}

Class

클래스는 정의 외에도 구현도 포함합니다. 예를 들어 변수에 값을 할당할 때

Definition

정의된 키워드는 class입니다. es6에 익숙한 학생들은 이미 익숙할 거라 생각합니다

class A {
    a: string = 'xxxxx'
}

위에서는 문자열 유형이 a인 클래스 A를 정의하고 초기 값 xxxxx를 할당합니다. 다음과 같이 사용할 수 있도록 인스턴스화하고 a

var a = new A()
console.log(a.a)

속성을 참조할 수 있습니다. 물론 a

public, private, protected 및 기타 멤버 액세스 수정자

속성에는 액세스 권한이 있습니다. 어떤 구성원이 접근할 수 있는지, 누가 접근할 수 있는지

public, 즉 누구나 접근할 수 있습니다

private 내부 구성원만 접근할 수 있습니다. 직설적으로 말하면 내장된 기능은 자신을 제외한 누구나 접근할 수 있습니다. 클래스를 상속받은 사람은 액세스할 수 있습니다

위 키워드는 일반적으로 속성 앞에 추가됩니다. 그렇지 않으면 공개입니다.

소위 멤버는 속성에 국한되지 않고 함수라고도 불리는 메서드도 포함하지만, 일반적으로 클래스에서 메서드를 호출합니다.

class A {
    public a = 'a'
    private b = 'b'
    protected c = 'c'
}

위 선언은 속성에 대한 유형을 지정하지 않았습니다. 이는 다음과 같이 결정될 수 있으므로 적법합니다. 초기 값은 해당 유형을 추론합니다

Constructor

클래스에 관해서는 당연히 생성자가 필수입니다. 이 함수는 인스턴스화할 때 호출됩니다. 즉, 강력한 유형의 언어에서는 일반적으로 클래스 이름을 따서 명명된 함수입니다. 물론 엄밀히 말하면 이는 js에 규정되어 있습니다.

사실 생성자는 일반 함수와 다르지 않습니다. 함수 본문이 구현입니다. 위의 A를 다시 작성하여 a에 할당할 수도 있습니다. 생성자를 정의하면 기본 생성자가 있습니다. 기능적이지만 아무 작업도 수행하지 않습니다

class A {
    a: string
    constructor(arg: string) {
        this.a = arg
    }
}

ts에서는 생성자에도 마법의 기능이 있습니다. 즉, 생성자에서 정의하고 초기 값을 할당할 수 있습니다. 매개변수는 클래스에서 반복적으로 선언할 필요가 없으며 생성자에서 할당됩니다. 초기 값은 다음과 같습니다.

class A {
    constructor(public a: string)
}

위에서 A에 문자열 속성 a를 정의하고 여기에 생성자의 첫 번째 매개변수를 할당했습니다.

상속

인터페이스와 마찬가지로 클래스 상속도 확장 키워드를 사용합니다.

class B extends A {
    d: number = 1
}

인터페이스 구현

클래스는 기존 클래스를 상속할 뿐만 아니라 인터페이스를 구현할 수도 있습니다. 인터페이스는 클래스에 해당 구현이 있어야 합니다구현 키워드는 Implements입니다

class C implements IA {
    name = 'c'
}

물론 구현과 상속을 동시에 해도 문제 없습니다

class D extends A implements IA {
    name = 'd'
}

정적 멤버

일반 멤버는 각 인스턴스에 별도로 존재하지만, 정적 멤버는 클래스에서 공유됩니다. 즉, static 멤버를 선언하는 방법은 static

class A {
    static sa = 'nnnn'
}

키워드를 사용하는 것입니다. 위에서 문자열 속성 sa를 선언하고 필요할 때 초기 값 nnnn을 할당했습니다. 액세스하려면 다음과 같이 호출하세요.

A.sa

인터페이스 및 클래스 정보 공간이 제한되어 있으므로 먼저 여기서 멈추도록 하겠습니다. 더 많은 내용은 나중에 논의하겠습니다

위 내용은 TypeScript의 인터페이스 및 클래스에 대한 자세한 설명(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!