Einführung deklarativer Typen in JavaScript und TypeScript

Beim Umschreiben von der JavaScript-Syntax zur TypeScript-Syntax gibt es zwei wichtige Punkte: Der eine besteht darin, dass Klassenmitgliedsvariablen (Feld) deklariert werden müssen, und der andere darin, dass Typen für verschiedene Dinge (Variablen, Parameter, Funktionen/) deklariert werden müssen. Methoden usw.).
Beim Umschreiben von der ES6-Syntax zur TypeScript-Syntax gibt es zwei wichtige Wissenspunkte: Der eine ist die Deklaration von Klassenmitgliedern und der andere die Deklaration von Typen. Keine dieser Syntaxfunktionen gibt es in JavaScript. Diese beiden Punkte führen direkt zu zwei Schlüsselfragen: Welche Arten gibt es? Wie deklariere ich?

Typen

Bevor wir über TypeScript-Typen sprechen, werfen wir einen Blick auf die sieben JavaScript-Typen:

undefinierte

Funktion

boolean

Zahl

Zeichenfolge

Objekt

Symbol

Diese sieben Typen können über den Typ-Operator berechnet werden. Es gibt jedoch keine gemeinsamen Typen wie z B. Array, Null und Date, da es sich tatsächlich um Objekte handelt.
Eine der wichtigen Funktionen von TypeScript ist der Typ, daher sind die Typen in TypeScript viel spezifischer. Zusätzlich zu den Typen in JavaScript sind auch einige andere (unvollständige Liste) definiert

Array oder T[] stellt ein Array vom Typ T

null, leerer Typ dar, dessen Funktion mit dem Kompilierungsparameter strictNullChecks

Tupel (Tupel) in der Form [Zahl, String]

enum T, definiert den Aufzählungstyp T, der als zentralisierte Benennung numerischer Konstanten verstanden werden kann

Schnittstelle T, Schnittstelle, T ist ein Schnittstellentyp

Klasse T, Klasse, T ist ein Typ

any, der einen beliebigen Typ darstellt

void, der keinen Typ darstellt, wird verwendet, um den Funktionstyp

never zu deklarieren stellt den magischen Typ dar, den die Funktion nicht zurückgeben kann.

Die spezifischen Typen werden hier nicht im Detail beschrieben: Basistyp, Schnittstellen, Klassen, Aufzählung und Erweitert Die Typenabschnitte sind sehr klar.

Allerdings gibt es noch eine typbezogene Besonderheit, die erwähnt werden muss – Generika. Wenn wir nur über Datentypen sprechen, können reine JS-Benutzer es immer noch verstehen. Schließlich sind Typen keine neue Sache, sie erweitern nur die Typen. Aber reine JS-Benutzer haben möglicherweise keine Ahnung von Generika.

Generika verwenden hauptsächlich ein Symbol, um einige Typen darzustellen. Solange es sich um einen Typ handelt, der die Einschränkungen erfüllt (Standard ist nicht eingeschränkt), kann dieses Typsymbol ersetzt und verwendet werden, z. B.

Funktionstest< T> (v: T) {
console.log(v);}
test(true); // T explizit angeben und test("hello") durch boolean ersetzen; implizit) ) T wird durch String ersetzt test(123); // Inferenz (implizit) T wird durch Zahl ersetzt

Generics beziehen sich auf starke Typen, das heißt, eine strenge Typprüfung ist erforderlich, und Sie möchten Schreiben Sie weniger ähnlichen Code. Verwenden Sie daher einfach ein Symbol anstelle eines Typs. Der Name „Generics“ selbst ist möglicherweise nicht leicht zu verstehen, aber wenn Sie das Konzept der „Vorlage“ aus C++ übernehmen, ist es einfacher zu verstehen. Beispielsweise kann die obige generische Funktion gemäß nachfolgenden Aufrufen als drei Funktionen interpretiert werden, was dem Anwenden einer Vorlage und dem Ersetzen von T durch den tatsächlichen Typ entspricht:
function test(v: boolean) { ... }function test ( v: string) { ... }function test(v: number) { ... }

Weitere Einzelheiten zu Generika finden Sie im Abschnitt „Generika“ des Handbuchs.
Die Typen werden hier kurz beschrieben und können auf einen Blick verstanden werden. Fortgeschrittenere Typen werden später ausführlich besprochen. Da Sie sich jedoch für die Verwendung von TypeScript entscheiden, werden Sie zwangsläufig dessen statische Typfunktionen verwenden. Daher müssen Sie Ihr Bewusstsein für die Identifizierung von Typen stärken und diese Gewohnheit entwickeln. Für reine JS-Benutzer ist dies eine große Herausforderung.


Deklarationstyp

Der Deklarationstyp bezieht sich hauptsächlich auf die Typen von Variablen/Konstanten, Funktionen/Methoden und Klassenmitgliedern. Verwenden Sie var, um eine Variable in JS zu deklarieren, und ES6 erweitert let und const. Diese Arten von Deklarationen werden von TypeScript unterstützt. Es ist auch sehr einfach, einen Typ für eine Variable oder Konstante anzugeben. Fügen Sie einfach einen Doppelpunkt nach dem Variablen-/Konstantennamen hinzu und geben Sie dann den Typ an. Beispiel:

Dieser Code zeigt der Funktionstyp, Deklaration von Parametertypen und Variablentypen. Dies scheint komplizierter zu sein als JavaScript-Code. Aber denken Sie darüber nach, wenn wir pow versehentlich irgendwo wie folgt aufrufen:

// # 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));
    }}

JavaScript prüft nicht im Voraus auf Fehler und gibt nur r aus, wenn r = pow(n) ausgeführt wird. Die Zuweisung ist NaN. Wenn r dann an anderer Stelle verwendet wird, kann es zu Kettenfehlern kommen und es kann eine Weile dauern, bis das Problem beim Debuggen gefunden ist.

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

Die beiden oben genannten Codezeilen können jedoch nicht in TypeScript übersetzt werden. Es wird ein Typkonfliktfehler gemeldet:

Argument vom Typ „String“ kann nicht dem Parameter vom Typ „Nummer“ zugewiesen werden.


Klassenmitglieder deklarieren

Schauen wir uns nun einen Teil des JavaScript-Codes an

Wenn dieser JavaScript-Code in TypeScript-Code übersetzt wird, sieht er so aus

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

// # 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 语法，我们来做个简单的总结：

类成员需要声明。

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

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

Das obige ist der detaillierte Inhalt vonEinführung deklarativer Typen in JavaScript und TypeScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!