Erfahren Sie in einem Artikel mehr über TypeScript-Datentypen

Erfahren Sie in einem Artikel mehr über TypeScript-Datentypen

Grundtypen

Weitere Typen werden in ts unterstützt

let age: Zahl = 10 // Zahl
let firstName: string = "Vorname" // String
let Nachname: string = "Nachname" // String
let isMary: boolean = true // boolean
let unde: undefiniert = undefiniert // undefiniert
let nu: null = null // null

undefined und null können anderen Typen als Werte zugewiesen werden, da sie als Untertypen anderer Typen betrachtet werden können.

Bei der Wertezuweisung muss man sich an den definierten Datentyp halten, sonst kommt es zu folgender Fehlermeldung

  • Beim Deklarieren einer Variablen stimmt der Typ nicht mit dem Wert überein
  • Beim Neuzuweisen einer Variablen stimmt der Typ nicht mit dem Wert überein

Bildbeschreibung hier einfügen

Bildbeschreibung hier einfügen

Bildbeschreibung hier einfügen

Bildbeschreibung hier einfügen

jeder Typ

Manchmal können wir den Typ einer Variable nicht bestimmen. Wir können sie als beliebige

Wenn wir einem beliebigen Typ einen Wert zuweisen, können wir ihm jeden beliebigen Wert zuweisen, ohne dass ein Fehler gemeldet wird.

let isAny:any='jeder Typ beliebig'
istAny=520
istAny=true
istAny=null

Um jedoch Typmehrdeutigkeiten zu vermeiden, sollten wir versuchen, „any“ so wenig wie möglich zu verwenden.

Eigenschaften jeglicher Art

  • Ermöglicht Zuweisungen jeglicher Art
  • Kann auf alle Eigenschaften und Methoden zugreifen
let userName: any = "Benutzername";
// Sie können auf jede Eigenschaft zugreifen console.log(userName.name);
console.log(Benutzername.Name.Vorname);
// Sie können jede Methode aufrufen userName.setName('David');
Benutzername.setName('David').sayHello();
BenutzerName.name.setFirstName('David');

Arrays

Wir können den Typ der Elemente im Array angeben

let ages: Zahl[] = [5, 20, 13, 14]
let-Namen: Zeichenfolge[] = ['Liang Chen', 'Luffy', 'Ming Shiyin', 'Li Yangyong']

Bildbeschreibung hier einfügen

Bildbeschreibung hier einfügen

Array-ähnlich:

Klassenarrays verfügen nicht über die Methoden, die Arrays haben. Tsc kann die beiden automatisch identifizieren.

let Argumente = [555,555,55]

Funktion lei(){
  let arr:Anzahl=Argumente
}

Bildbeschreibung hier einfügen

Tupel

Im Grunde ähnlich einem Array, aber der Typ kann mehrere sein

let arr:[Zahl,Zeichenfolge,Boolescher Wert]=[520,'Wert',true] 

Bildbeschreibung hier einfügen

Beim Zuweisen von Werten müssen wir die Reihenfolge der Typen einhalten.

Bildbeschreibung hier einfügen

Bildbeschreibung hier einfügen

Mehr Elemente sind besser als weniger

let arr:[Zahl,Zeichenfolge,Boolescher Wert]=[520,'Wert',true]
arr.push('b') // OK arr.push(4) // OK arr.push(true) // OK console.log(arr)
let arr:[Zahl,Zeichenfolge]=[520,'Zeichenfolge']
arr.push('b') // OK arr.push(4) // OK arr.push(true) // Nein console.log(arr)

Bildbeschreibung hier einfügen

Schnittstelle

  • Eine Schnittstelle kann als Programm verstanden werden, das relativ abstrakt ist und kein spezifisches Verhalten angibt. Das heißt, in einer Schnittstelle definieren wir nur Eigenschaften, Methoden und Eigenschaftstypen sowie abstrakte Methoden. Wir weisen Eigenschaften keine Werte zu und definieren keine Methodenimplementierungen.
  • Bei Klassen müssen den Eigenschaften grundsätzlich Werte zugewiesen und auch Methoden implementiert werden.
  • Schnittstellendeklarationen sind wie Klassen und Mitglieder ähneln eher wörtlichen Objekten als Klassen.

