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

So ändern Sie das Kennwort von mysql5.7.20 unter Linux CentOS 7.4

Nach dem Upgrade von MySQL auf Version 5.7 wurde ...

Beispielcode für HTML-Framesets

Dieser Artikel stellt ein möglichst einfaches Fra...

Informationen zum Textumbruchproblem bei IE-Labels (LI)

Ich habe lange damit gekämpft und nach einiger Suc...

So verhindern Sie Event-Bubbling in JavaScript

Wir müssen darauf achten, dass die Eigenschaften ...

Vue implementiert Modal-Komponente basierend auf Teleport

Inhaltsverzeichnis 1. Lernen Sie Teleport kennen ...

Zusammenfassung der Lösung für den Webpack -v-Fehler von Vue

Xiaobai lernte Vue kennen, dann lernte er Webpack...

Manuelles Implementieren des Eingabefelds für den js-SMS-Bestätigungscode

Vorwort Dieser Artikel beschreibt eine allgemeine...

Interpretation und Verwendung verschiedener React-State-Manager

Zunächst müssen wir wissen, was ein Zustandsmanag...

Detaillierte Erklärung der CocosCreator MVC-Architektur

Überblick Dieser Artikel stellt die in Spieleclie...

3 Tipps, die Sie beim Erlernen von JavaScript kennen müssen

Inhaltsverzeichnis 1. Der magische Erweiterungsop...

Natives JS zur Implementierung der Dropdown-Box-Auswahlkomponente

In diesem Artikelbeispiel wird der spezifische JS...

Implementierung integrierter Module und benutzerdefinierter Module in Node.js

1. Commonjs Commonjs ist ein benutzerdefiniertes ...

Grundlegende Syntax des MySQL-Index

Ein Index ist eine sortierte Datenstruktur! Die F...