Maison > interface Web > js tutoriel > Explication détaillée des interfaces et des classes en dactylographié (avec exemples)

Explication détaillée des interfaces et des classes en dactylographié (avec exemples)

不言
Libérer: 2018-10-19 14:38:16
avant
2174 Les gens l'ont consulté

Cet article vous apporte une explication détaillée des interfaces et des classes en dactylographié (avec des exemples). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Pour plus de simplicité, typescript sera abrégé en ts à l'avenir

InterfaceInterface

Certains étudiants peuvent ne pas être familiers avec les interfaces. langages typés, il est difficile d'en voir des traces au niveau du langage Contrairement aux langages fortement typés, le niveau du langage est pris en compte. Mais dans le monde ts, nous pouvons voir ses traces. Pour parler franchement, il est uniquement chargé de définir et d'expliquer ce qu'il y a dans votre objet, c'est-à-dire la structure. Bien sûr, il ne peut pas être instancié.

Définition

Alors, comment définir l'interface Bien sûr, utilisez le mot-clé interface

interface IA {
    name: string
}
Copier après la connexion

Ce qui précède déclare l'interface IA. Il y a Le nom de l'attribut est de type chaîne
De cette façon, on peut déclarer le type IA à une variable et attribuer une valeur initiale

var a: IA = {
    name: 'hello'
}
Copier après la connexion

Hériter du

L'interface est également possible Héritée, si vous disposez d'une interface IB qui contient également la structure IA, vous pouvez simplement en hériter et étendre vos propres attributs

interface IB extends IA {
    id: number
}
Copier après la connexion

classe

classe Elle est similaire à une interface, mais en plus de la définition, elle a également une implémentation, comme l'attribution d'une valeur à une variable, qui peut être instanciée

Définition

Le mot - clé défini est class , Je crois que les étudiants qui connaissent es6 l'ont déjà pris pour acquis

class A {
    a: string = 'xxxxx'
}
Copier après la connexion

Ce qui précède définit la classe A, qui a une chaîne de type a, et l'attribue une valeur initiale de xxxxx, afin que nous puissions faire comme suit : Utilisez-le de cette façon, instanciez-le et puissiez référencer l'attribut a

var a = new A()
console.log(a.a)
Copier après la connexion

Bien sûr, nous pouvons également modifier l'attribut a

Modificateurs d'accès publics, privés, protégés et autres membres

Les attributs ont des droits d'accès, auxquels les membres peuvent accéder et qui peut accéder

public, c'est-à-dire que tout le monde peut accéder

privé. Seuls les membres internes peuvent accéder. Pour parler franchement, c'est-à-dire que les fonctions intégrées peuvent accéder à

Protégé à l'exception de lui-même. 🎜>

. Les mots-clés ci-dessus sont généralement ajoutés devant les attributs. Sinon, c'est public

Les soi-disant membres ne se limitent pas aux attributs, mais incluent également des méthodes, également appelées fonctions, mais elles le sont. généralement appelées méthodes dans les classes

class A {
    public a = 'a'
    private b = 'b'
    protected c = 'c'
}
Copier après la connexion
Notez que la déclaration ci-dessus n'a pas spécifié de type pour l'attribut, ce qui est légal , car le type correspondant peut être déduit en fonction de la valeur initiale suivante

<.> Constructeur

Lorsqu'il s'agit de classes, le constructeur est naturellement indispensable. Cette fonction est assez particulière. Elle est appelée lors de l'instanciation, c'est-à-dire lorsque new est utilisé dans des langages fortement typés. est généralement une fonction nommée d'après le nom de la classe. Dans ts, elle est définie et implémentée en tant que constructeur. Bien sûr, à proprement parler, c'est le cas dans js.

En fait, les constructeurs ne sont pas différents des fonctions ordinaires. Ils peuvent avoir des paramètres, et le corps de la fonction est l'implémentation. Vous pouvez attribuer des valeurs initiales aux propriétés et à d'autres opérations. 🎜> Même si vous définissez un constructeur, il le fera. Il existe un constructeur par défaut, mais il ne fait rien



Dans ts, le constructeur a également une fonction magique, c'est-à-dire qu'il est défini et attribué à un valeur initiale dans les paramètres du constructeur, sans avoir à répéter la déclaration dans la classe et attribuer la valeur initiale dans le constructeur, comme suit

class A {
    a: string
    constructor(arg: string) {
        this.a = arg
    }
}
Copier après la connexion

Ci-dessus, nous avons défini un attribut de chaîne a dans A et attribué le premier paramètre du constructeur

class A {
    constructor(public a: string)
}
Copier après la connexion

Héritage

Semblable aux interfaces, l'héritage de classe utilise également le mot-clé extends

pour implémenter interfaces
class B extends A {
    d: number = 1
}
Copier après la connexion

Une classe peut non seulement hériter de classes existantes, mais également implémenter des interfaces. Il convient de noter que les attributs de l'interface doivent avoir des implémentations correspondantes dans la classeLe mot-clé pour l'implémentation est Implements.


Bien sûr, vous pouvez implémenter et utiliser l'héritage en même temps, et il n'y a aucun problème

class C implements IA {
    name = 'c'
}
Copier après la connexion

Membres statiques
class D extends A implements IA {
    name = 'd'
}
Copier après la connexion

Les membres ordinaires existent séparément dans chaque instance, tandis que les membres statiques sont partagés dans la classe, c'est-à-dire qu'il n'y a qu'une seule copie. La façon de déclarer les membres statiques est d'utiliser le mot-clé static

Ci-dessus. avez déclaré un attribut de chaîne sa et attribué la valeur initiale nnnn Lorsque vous avez besoin d'y accéder, appelez-le simplement comme ci-dessous

class A {
    static sa = 'nnnn'
}
Copier après la connexion

Il y a beaucoup de choses sur les interfaces et les classes En raison de l'espace limité, arrêtons-nous ici d'abord. Plus de contenu sera discuté plus tard

A.sa
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:segmentfault.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal