Definieren von Typen in Typoskript

Question

Ich bin brandneu in der Welt des Typoskripts und Webdesigns. Um meinen Fuß in die Tür zu setzen, schreibe ich ein Programm, das beim Laden und Nachladen ein zufälliges Auto ausgibt.

Anzahl der Türen: Ein Beispiel für die Ausgabe der folgenden wäre 4 Anzahl der Zylinder: 4 Art der Übertragung: FWD Art der Karosserie: SUV

Es gibt andere Ergebnisse, die Sie könnten, aber Dies ist nur ein Beispiel für das Layout.

Der Code, den ich in meiner Typoskript-Datei unter:

class Car { 
    car: string; 
    door: number; 
    cylinder: number; 
    transmission: string; 
    body: string; 
    element: HTMLElement; 

    constructor(door: number, cylinder: number, transmission: string, body: string) { 
     this.car = door + " " + cylinder + " " + transmission + " " + body; 
    } 

} 

interface FullCar { 
    door: number; 
    cylinder: number; 
    transmission: string; 
    body: string; 
} 

function randomCarGenerator(car: FullCar) { 

    return "Number of Doors: " + car.door + "Number of Cylinders: " + car.cylinder + "Type of Transmission: " + car.transmission + "Type of Car Body: " + car.body; 

} 

var randomBody = ['Coupe', 'Sedan', 'Wagon', 'SUV']; 
var randomDoor1 = [2, 4, 5]; 
var randomDoor2 = [2, 4]; 
var randomCylinder = [2, 3, 4]; 
var randomTransmission1 = ['AWD', 'Standard', 'FWD']; 
var randomTransmission2 = ['Standard', 'FWD']; 

var body = randomBody[Math.floor(Math.random() * randomBody.length)]; 
if (body == 'Coupe') { 
    var door = 2; 
    var cylinder = randomCylinder[Math.floor(Math.random() * randomCylinder.length)]; 
    var transmission = randomTransmission2[Math.floor(Math.random() * randomTransmission2.length)]; 

    var car = new Car(door, cylinder, transmission, body); 
    document.body.innerHTML = randomCarGenerator(car); 
} 
else if (body == 'Sedan' || body == 'Wagon') { 
    var door = randomDoor1[Math.floor(Math.random() * randomDoor1.length)]; 
    var cylinder = randomCylinder[Math.floor(Math.random() * randomCylinder.length)]; 
    var transmission = randomTransmission1[Math.floor(Math.random() * randomTransmission1.length)]; 

    var car = new Car(door, cylinder, transmission, body); 
    document.body.innerHTML = randomCarGenerator(car); 
} 
else { 
    var door = randomDoor2[Math.floor(Math.random() * randomDoor2.length)]; 
    var cylinder = randomCylinder[Math.floor(Math.random() * randomCylinder.length)]; 
    var transmission = randomTransmission1[Math.floor(Math.random() * randomTransmission1.length)]; 

    var car = new Car(door, cylinder, transmission, body); 
    document.body.innerHTML = randomCarGenerator(car); 

} 

Als ich dies ausführen, um das Ergebnis, die ich erhalte,

Anzahl der Türen: undefined Anzahl der Zylinder undefined etc etc

Meine Frage: Gibt es ein Problem damit, wie ich die Deklaration der Werte deklariere? Oder gibt es ein ganz anderes Thema, das ich nicht sehe?

Answer 1

class Car { 
    car: string; 
    door: number; 
    cylinder: number; 
    transmission: string; 
    body: string; 
    element: HTMLElement; 

    constructor(door: number, cylinder: number, transmission: string, body: string) { 
     this.car = door + " " + cylinder + " " + transmission + " " + body; 
    } 

} 

Sie hier:

1. definieren eine Reihe von Feldern auf der Klasse
2. Nehmen Sie in Konstruktorparameter mit dem gleichen Namen
3. Stellen Sie eine der Klassenfelder
4. Lassen Sie alle andere Klassenfelder nicht initialisiert

Dann in diesem fu nction

function randomCarGenerator(car: FullCar) { 

    return "Number of Doors: " + car.door + "Number of Cylinders: " + car.cylinder + "Type of Transmission: " + car.transmission + "Type of Car Body: " + car.body; 

} 

Sie haben alle Felder gelesen, die Sie nie initialisiert haben.

Sie können dieses Problem beheben, indem Sie die Felder zu initialisieren:

class Car { 
    car: string; 
    door: number; 
    cylinder: number; 
    transmission: string; 
    body: string; 
    element: HTMLElement; 

    constructor(door: number, cylinder: number, transmission: string, body: string) { 
     this.car = door + " " + cylinder + " " + transmission + " " + body; 
     this.door = door; 
     this.cylinder = cylinder; 
     // etc for the other fields 
    } 

} 

Eine schöne syntaktische Abkürzung in Typoskript ist, dass Sie einen Zugriffsmodifizierer verwenden können (zB public) diese Felder automatisch zu machen:

class Car { 
    car: string; 
    // Unused, not sure what you intend to do with this one 
    element: HTMLElement; 

    constructor(public door: number, public cylinder: number, public transmission: string, public body: string) { 
     this.car = door + " " + cylinder + " " + transmission + " " + body; 
    } 

}