Wirkung:

  • Beschreiben Sie die Form des Objekts
  • Ententypisierung
Schnittstellenpunkt
  Benutzername:Zeichenfolge|Zahl
  Passwort:Nummer
} // Zu diesem Zeitpunkt analysiert die Ausführung von tsc den entsprechenden js-Code nicht, da dieser Typ für ts eindeutig ist und nur Einschränkungen anzeigt
Schnittstellenpunkt
  Benutzername:Zeichenfolge|Zahl
  Passwort:Nummer
}

let-Wert:Punkt={
  Benutzername: '[email protected]',
  Passwort:123456
}

let val:Punkt={
  Benutzername:55555,
  Passwort:123456
} // Zu diesem Zeitpunkt sind beide erfüllt und tsc wird ausgeführt


// Es erscheint nur der folgende Code, ohne jegliche Einschränkungen js
var Wert = {
    Benutzername: '[email protected]',
    Passwort: 123456
};
var val = {
    Benutzername: 55555,
    Passwort: 123456
};

Optionale Attribute ?

Beim Erstellen einer Variablen vom Schnittstellentyp „IPerson“ müssen die in der Schnittstelle deklarierten Attribute auch bei der Zuweisung eines Werts an die Variable vorhanden sein, da andernfalls ein Fehler gemeldet wird.

Wir können eine Eigenschaft jedoch als optional festlegen und beim Erstellen einer Variablen einen Wert zuweisen

Schnittstellenpunkt
  Benutzername:Zeichenfolge|Nummer
  Passwort:Nummer,
  E-Mail?:Zeichenfolge
}

let-Wert:Punkt={
  Benutzername: '[email protected]',
  Passwort:123456
}

let val:Punkt={
  Benutzername:55555,
  Passwort:123456
}

Bildbeschreibung hier einfügen

Nur-Lese-Attribut readonly :

Schnittstellenpunkt
  Benutzername:Zeichenfolge|Zahl
  Passwort:Nummer,
  E-Mail?:Zeichenfolge,
  schreibgeschützte Adresse: Zeichenfolge
}

let-Wert:Punkt={
  Benutzername: '[email protected]',
  Passwort:123456,
  Adresse: „Baoding“
}

let val:Punkt={
  Benutzername:55555,
  Passwort:123456,
  Adresse: „Peking“
}
Wert.Passwort=65975222
Wert.Adresse = "kkk"

Bildbeschreibung hier einfügen

Funktion

Funktionen in ts können Rückgabewerttypen definieren

const Wert=():Zahl=>{
  Rückgabe 1
}

const val=():string=>{
  Rückgabe 1
}

Bildbeschreibung hier einfügen

Bildbeschreibung hier einfügen

Typ Selbstabzug

Wenn wir eine Variable definieren, ohne einen Typ zuzuweisen, wird dieser entsprechend dem Wert abgeleitet.

let-Wert = 5555

Wert='Zeichenfolge'

Bildbeschreibung hier einfügen

Union-Typ (wählen Sie einen oder mehrere aus)

let-Wert:Zeichenfolge|Zahl
Wert = "Nicht verwendet"
Wert=520
Wert=true

Bildbeschreibung hier einfügen

Typbehauptung:

Funktion get(Daten:Zeichenfolge|Zahl):Zahl{
  const str = Daten als Zeichenfolge
  wenn(str.Länge){
    return str.length
  }anders {
    const num = Daten als Zahl
    returniere num.toString().length
  }
}

console.log(get('Speichern'));
Konsole.log(get(520));

Bildbeschreibung hier einfügen

  • Behauptungen mit as
  • Behauptungen sind keine Typkonvertierungen. Sie teilen dem Compiler lediglich den Typ der Variablen mit, und Sie erhalten einen Hinweis, wenn Sie die Variable später verwenden.
  • Wenn Sie keine Behauptung hinzufügen, wird bei Verwendung eines bestimmten Methodentyps ein Fehler gemeldet

Typschutz:

type guard ist kein Typ, sondern ein Mechanismus, der einen bestimmten Typ bestätigen kann.

