Présentation des types déclaratifs en JavaScript et TypeScript

Il y a deux points clés dans la réécriture de la syntaxe JavaScript vers la syntaxe TypeScript. L'un est que les variables membres de la classe (Field) doivent être déclarées, et l'autre est que les types doivent être déclarés pour diverses choses (variables, paramètres, fonctions/). méthodes, etc).
Lors de la réécriture de la syntaxe ES6 vers la syntaxe TypeScript, il y a deux points de connaissances importants, l'un consiste à déclarer les membres de la classe et l'autre à déclarer les types. Aucune de ces fonctionnalités de syntaxe n'existe en JavaScript. Ces deux points conduisent directement à deux questions clés : quels types existe-t-il ? Comment déclarer ?

Types

Avant de parler des types TypeScript, passons en revue les sept types de JavaScript :

non défini

fonction

booléen

numéro

chaîne

objet

symbole

Ces sept types peuvent être calculés via l'opérateur typeof Mais il n'existe pas de types communs de ce type. comme Array, null et Date, car ce sont en fait des objets.
L'une des fonctionnalités importantes de TypeScript est le type, donc les types dans TypeScript sont beaucoup plus particuliers. En plus des types en JavaScript, d'autres (liste incomplète) sont également définis

Array8742468051c85b06f0a0af9e3e506b5c , ou T[], représente un tableau de type T

null, type vide, sa fonction est liée au paramètre de compilation strictNullChecks

Tuple (tuple), sous la forme de [Number, String]

enum T, définit le type d'énumération T, qui peut être compris comme une dénomination centralisée de constantes numériques

interface T, interface, T est un type d'interface

classe T, classe, T est un type

any, qui représente n'importe quel type

void, qui ne représente aucun type, est utilisé pour déclarer le type de fonction

jamais, qui. représente le type magique que la fonction ne peut pas renvoyer.

...

Les types spécifiques ne seront pas décrits en détail ici : le type de base, les interfaces, les classes, l'énumération et l'avancée du manuel officiel. Les sections de types sont très claires.
Cependant, il existe encore une fonctionnalité liée au type qui doit être mentionnée : les génériques. Si nous parlons uniquement de types de données, les purs JSers peuvent toujours comprendre. Après tout, les types ne sont pas une nouveauté, ils élargissent simplement les types. Mais les purs JSers n’ont peut-être aucune idée des génériques.
Les génériques utilisent principalement un symbole pour représenter certains types. Tant qu'il s'agit d'un type qui répond aux contraintes (la valeur par défaut est sans contrainte), ce symbole de type peut être remplacé et utilisé, comme

function testb32f285eaba7a6752dff0bc229700674 (v: T) {
console.log(v);}
test78180fd7e2f5f09e138c95a71ada14e6(true); // Spécifie explicitement T et remplace test("hello") par boolean; implicitement) ) T est remplacé par une chaîne test(123); // Inférence (implicite) T est remplacé par un nombre

Les génériques sont liés aux types forts, c'est-à-dire qu'une vérification de type stricte est requise et vous souhaitez écrivez un code moins similaire, utilisez donc simplement un symbole au lieu du type. Le nom générique lui-même n'est peut-être pas facile à comprendre, mais si vous empruntez le concept de « modèle » au C++, il sera plus facile à comprendre. Par exemple, la fonction générique ci-dessus peut être interprétée comme trois fonctions selon les appels ultérieurs, ce qui équivaut à appliquer un modèle et à remplacer T par le type réel :
function test(v: boolean) { ... }function test ( v: string) { ... }function test(v: number) { ... }

Pour plus de détails sur les génériques, veuillez vous référer à la section Générique du manuel.
Les types sont brièvement décrits ici. Les types simples peuvent être compris en un coup d'œil. Nous discuterons en détail des types plus avancés plus tard. Cependant, puisque vous choisissez d'utiliser TypeScript, vous utiliserez inévitablement ses fonctionnalités de type statique, vous devez donc renforcer votre conscience de l'identification des types et développer cette habitude. Pour les purs JSers, c’est un énorme défi.


Type de déclaration

