Maison >interface Web >js tutoriel >Ce que vous devez savoir sur TypeScript
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.
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!';
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;
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> = ['component', 'provider', 'pipe']; 或var arr: string[] = ['component', 'provider', 'pipe'];var arr: Array<number> = [1, 2, 3, 4, 5, 6]; 或var arr: number[] = [1, 2, 3, 4, 5, 6];
une énumération est un ensemble de valeurs nommables,
enum Man {age, iq, eq}; var man: Man = Man.age;
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 = 'hello world'; something = 1; something = [1, 2, 3];
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; }
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 {}
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; }
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);
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();
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);
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('NAME:' + this.name); } }
Sous-classes
class Child { age: number; constructor(name: string, age: number) { super(name); this.age = age; } say() { super.say(); console.log(' AGE:' + this.age); } }var n: Child = new Child('vist', 25); n.say();
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!