Funktion get(Daten:Zeichenfolge|Zahl):Zahl{
  wenn(Datentyp==='Zeichenfolge'){
    returniere Datenlänge
  }anders {
    gibt data.toString().length zurück
  }
}

console.log(get('Speichern'));
Konsole.log(get(520));

Bildbeschreibung hier einfügen

Klasse

Klasse: Klasse, ES6-Syntax, ist die objektorientierte Förderung von js, Klasse ist nur syntaktischer Zucker, die zugrunde liegende Implementierung basiert immer noch auf Funktionen und Prototypen

  • Klasse: definiert die abstrakten Eigenschaften von allem, wie eine Blaupause, eine Zeichnung
  • Objekt: Eine Instanz einer Klasse
  • Drei Hauptmerkmale: Kapselung, Vererbung und Polymorphismus

Die Zugriffsebene von Mitgliedern einer Klasse kann durch drei Modifikatoren gesteuert werden:

  • Öffentlich: Die geänderte Eigenschaft oder Methode ist öffentlich und kann von überall aus aufgerufen werden. Das Standardverhalten
  • Geschützt: Die geänderte Eigenschaft oder Methode ist geschützt und kann nur von der Klasse selbst und ihren Unterklassen aufgerufen werden.
  • Privat: Die geänderte Eigenschaft oder Methode ist privat und kann nur innerhalb der Klasse aufgerufen werden.
Klasse Person {
  öffentlicher Name:Zeichenfolge
  geschütztes Alter:Nummer
  private Adresse: Zeichenfolge
  Konstruktor(Name:Zeichenfolge,Alter:Nummer,Adresse:Zeichenfolge){
    dieser.name=Name
    this.age=Alter
    this.address=Adresse
  }
  sprechen(){
    console.log(`Person:${dieser.Name}---${dieses.Alter}---${diese.Adresse}`)
  }
}
const Children = neue Person('Kinder',20,'Kinder')
Kinder.sprechen()
//Kann normal ausgeben 

Bildbeschreibung hier einfügen

Klasse Person {
  öffentlicher Name:Zeichenfolge
  geschütztes Alter:Nummer
  private Adresse: Zeichenfolge
  Konstruktor(Name:Zeichenfolge,Alter:Nummer,Adresse:Zeichenfolge){
    dieser.name=Name
    this.age=Alter
    this.address=Adresse
  }
  sprechen(){
    console.log(`Person:${dieser.Name}---${dieses.Alter}---${diese.Adresse}`)
  }
}

Klasse Kind erweitert Person {
  sagen(){
    Konsole.log(`Kind:${this.name}---${this.age}`)
  }
}
// const Children = neue Person('Kinder',20,'Kinder')
// Kinder.sprechen()
const children = new child('Neues Kind',20,'Neues Kind')
Kinder.sagen()

Bildbeschreibung hier einfügen

Es meldet auch einen Fehler beim Ausführen

Bildbeschreibung hier einfügen

Klasse Person {
  öffentlicher Name:Zeichenfolge
  geschütztes Alter:Nummer
  private Adresse: Zeichenfolge
  Konstruktor(Name:Zeichenfolge,Alter:Nummer,Adresse:Zeichenfolge){
    dieser.name=Name
    this.age=Alter
    this.address=Adresse
  }
  sprechen(){
    console.log(`Person:${dieser.Name}---${dieses.Alter}---${diese.Adresse}`)
  }
}

Klasse Kind erweitert Person {
  sagen(){
    Konsole.log(`Kind:${this.name}---${this.age}`)
  }
}
// const Children = neue Person('Kinder',20,'Kinder')
// Kinder.sprechen()
const children = new child('Neues Kind',20,'Neues Kind')
Kinder.sagen()

Bildbeschreibung hier einfügen

Klasse Person {
  öffentlicher Name:Zeichenfolge
  geschütztes Alter:Nummer
  private Adresse: Zeichenfolge
  Konstruktor(Name:Zeichenfolge,Alter:Nummer,Adresse:Zeichenfolge){
    dieser.name=Name
    this.age=Alter
    this.address=Adresse
  }
  sprechen(){
    console.log(`Person:${dieser.Name}---${dieses.Alter}---${diese.Adresse}`)
  }
}