Le type de déclaration fait principalement référence aux types de variables/constantes, fonctions/méthodes et membres de classe. Utilisez var pour déclarer une variable dans JS, et ES6 étend let et const. Ces types de déclarations sont pris en charge par TypeScript. Il est également très simple de spécifier un type pour une variable ou une constante, ajoutez simplement deux points après le nom de la variable/constante, puis spécifiez le type. Par exemple,

// # typescript
 // 声明函数 pow 是 number 类型，即返回值是 number 类型// 声明参数 n 是 number 类型function pow(n: number): number {
    return n * n;}
 // 声明 test 是无返回值的function test(): void {
    for (let i: number = 0; i < 10; i++) {  // 声明 i 是 number
        console.log(pow(i));
    }}

Ce code le montre. le type de fonction, Déclaration des types de paramètres et des types de variables. Cela semble plus compliqué que le code JavaScript. Mais réfléchissez-y, si nous appelons accidentellement pow quelque part comme ceci :

// # javascript
 let n = "a";let r = pow(n);     // 这里存在一个潜在的错误

JavaScript ne vérifiera pas les erreurs à l'avance et ne donnera r que lorsque r = pow(n) est exécuté. L'affectation est NaN. Ensuite, si r est utilisé ailleurs, cela peut provoquer des erreurs de chaîne et le débogage peut prendre un certain temps pour trouver le problème.
Cependant, les deux lignes de code ci-dessus ne peuvent pas être traduites en TypeScript. Cela signalera une erreur d'incompatibilité de type :
L'argument de type 'string' n'est pas attribuable au paramètre de type 'number'.


Déclarez les membres de la classe

Regardons maintenant un morceau de code JavaScript

// # javascript (es6)
 class Person {
    constructor(name) {
        this._name = name;
    }
 
    get name() {
        return this._name;
    }}

Si ce code JavaScript est traduit en code TypeScript, il ressemblera à ceci

// # typescript
 class Person {
    private _name: string;
 
    public constructor(name: string) {
        this._name = name;
    }
 
    public get name(): string {
        return this._name;
    }}

注意到 private _name: string，这句话是在声明类成员变量 _name。JavaScript 里是不需要声明的，对 this._name 赋值，它自然就有了，但在 TypeScript 里如果不声明，就会报告属性不存在的错误： 
Property '_name' does not exist on type 'Person'.

虽然写起来麻烦了一点，但是我也能理解 TypeScript 的苦衷。如果没有这些声明，tsc 就搞不清楚你在使用 obj.xxxx 或者this.xxxx 的时候，这个 xxxx 到底确实是你想要添加的属性名称呢，还是你不小心写错了的呢？ 
另外要注意到的是 private 和 public 修饰符。JavaScript 中存在私有成员，为了实现私有，大家都想了不少办法，比如闭包。 
TypeScript 提供了 private 来修饰私有成员，protected 修改保护(子类可用)成员，public 修饰公共成员。如果不添加修饰符，默认作为 public，以兼容 JavaScript 的类成员定义。不过特别需要注意的是，这些修饰符只在 TypeScript 环境(比如转译过程)有效，转译成 JavaScript 之后，仍然所有成员都是公共访问权限的。比如上例中的 TypeScript 代码转译出来基本上就是之前的 JavaScript 代码，其 _name 属性在外部仍可访问。 
当然在 TypeScript 代码中，如果外部访问了 _name，tsc 是会报告错误的 
Property '_name' is private and only accessible within class 'Person'.

所以应用内使用 private 完全没问题，但是如果你写的东西需要做为第三方库发布，那就要想一些手段来进行“私有化”了，其手段和 JavaScript 并没什么不同。 


小结 

从 JavaScript 语法改写 TypeScript 语法，我们来做个简单的总结：

类成员需要声明。

变量、函数参数和返回值需要申明类型。

如果所有这些东西都要声明类型，工作量还是满大的，所以我建议：就接口部分声明类型。也就是说，类成员、函数/方法的参数和返回类型要声明类型，便于编辑器进行语法提示，局部使用的变量或者箭头函数，在能明确推导出其类型的时候，可以不声明类型。 

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!