Installation und Verwendung von TypeScript und grundlegende Datentypen

Installation und Verwendung von TypeScript und grundlegende Datentypen

Der erste Schritt besteht darin, TypeScript global zu installieren

Installation mit npm

npm install -g typescript

Installation mit cnpm

cnpm install -g typescript

Mit Yarn installieren

Garn global Typoskript hinzufügen

Schritt 2 TypeScript initialisieren

Initialisieren Sie TypeScript

Im vscode-Terminal >> Build-Task ausführen >> tsc: tsconfig.json überwachen

Überwachung

Als nächstes können wir unsere Typescript-Reise beginnen ~

Grundlegende TypeScript-Datentypen

// Boolescher Typ Boolescher Zahlentyp Zahl Stringtyp String Arraytyp Array Tupeltyp Tupel Aufzählungstyp Enumeration beliebiger Typ void Typ never Typ // Boolescher Typ let flag:boolean = true
console.log(flag) //wahr
 
// Zahlentyp let num:number = 11234
console.log(Nummer) // 112
 
// Zeichenfolgentyp let str:string = 'str str str~'
let str1:string = `hallo, dies ist String ${ num }` // Unterstützt auch Template-Strings console.log(str) // str str str~

// Array-Typ // Typ1 Sie können [] nach dem Elementtyp hinzufügen, um ein Array von Elementen dieses Typs anzuzeigen. let list:number[] = [1,2,3]
let list1:string[] = ['a','b','c']
// Typ2 verwendet Array-Generika, Array<Elementtyp>
let list3:Array<Zahl> = [1,2,3]
let list4:Array<string> = ['a','b','c']

//Tupeltyp Tupel
Der Tupeltyp ermöglicht die Darstellung eines Arrays mit einer bekannten Anzahl und einem bekannten Typ von Elementen, wobei jedes Element von einem anderen Typ sein kann.
let x:[Zeichenfolge, Zahl]
let y:[Zahl, Zeichenfolge]
x = [ 1, 'a' ] // Fehler
x = [ 'a', 1 ] // wahr 
y = [ 1,'a' ] // wahr
// Beim Zugriff auf ein Element außerhalb der Grenzen wird stattdessen ein Union-Typ verwendet:
x[3] = 'yuejie' // Erfolg String unterstützt (String | Zahl) Typ x[4] = true // Fehler bool ist nicht (String | Zahl) Typ // Aufzählung enum Color { blau, rot, orange}
enum Flag { Erfolg = 1, Fehler = 2 }
enum Color1 { blau, rot = 4, orange, grün }
lass c:Farbe = Farbe.rot // 0
let result:Flag = Flag.success // 1
lass d:Farbe1 = Farbe1.orange // 5 
lass e:Farbe1 = Farbe1.blau // 0

// Jeder Typ
// Vermeiden Sie die Erkennung starker Typensprachen, wenn Sie nicht wissen, welchen Wert der Benutzer dynamisch eingibt. Sie können den beliebigen Typ verwenden, um let notSure:any = 4 zu markieren.
notSure = "das ist irgendein" // ok
nichtSicher = wahr // ok
let list0:any[] = [1,true,'frei']
list0[2] = 1 //ok, kein Typ angegeben // Void type // bedeutet kein Typ. Wenn eine Funktion keinen Wert zurückgibt, wird ihr Rückgabetyp normalerweise als „void“ angezeigt.
function user():void { console.log( 'this is void' ) } // kein Rückgabewert function user1 ():number { return 123 } // gibt Zahlentyp zurück let user2:void = undefined | null // nutzlos, kann nur undefined und null verwenden 

// Null und Undefined werden nicht erklärt let u: undefined = undefined;
sei n: null = null;

// Der Typ „Never never“ stellt den Typ von Werten dar, die niemals existieren. Der Typ „Never“ ist der Rückgabewerttyp von Funktionsausdrücken oder Pfeilfunktionsausdrücken, die immer Ausnahmen auslösen oder niemals Werte zurückgeben.
neve = 123 // Fehler
// Eine Funktion, die „never“ zurückgibt, darf keinen unerreichbaren Endpunkt haben. neve = (() => { throw new Error('err') })() // Erfolg
Funktion loop(): nie {
 während (wahr) { }
}

// PS Das heutige Tutorial endet hier vorerst und der Objekttyp wird später aktualisiert

Dies ist das Ende dieses Artikels über die Installation und Verwendung von TypeScript und grundlegende Datentypen. Weitere Informationen zu grundlegenden TypeScript-Datentypen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • Grundlegende TypeScript-Datentypen
  • Erfahren Sie in einem Artikel mehr über TypeScript-Datentypen

<<:  Grafisches Tutorial zur Installation der grünen Version von MySql 5.6.36 (64-Bit)

>>:  Kann Docker das nächste „Linux“ werden?

Artikel empfehlen

Detaillierte Erläuterung der MySQL sql_mode-Abfrage und -Einstellung

1. Führen Sie SQL aus, um anzuzeigen wählen Sie @...

Three.js realisiert den dynamischen 3D-Logoeffekt von Facebook Metaverse

Inhaltsverzeichnis Hintergrund Was ist das Metave...

Entwickeln Sie Beispielcode für einen Taschenrechner mit nativem JavaScript

Die Hauptfunktion eines Rechners besteht darin, n...

So integrieren Sie Bilder eleganter in Vue-Seiten

Inhaltsverzeichnis Fehlerdemonstration Durch bere...

Eine kurze Diskussion über reguläre JS-RegExp-Objekte

Inhaltsverzeichnis 1. RegExp-Objekt 2. Grammatik ...

Frage zur Webseitenerstellung: Bilddateipfad

Dieser Artikel stammt ursprünglich von 123WORDPRE...

Vue implementiert die Abfrage von Startzeit und Endzeitbereich

In diesem Artikel erfahren Sie, wie Sie den Start...

Sechs merkwürdige und nützliche Dinge über JavaScript

Inhaltsverzeichnis 1. Dekonstruktionstipps 2. Dig...

Docker-Image-Zugriff auf den lokalen Elasticsearch-Port-Vorgang

Wenn Sie den vom Docker-Stack bereitgestellten Im...

svg+css oder js zum Erstellen eines Tick-Animationseffekts

Mein Chef hatte mich gebeten, ein Programm zu ers...