Klasse Kind erweitert Person {
  sagen(){
    Konsole.log(`Kind:${this.name}---${this.age}`)
  }
}
const Children = neue Person('Kinder',20,'Kinder')
Kinder.sprechen()
console.log(Kinder.Adresse);
console.log(Kinder.Alter);

// const children = new child('Neues Kind', 20, 'Neues Kind')
// kinder.sagen()

Bildbeschreibung hier einfügen

Bildbeschreibung hier einfügen

Bildbeschreibung hier einfügen

aufzählen

Der Aufzählungstyp wird in Szenarien verwendet, in denen der Wert auf einen bestimmten Bereich beschränkt ist.

enum Woche {
  SUNDAY = 'Sonntag',
  MONDAY = 'Montag',
  TUESDAY = 'Dienstag',
  WEDNESDAY = 'Mittwoch',
  THURSDAY = 'Donnerstag',
  FRIDAY = 'Freitag',
  SAMSTAG = 'Samstag'
}
Funktion getProgramme(Datum: Woche): Zeichenfolge {
  if (Datum === Woche.SONNTAG) {
  zurück 'Sonntags Freizeit und Unterhaltung'
  } sonst wenn (Datum === Woche.MONTAG) {
  zurück 'Blogbeitrag am Montag'
  } sonst wenn (Datum === Woche.DIENSTAG) {
  Rückkehr 'Dienstagsprint'
  }
  sonst wenn (Datum === Woche.MITTWOCH) {
  Rückkehr „Am Mittwoch weiterkämpfen“
  }
  sonst wenn (Datum === Woche.DONNERSTAG) {
  zurück 'Neuer Artikel am Donnerstag'
  }
  sonst wenn (Datum === Woche.FREITAG) {
  Rückkehr „Bereit, sich am Freitag auszuruhen“
  }
  anders {
  Rückkehr 'Schlaf am Samstag'
  }
  }
  console.log(getProgramme(Woche.DONNERSTAG));

Bildbeschreibung hier einfügen

Dies ist das Ende dieses Artikels zum Verständnis von TypeScript-Datentypen. Weitere Informationen zu TypeScript-Datentypen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Beispielcode mit Typescript in Vue
  • Verstehen Sie Funktionen und Klassen in TypeScript?
  • Verstehen Sie Schnittstellen und Generika in TypeScript?
  • TypeScript-Aufzählungstyp
  • Einführung in die grundlegenden TypeScript-Typen
  • Detaillierte Erklärung zur Verwendung von TypeScript-Typanmerkungen

<<:  Schritte zur Linux-Bridge-Methode zum Überbrücken zweier virtueller VirtualBox-Netzwerke

>>:  So erstellen Sie schnell MySQL Master-Slave mit mysqlreplicate

Artikel empfehlen

Vue3+Skript-Setup+ts+Vite+Volar-Projekt

Inhaltsverzeichnis Erstellen Sie ein Vue + TS-Pro...

Tutorial zur Installation der PyTorch-Entwicklungsumgebung unter Windows

Anaconda-Installation Anaconda ist ein Softwarepa...

Erläuterung des MySQL-Abfragebeispiels anhand instanziierter Objektparameter

Dieser Artikel stellt vor, wie Sie durch Instanzi...

So ändern Sie die Zeichensatzkodierung in MySQL 5.5/5.6 unter Linux auf UTF8

1. Melden Sie sich bei MySQL an und verwenden Sie...

JS realisiert den Effekt des Bildwasserfallflusses

In diesem Artikel wird der spezifische JS-Code zu...

Tutorial zum schnellen Bereitstellen von Clickhouse mit Docker-Compose

ClickHouse ist ein spaltenorientiertes Open-Sourc...

Spezifische Verwendung des Ausnahmefilters Exceptionfilter in nestjs

Wenn wir über den Ausnahmefilter von Nestjs sprec...

JS implementiert Layoutkonvertierung in Animation

Beim Schreiben von Animationen mit JS wird häufig...

Implementierung der Vue-Einzeldateikomponente

Ich habe kürzlich über Vue gelesen. Ich habe eine...

Beispiele für die Verwendung von React Ref

Inhaltsverzeichnis Was ist ref So verwenden Sie r...