Apprentissage de TypeScript - Casting Types
Je suis nouveau sur TypeScript et je joue avec les différentes fonctionnalités du langage. Voici un exemple de code sur lequel j'ai travaillé pendant l'un des nombreux cours en ligne.
J'ai des problèmes pour que l'héritage et la surcharge fonctionnent correctement. tout au long du code, j'utilise une voiture de classe Auto de base et un camion hors camion de classe enfant.
J'essaie de voir s'il est possible de convertir la voiture en camion et d'accéder à la fonction spécialisée HonkHorn. J'essaie également de convertir un camion en auto et d'accéder à la fonction de base pour WriteDetails.
Dans les deux cas, il semble que les objets restent de leur type d'origine. Donc typecast4.HonkHorn(); génère une erreur d'exécution:
UnCaught TypeError: typecast4.HonkHorn n'est pas une fonction.
Toute tentative de restauration de Truck to Auto entraînera toujours le remplacement spécialisé pour WriteDetails à appeler. Le code de casting se trouve tout en bas de l'échantillon.
Quelqu'un peut-il m'aider à comprendre pourquoi cela se produit?
Merci d'avance!
// defines the structure of auto options
interface IAutoOptions{
engine: Engine,
color: string,
price: number,
year: number
}
// extends autooptions with truck specific options
interface ITruckOptions extends IAutoOptions{
fourbyfour: boolean,
bedlength: string
}
// defines the structure of engines
interface IEngine {
enginetype: string;
horsepower: number;
hydraulicpump?: string
start(warmuptime: number, callback: () => void): void;
stop(): void;
}
// the engine class must implement the members as specified in the IEngine interface
class Engine implements IEngine{
enginetype: string;
horsepower: number;
hydraulicpump?: string; //optional hydraulic parameter
constructor(enginetype: string, horsepower: number, hydraulicpump? : string ) {
this.enginetype = enginetype;
this.horsepower = horsepower;
if (!(hydraulicpump)){
hydraulicpump = "Not Available"; //if no hydraulic parameter is provided we set it to "Not Available"
}
this.hydraulicpump = hydraulicpump;
}
// start requires a callback parameter which accepts a specialized callback object/function that accepts and returns nothing
// by accepting a callback object/function that code can be seperated off, which makes this class much cleaner and organized
start(warmuptime: number, callback: () => void) {
window.setTimeout(() => {
callback();
document.write(this.enginetype + " has started!" + "</br>");
}, warmuptime);
};
stop() {
document.write(this.enginetype + " has stopped!" + "</br>");
};
}
// base class for autos
class Auto {
engine: Engine;
color: string;
price: number;
year: number;
constructor(options: IAutoOptions) {
this.engine = options.engine;
this.color = options.color;
this.price = options.price;
this.year = options.year;
}
//WriteDetails contains the base details for each Auto which can be overriden in specialized classes
WriteDetails() {
document.write("Color: " + this.color + "</br>");
document.write("Year: " + this.year + "</br>");
document.write("Price: $" + this.price + "</br>");
document.write("Engine Type: " + this.engine.enginetype + "</br>");
document.write("Horse Power: " + this.engine.horsepower + "</br>");
document.write("Hydraulic Pump: " + this.engine.hydraulicpump + "</br>");
};
}
// Truck extends Auto to add Truck specific fields and function overloads
// Note that it does not contains all the base fields from Auto thus making it much smaller and cleaner
// Only truck specific code is added.
class Truck extends Auto{
fourbyfour: boolean;
bedlength: string;
constructor(options: ITruckOptions) {
// to overload the constructor super() must to be called, which calls the base class constructor in Auto
super(options);
this.bedlength = options.bedlength;
this.fourbyfour = options.fourbyfour;
}
// WriteDetails overrides the Auto WriteDetails, but first calls the base WriteDetails function
WriteDetails() {
super.WriteDetails();
document.write("Bed Length: " + this.bedlength + "</br>");
document.write("4x4 : " + this.fourbyfour + "</br>");
};
HonkHorn() {
document.write("Honk Honk!</br>");
}
}
// below is one of the notations to define a callback object that can be used to call
// the start function on the Engine class
// this callback function has encapsulated car specific logic for starting the engine
// much cleaner than putting the specialized code in the Auto class
var CarEngineStart = () => {
document.write("<h1>Starting Car</h1>");
document.write("Check Tires!" + "</br>");
document.write("Fasten Seatbelts!" + "</br>");
document.write("Check Mirrors!" + "</br>");
document.write("Starting Engine!" + "</br>");
};
// yet another way to define a callback object (function)
// this callback function has encapsulated truck specific logic for starting the engine
// much cleaner than putting the specialized code in the Auto or Truck classes
function TruckEngineStart() {
document.write("<h1>Starting Truck</h1>");
document.write("Check Tires!" + "</br>");
document.write("Check if load is properly fastened!" + "</br>");
document.write("Check timesheet!" + "</br>");
document.write("Fasten Seatbelts!" + "</br>");
document.write("Check Mirrors!" + "</br>");
document.write("Starting Engine!" + "</br>");
}
// ###################### Start logic
// creating an engine
var carengine = new Engine("V8", 300);
// creating another engine, but now providing the optional hydraulicpump parameter
var truckengine = new Engine("V12", 1000, "Flexpump 3000");
var car = new Auto({
engine: carengine,
color: 'Blue',
price: 20000,
year: 2017
});
var truck = new Truck({
engine: truckengine,
color: 'Red',
price: 80000,
year: 2015,
bedlength: 'Long Bed',
fourbyfour: true
});
document.write("<h1>Car Details</h1>");
car.WriteDetails();
document.write("<h1>Truck Details</h1>");
truck.WriteDetails();
truck.engine.start(10000, TruckEngineStart);
car.engine.start(5000, CarEngineStart);
window.setTimeout(() => {
document.write("<h1>Stopping Car</h1>");
car.engine.stop();
document.write("<h1>Stopping Truck</h1>");
truck.engine.stop();
}, 15000);
document.write("<h1>Casting Autos</h1>");
document.write("<h2>Auto WriteDetails for Car</h2>");
var typecast: Auto;
typecast = car;
typecast.WriteDetails();
document.write("<h2>Truck WriteDetails for Car with type cast</h2>");
var typecast4: Truck;
typecast4 = <Truck>car;
typecast4.HonkHorn();
typecast4.WriteDetails();
document.write("<h2>Auto WriteDetails for Truck without type cast</h2>");
var typecast2: Auto;
typecast2 = truck;
typecast2.WriteDetails();
document.write("<h2>Auto WriteDetails for Truck with type cast</h2>");
var typecast3: Auto;
typecast3 = <Auto>truck;
typecast3.WriteDetails();
Il n'y a pas de transtypage de type dans TypeScript, mais uniquement des assertions de type. C'est pour la vérification de type et cela n'influencera pas le comportement d'exécution.
Par exemple, l'assertion de type:
car as Truck // older syntax syntax: <Truck> car
indique au compilateur que car est de type Truck, mais qu'il n'influencera pas le code JS généré.
TypeScript vous permet de remplacer sa vue inférée et analysée des types comme vous le souhaitez. Cela se fait par un mécanisme appelé "assertion de type". L'affirmation de type de TypeScript consiste simplement à dire au compilateur que vous connaissez les types mieux que lui et qu'il ne devrait pas vous deviner.
Assertion de type vs Casting
La raison pour laquelle elle n'est pas appelée "conversion de type" est que la conversion implique généralement une sorte de support d'exécution. Cependant, les assertions de type sont purement une construction au moment de la compilation et un moyen pour vous de fournir des conseils au compilateur sur la façon dont vous voulez que votre code soit analysé.
https://basarat.gitbooks.io/TypeScript/content/docs/types/type-assertion.html