Notes dactylographiées (3)

avant-propos

Dans l'article précédent, nous avons principalement présenté les types de base TypeScript, booléen, nombre, chaîne, vide, null et indéfini, ainsi que tout type any et types joints. Dans cet article, nous en apprendrons davantage sur les types d'objets Interface et tableaux .

Type d'objet - interface

Dans TypeScript, nous utilisons l'interface Interface pour définir le type d'un objet.

qu'est-ce qu'une interface

Dans un langage orienté objet, une interface est un concept très important, c'est une abstraction du comportement, et des comportements spécifiques doivent être implémentés par des classes. L'interface est un concept très flexible dans TypeScript. En plus d'abstraire une partie du comportement de la classe, il peut également être utilisé pour 形状décrire l'objet. La forme ici peut être comprise comme l'attribut de l'objet.

Un exemple simple est le suivant :

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

let tom: Person = {
    name: "Tom",
    age: 25
}

Dans l'exemple ci-dessus, nous définissons une interface Person, puis définissons une variable tom, dont le type est Person, de sorte que les propriétés de tom doivent être cohérentes avec l'interface. S'il y a moins ou plus de propriétés, une erreur sera signalée.

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

let tom: Person = {
    name: "Tom"
}

Il signalera une erreur comme suit

demo.ts:6:5 - error TS2741: Property 'age' is missing in type '{ name: string; }' but required in type 'Person'.

Selon la spécification, la première lettre de l'interface doit être en majuscule.Dans certains langages de programmation, il est recommandé d'ajouter Iun préfixe avant le nom de l'interface.

attributs facultatifs

Dans d'autres langages, si nous avons besoin de deux types avec des propriétés similaires, nous devrons peut-être définir deux interfaces différentes, mais le contenu des deux types est similaire et sera défini à plusieurs reprises. Dans TypeScript, les propriétés facultatives peuvent éviter certaines définitions répétées.

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

let tom: Person = {
    name: "Tom"
}

let jerry: Person = {
    name: "Jerry",
    age: 24
}

Il ressort de l'exemple ci-dessus que les attributs facultatifs peuvent être définis via ?. Si un attribut est défini comme attribut facultatif, l'attribut peut exister ou non. Des attributs facultatifs peuvent être utilisés pour définir si l'attribut existe ou non, mais l'attribut ne peut pas être ajouté, sinon une erreur sera signalée :

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

let jerry: Person = {
    name: "Jerry",
    age: 24,
    gender: "male"
}

L'erreur est la suivante

Object literal may only specify known properties, and 'gender' does not exist in type 'Person'.

n'importe quel attribut

Parfois, nous voulons qu'une interface autorise des attributs arbitraires, nous pouvons utiliser les méthodes suivantes :

interface Person {
    name: string;
    age?: number;
    [propName: string]: any
}

let jerry: Person = {
    name: "Jerry",
    gender: "male"
}

Dans l'exemple ci-dessus, [propName : chaîne] définit que toute propriété prend la valeur de type chaîne. Il convient de noter qu'une fois qu'une propriété est définie, le type de la propriété définie et de la propriété facultative doit être un sous-ensemble de son type :

interface Person {
    name: string;
    age?: number;
    [propName: string]: string
}

let jerry: Person = {
    name: "Jerry",
    gender: "male"
}

Si l'un des attributs ci-dessus est une chaîne, mais que l'attribut age est un nombre, une erreur sera signalée.

 Property 'age' of type 'number' is not assignable to 'string' index type 'string'.

Une seule propriété arbitraire peut être définie dans une interface. Si vous avez des propriétés de plusieurs types dans l'interface, vous pouvez utiliser des types d'union dans n'importe laquelle des propriétés :

nterface Person {
    name: string;
    age?: number;
    [propName: string]: string | number
}

let jerry: Person = {
    name: "Jerry",
    age: 25,
    gender: "male"
}

attribut en lecture seule

Parfois, nous voulons que certains champs de l'objet soient affectés uniquement lors de leur création, nous pouvons alors utiliser readonly pour définir des propriétés en lecture seule :

interface Person {
    readonly id: number;
    name: string;
    age?: number;
    [propName: string]: string | number
}

let jerry: Person = {
    id: 9527,
    name: "Jerry",
    age: 25,
    gender: "male"
}

jerry.id = 213

Dans l'exemple ci-dessus, après l'initialisation de l'identifiant d'attribut défini par readonly, une valeur lui est attribuée, de sorte qu'une erreur est signalée.

Notez que la contrainte de lecture seule existe lorsque l'objet reçoit une valeur pour la première fois, et non lorsque la propriété en lecture seule est attribuée pour la première fois :

déployer

Dans TypeScript, les types de tableau peuvent être définis de plusieurs façons et sont très flexibles.

type + notation entre crochets

Le plus simple est d'utiliser le type plus les crochets pour représenter le tableau

let numberArray: number[] = [1, 1, 2, 3]

Aucun autre type n'est autorisé dans cette déclaration

génériques de tableau

Nous pouvons également utiliser des génériques de tableau pour représenter des tableaux :

let numberArray: Array<number> = [1, 2, 3, 4, 5]

Représenter des tableaux avec des interfaces

interface Number {
    [index: number]: number;
}

NumberArray signifie : tant que le type de l'index est un nombre, le type de la valeur doit être un nombre. Bien que les interfaces puissent également être utilisées pour décrire des tableaux, nous ne le faisons généralement pas car cette méthode est beaucoup plus compliquée que les deux premières méthodes.

en forme de tableau

Array-like n'est pas un type de tableau, comme les arguments

function sum() {
    let args: number[] = arguments
}

Le rapport ci-dessus est faux comme suit

Type 'IArguments' is missing the following properties from type 'number[]': pop, push, concat, join, and 15 more.

Dans l'exemple ci-dessus, arguments est en fait un tableau de classe, qui ne peut pas être décrit par un tableau ordinaire, mais doit être décrit par une interface :

function sum() {
    let args: {
        [index: number]: number;
        length: number;
        callee: Function;
    } = arguments
}

Dans cet exemple, en plus de contraindre que lorsque le type d'index est un nombre, le type de valeur doit être un nombre, nous le contraignons également à avoir deux attributs de longueur et d'appelé. En fait, les tableaux de classes couramment utilisés ont leurs propres définitions d'interface , tels que IArguments, NodeList, HTMLCollection, etc. :

function sum() {
    let args: IArguments = arguments;
}

Parmi eux, IArguments est un objet intégré défini dans TypeScript. Sa définition réelle est la suivante, et le contenu des objets intégrés sera présenté en détail plus tard.

interface IArguments {
    [index: number]: any;
    length: number;
    callee: Function;
}

L'utilisation de any dans un tableau

Une pratique plus courante consiste à utiliser any pour indiquer que n'importe quel type est autorisé dans le tableau :

let list: any[] = ['xcatliu', 25, { website: 'http://xcatliu.com' }];

enfin

Cet article présente principalement le contenu pertinent des interfaces et des tableaux. Pour plus d'articles, vous pouvez prêter attention au compte officiel QStack.