Maison > interface Web > js tutoriel > Ce que vous devez savoir sur TypeScript

Ce que vous devez savoir sur TypeScript

php中世界最好的语言
Libérer: 2018-03-13 16:15:40
original
2118 Les gens l'ont consulté

Cette fois, je vais vous apporter quelque chose que vous devez savoir sur TypeScript. Quelles sont les précautions lors de l'utilisation de TypeScript. Voici des cas pratiques, jetons un coup d'œil.

Angular2 par rapport à Angular1 est comme Java et Javascript En raison des énormes changements, AngularJS est utilisé pour représenter la version 1.x, tandis qu'Angular représente 2.x, 4.x et. 5. x et autres versions ultérieures. Reportez-vous au « Tutoriel faisant autorité sur Angular » pour enregistrer l'historique de la famille Angular. Cet article présente TypeScript.

Lien original

TypeScript

Angular est construit avec TypeScript, un langage similaire à JavaScript.
TypeScript n'est pas un tout nouveau langage, mais un surensemble d'ES6. Tout le code ES6 est du code TypeScript entièrement valide et compilable.

Ce que vous devez savoir sur TypeScript


typescript

TypeScript présente cinq améliorations majeures par rapport à ES5 :

Type

Classes

Annotations

Importations de modules

Boîte à outils linguistique

Types

Les types TypeScript sont facultatifs.
Cependant, les avantages de la vérification de type sont :
1 Cela aide à écrire du code et à éviter les bugs lors de la compilation
2 Cela aide à lire le code et à exprimer clairement l'intention de l'auteur

 chaîne de caractères

La chaîne contient du texte, déclaré comme type de chaîne :

var name: string = 'hello world!';
Copier après la connexion

Nombre

Qu'elles soient entières ou à virgule flottante, en TypeScript, toutes les données utilisent des nombres à virgule flottante Représentation :

var age: number = 25;
Copier après la connexion

Array

Le tableau est représenté par le type Array. Étant donné que le tableau est un ensemble du même type de données, vous devez également spécifier les éléments dans. le tableau. Une énumération de type

var arr: Array<string> = [&#39;component&#39;, &#39;provider&#39;, &#39;pipe&#39;];
    或var arr: string[] = [&#39;component&#39;, &#39;provider&#39;, &#39;pipe&#39;];var arr: Array<number> = [1, 2, 3, 4, 5, 6];
    或var arr: number[] = [1, 2, 3, 4, 5, 6];
Copier après la connexion

une énumération est un ensemble de valeurs nommables,

enum Man {age, iq, eq};
var man: Man = Man.age;
Copier après la connexion

n'importe quel type

si aucun. is Si la variable spécifie un type, son type par défaut est any. Les variables de type any peuvent recevoir n'importe quel type de données

var something: any = &#39;hello world&#39;;
something = 1;
something = [1, 2, 3];
Copier après la connexion

Type "Aucun"

void signifie qu'aucun type n'est attendu. , généralement utilisé comme valeur de retour de la fonction , indiquant qu'il n'y a pas de valeur de retour

function setName(name: string): void {    this.name = name;
}
Copier après la connexion

le type void est également un type légal de tout type

classe

es5 Il adopte une conception orientée objet basée sur des prototypes, qui n'utilise pas de classes, mais s'appuie sur des prototypes
Dans es6, vous pouvez utiliser une classe pour représenter des classes intégrées, telles que :

class Point {}
Copier après la connexion

Une classe peut contenir des attributs, des méthodes et des constructeur

Attributs

Les attributs définissent les données des objets d'instance de classe, tels que : La classe Point peut avoir des attributs x, y
Chaque attribut d'une classe peut contenir un type facultatif, tel que :

class Point {    x: number;    y: number;
}
Copier après la connexion

Méthode

La méthode est une fonction exécutée dans le contexte de une instance d'objet de classe. Lorsqu'il est appelé Avant la méthode de l'objet, il doit y avoir une instance de cet objet

class Point {
    x: number;
    y: number;
    moveTo(x: number, y: number) {        this.x = x;        this.y = y;        console.log(this.x, this.y);
    }
}var p: Point = new Point();
p.x = 1;
p.y = 1;
p.moveTo(10,10);
Copier après la connexion

Constructeur

Le constructeur est une fonction spéciale qui est exécutée lorsque la classe est instancié. Habituellement, le nouvel objet est initialisé
Le constructeur doit être nommé constructeur, car le constructeur est appelé lorsque la classe est instanciée, il peut donc avoir des paramètres d'entrée, mais ne peut pas avoir de valeur de retour
Lorsque le la classe ne définit pas explicitement un constructeur, elle créera automatiquement un constructeur sans paramètre

class Point {
}var p = new Point();
等价于class Point {    constructor() {
    }
}var p = new Point();
Copier après la connexion

Constructeur avec paramètres

class Point {
    x: number;
    y: number;    constructor(x: number, y: number) {        this.x = x;        this.y = y;
    }
    moveTo(x: number, y: number) {        this.x = x;        this.y = y;        console.log(this.x, this.y);
    }
}    
var p: Point = new Point(1,1);
p.moveTo(10,10);
Copier après la connexion

Héritage

Une autre fonctionnalité importante de l'orientation objet est l'héritage. L'héritage montre que les sous-classes peuvent obtenir leur comportement de la classe parent, puis vous pouvez réécrire, modifier ou ajouter le comportement dans cette sous-classe
TypeScript prend en charge les fonctionnalités d'héritage et utilise le mot-clé extends pour implémenter

Créer une classe parent

class Parent {
    name: string;    constructor(name: string){        this.name = name;
    }
    say() {        console.log(&#39;NAME:&#39; + this.name);
    }
}
Copier après la connexion

Sous-classes

class Child {
    age: number;    constructor(name: string, age: number) {        super(name);        this.age = age;
    }
    say() {        super.say();        console.log(&#39; AGE:&#39; + this.age);
    }
}var n: Child = new Child(&#39;vist&#39;, 25);
n.say();
Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes. sur le site PHP chinois !

Lecture recommandée :

Comment créer des feux d'artifice cyan avec fond noir sur toile

Utilisez Fetch pour faire une requête http

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:php.cn
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