Lernen Sie den TypeScript-Compiler (tsc) zum ersten Mal kennen

Es sollte bekannt sein, dass Ling Yunzhi
einst der Beste der Welt war, als er jung war.
Unerwarteterweise sind die Jahre vergangen,
und es gibt immer noch keinen Ruhm oder Reichtum.

---

Entwicklern, die Erfahrung mit Programmiersprachen wie Java/C/Rust/Go haben, sollte das Konzept des Compilers vertraut sein. (wie javac , gcc , rustc ...)

Heute betrachten wir hauptsächlich den TypeScript-Compiler - tsc

---

1. Installieren Sie TypeScript

Offizieller Link: TypeScript installieren && TypeScript herunterladen

• npm install -g Typoskript
• Garn hinzufügen Typoskript --dev
• pnpm Typoskript hinzufügen -D

Visual Studio unterstützt dies standardmäßig.

2. Mit tsc-Kompilierungsoptionen vertraut sein

Wenn wir mit tsc-Befehlen nicht vertraut sind, können wir mit den folgenden Befehlen Hilfe bekommen.

• tsc --Hilfe

• tsc --help --all

Wie nachfolgend dargestellt:

---

3. Kompilieren Sie die .ts-Datei

Genau wie beim Schreiben von JavaScript-Dateien können wir Notepad/Vim verwenden. (Freundliche Erinnerung: Visual Studio funktioniert besser)

Hier ist ein Beispiel für den Inhalt der offiziellen Website

console.log('Hello,TypeScript!')

function greet(person:string,date:Date){
    
    
	console.log(`Hello ${
      
      person}, today is ${
      
      date}!`);
}

greet("Bert",new Date())
greet("Bert") // 错误调用
greet("Bert", 5) //错误调用

TypeScript hilft uns eindeutig dabei, Probleme während der Kompilierungsphase zu entdecken und aufzuzeigen.

4. Was ist mit JS, nachdem TS einen Fehler gemeldet hat?

Nachdem wir den Node-Befehl durchlaufen haben: (WTF?) Nach

sorgfältiger Überlegung stellten wir fest, dass dies auch ein normales Phänomen ist:

Dieses Fehlverhalten ist für widerspenstiges JavaScript selbstverständlich.

4.1 Durch noEmitOnError ist es untersagt, die JS-Zieldatei im Fehlerfall zu kompilieren

Das ist natürlich nicht das gewünschte Ergebnis. Wir können dieses Verhalten vermeiden, indem wir die Kompilierungsoption noEmitOnError aktivieren .
Kein Emit bei Fehler -noEmitOnError

Geben Sie keine Compiler-Ausgabedateien wie JavaScript-Quellcode, Source-Maps oder Deklarationen aus, wenn Fehler gemeldet wurden. (Wenn Fehler gemeldet wurden, gibt die Kompilierung keine Dateien aus.)

tsc --noEmitOnError hallo.ts

5. Zeigen Sie die kompilierte JS-Datei an

Zum Vergleich ist hier die Quelldatei (Hello.ts) angegeben.

console.log('Hello,world!')


// function sum(x:number, y:number) {
    
    
//   return x + y
// }

// sum(5,true)

function greet(person:string, date:Date) {
    
    
  console.log(`Hello ${
      
      person}, today is ${
      
      date}!`);
}
 
greet("Bert"); // 错误调用
greet("Bert",new Date());
greet("Bert",1) // 错误调用

// 定义一个箭头函数
const welcome = (name:string) => {
    
    
  console.log(`Welcome ${
      
      name}`)
}

Pfeilfunktionen und Vorlagenzeichenfolgen sind neue Funktionen, die von ECMAScript 2015 (oder ECMAScript6, ES2015, ES6 usw.) eingeführt wurden.

Wir können den Unterschied leicht finden, indem wir die obigen Codes vergleichen:

• Typlöschung (Gelöschte Typen)
• Downgrade der JavaScript-Version (Downleveling)

TypeScript wird standardmäßig in ES3-Code transpiliert

5.1 JS-Version, die durch das Ziel wechselt

Wir können die ECMAScript-Versionen wechseln , indem wir die Zielkompilierungsoption festlegen. Hier können Sie den folgenden Befehl ausführen, um die ES6-Version des Zielcodes zu erhalten:

tsc --target es6 hello.ts

In Bezug auf die Versionsnummer nach --target (Standardwert es3) kann es sich um den folgenden Wert handeln:

• es3

• es5

• es6/es2015

• es2017

• es2018

• es2019

• es2020

• es2021

• es2022

• esweiter

   PS: 不区分大小写。
  

Details können hier eingesehen werden: lib . und Ziel von tsconfig

---

Der folgende strenge Modus und weitere Einstellungen für Kompilierungsoptionen werden beim nächsten Mal zerlegt.