TypeScript
Types de base TypeScript
Recherche…
Syntaxe
- let variableName: VariableType;
- function functionName (parameterName: VariableType, parameterWithDefault: VariableType = ParameterDefault, optionalParameter ?: VariableType, ... variardicParameter: VariableType []): ReturnType {/*...*/};
Booléen
Un booléen représente le type de données le plus élémentaire dans TypeScript, dans le but d'attribuer des valeurs true / false.
// set with initial value (either true or false)
let isTrue: boolean = true;
// defaults to 'undefined', when not explicitely set
let unsetBool: boolean;
// can also be set to 'null' as well
let nullableBool: boolean = null;
Nombre
Comme JavaScript, les nombres sont des valeurs à virgule flottante.
let pi: number = 3.14; // base 10 decimal by default
let hexadecimal: number = 0xFF; // 255 in decimal
ECMAScript 2015 permet les binaires et les octaux.
let binary: number = 0b10; // 2 in decimal
let octal: number = 0o755; // 493 in decimal
Chaîne
Type de données textuelles:
let singleQuotes: string = 'single';
let doubleQuotes: string = "double";
let templateString: string = `I am ${ singleQuotes }`; // I am single
Tableau
Un tableau de valeurs:
let threePigs: number[] = [1, 2, 3];
let genericStringArray: Array<string> = ['first', '2nd', '3rd'];
Enum
Un type pour nommer un ensemble de valeurs numériques:
Les valeurs numériques sont par défaut à 0:
enum Day { Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday };
let bestDay: Day = Day.Saturday;
Définir un numéro de départ par défaut:
enum TenPlus { Ten = 10, Eleven, Twelve }
ou attribuer des valeurs:
enum MyOddSet { Three = 3, Five = 5, Seven = 7, Nine = 9 }
Tout
En cas de doute sur un type, any est disponible:
let anything: any = 'I am a string';
anything = 5; // but now I am the number 5
Vide
Si vous n'avez pas de type du tout, couramment utilisé pour les fonctions qui ne renvoient rien:
function log(): void {
console.log('I return nothing');
}
void types de void Ne peuvent être assignés à null ou undefined .
Tuple
Type de tableau avec des types connus et éventuellement différents:
let day: [number, string];
day = [0, 'Monday']; // valid
day = ['zero', 'Monday']; // invalid: 'zero' is not numeric
console.log(day[0]); // 0
console.log(day[1]); // Monday
day[2] = 'Saturday'; // valid: [0, 'Saturday']
day[3] = false; // invalid: must be union type of 'number | string'
Types dans les arguments de fonction et la valeur de retour. Nombre
Lorsque vous créez une fonction dans TypeScript, vous pouvez spécifier le type de données des arguments de la fonction et le type de données pour la valeur de retour
Exemple:
function sum(x: number, y: number): number {
return x + y;
}
Ici, la syntaxe x: number, y: number signifie que la fonction peut accepter deux arguments x et y et qu'ils ne peuvent être que des nombres et (...): number { signifie que la valeur renvoyée ne peut être qu'un nombre
Usage:
sum(84 + 76) // will be return 160
Remarque:
Vous ne pouvez pas le faire
function sum(x: string, y: string): number {
return x + y;
}
ou
function sum(x: number, y: number): string {
return x + y;
}
il recevra les erreurs suivantes:
error TS2322: Type 'string' is not assignable to type 'number' et l' error TS2322: Type 'number' is not assignable to type 'string' respectivement
Types dans les arguments de fonction et la valeur de retour. Chaîne
Exemple:
function hello(name: string): string {
return `Hello ${name}!`;
}
Ici, le name: string la syntaxe name: string signifie que la fonction peut accepter un argument de name et que cet argument ne peut être que string et (...): string { signifie que la valeur renvoyée ne peut être qu’une chaîne.
Usage:
hello('StackOverflow Documentation') // will be return Hello StackOverflow Documentation!
Types littéraux de chaîne
Les types littéraux de chaîne vous permettent de spécifier la valeur exacte qu'une chaîne peut avoir.
let myFavoritePet: "dog";
myFavoritePet = "dog";
Toute autre chaîne donnera une erreur.
// Error: Type '"rock"' is not assignable to type '"dog"'.
// myFavoritePet = "rock";
Avec les alias de type et les types d’union, vous obtenez un comportement semblable à un enum.
type Species = "cat" | "dog" | "bird";
function buyPet(pet: Species, name: string) : Pet { /*...*/ }
buyPet(myFavoritePet /* "dog" as defined above */, "Rocky");
// Error: Argument of type '"rock"' is not assignable to parameter of type "'cat' | "dog" | "bird". Type '"rock"' is not assignable to type '"bird"'.
// buyPet("rock", "Rocky");
Les types de littéral de chaîne peuvent être utilisés pour distinguer les surcharges.
function buyPet(pet: Species, name: string) : Pet;
function buyPet(pet: "cat", name: string): Cat;
function buyPet(pet: "dog", name: string): Dog;
function buyPet(pet: "bird", name: string): Bird;
function buyPet(pet: Species, name: string) : Pet { /*...*/ }
let dog = buyPet(myFavoritePet /* "dog" as defined above */, "Rocky");
// dog is from type Dog (dog: Dog)
Ils fonctionnent bien pour les gardes de type défini par l'utilisateur.
interface Pet {
species: Species;
eat();
sleep();
}
interface Cat extends Pet {
species: "cat";
}
interface Bird extends Pet {
species: "bird";
sing();
}
function petIsCat(pet: Pet): pet is Cat {
return pet.species === "cat";
}
function petIsBird(pet: Pet): pet is Bird {
return pet.species === "bird";
}
function playWithPet(pet: Pet){
if(petIsCat(pet)) {
// pet is now from type Cat (pet: Cat)
pet.eat();
pet.sleep();
} else if(petIsBird(pet)) {
// pet is now from type Bird (pet: Bird)
pet.eat();
pet.sing();
pet.sleep();
}
}
Exemple de code complet
let myFavoritePet: "dog";
myFavoritePet = "dog";
// Error: Type '"rock"' is not assignable to type '"dog"'.
// myFavoritePet = "rock";
type Species = "cat" | "dog" | "bird";
interface Pet {
species: Species;
name: string;
eat();
walk();
sleep();
}
interface Cat extends Pet {
species: "cat";
}
interface Dog extends Pet {
species: "dog";
}
interface Bird extends Pet {
species: "bird";
sing();
}
// Error: Interface 'Rock' incorrectly extends interface 'Pet'. Types of property 'species' are incompatible. Type '"rock"' is not assignable to type '"cat" | "dog" | "bird"'. Type '"rock"' is not assignable to type '"bird"'.
// interface Rock extends Pet {
// type: "rock";
// }
function buyPet(pet: Species, name: string) : Pet;
function buyPet(pet: "cat", name: string): Cat;
function buyPet(pet: "dog", name: string): Dog;
function buyPet(pet: "bird", name: string): Bird;
function buyPet(pet: Species, name: string) : Pet {
if(pet === "cat") {
return {
species: "cat",
name: name,
eat: function () {
console.log(`${this.name} eats.`);
}, walk: function () {
console.log(`${this.name} walks.`);
}, sleep: function () {
console.log(`${this.name} sleeps.`);
}
} as Cat;
} else if(pet === "dog") {
return {
species: "dog",
name: name,
eat: function () {
console.log(`${this.name} eats.`);
}, walk: function () {
console.log(`${this.name} walks.`);
}, sleep: function () {
console.log(`${this.name} sleeps.`);
}
} as Dog;
} else if(pet === "bird") {
return {
species: "bird",
name: name,
eat: function () {
console.log(`${this.name} eats.`);
}, walk: function () {
console.log(`${this.name} walks.`);
}, sleep: function () {
console.log(`${this.name} sleeps.`);
}, sing: function () {
console.log(`${this.name} sings.`);
}
} as Bird;
} else {
throw `Sorry we don't have a ${pet}. Would you like to buy a dog?`;
}
}
function petIsCat(pet: Pet): pet is Cat {
return pet.species === "cat";
}
function petIsDog(pet: Pet): pet is Dog {
return pet.species === "dog";
}
function petIsBird(pet: Pet): pet is Bird {
return pet.species === "bird";
}
function playWithPet(pet: Pet) {
console.log(`Hey ${pet.name}, let's play.`);
if(petIsCat(pet)) {
// pet is now from type Cat (pet: Cat)
pet.eat();
pet.sleep();
// Error: Type '"bird"' is not assignable to type '"cat"'.
// pet.type = "bird";
// Error: Property 'sing' does not exist on type 'Cat'.
// pet.sing();
} else if(petIsDog(pet)) {
// pet is now from type Dog (pet: Dog)
pet.eat();
pet.walk();
pet.sleep();
} else if(petIsBird(pet)) {
// pet is now from type Bird (pet: Bird)
pet.eat();
pet.sing();
pet.sleep();
} else {
throw "An unknown pet. Did you buy a rock?";
}
}
let dog = buyPet(myFavoritePet /* "dog" as defined above */, "Rocky");
// dog is from type Dog (dog: Dog)
// Error: Argument of type '"rock"' is not assignable to parameter of type "'cat' | "dog" | "bird". Type '"rock"' is not assignable to type '"bird"'.
// buyPet("rock", "Rocky");
playWithPet(dog);
// Output: Hey Rocky, let's play.
// Rocky eats.
// Rocky walks.
// Rocky sleeps.
Types d'intersection
Un type d'intersection combine le membre de deux types ou plus.
interface Knife {
cut();
}
interface BottleOpener{
openBottle();
}
interface Screwdriver{
turnScrew();
}
type SwissArmyKnife = Knife & BottleOpener & Screwdriver;
function use(tool: SwissArmyKnife){
console.log("I can do anything!");
tool.cut();
tool.openBottle();
tool.turnScrew();
}
const Enum
Un const Enum est identique à un Enum normal. Sauf que aucun objet n'est généré au moment de la compilation. Au lieu de cela, les valeurs littérales sont substituées là où le const Enum est utilisé.
// Typescript: A const Enum can be defined like a normal Enum (with start value, specifig values, etc.)
const enum NinjaActivity {
Espionage,
Sabotage,
Assassination
}
// Javascript: But nothing is generated
// Typescript: Except if you use it
let myFavoriteNinjaActivity = NinjaActivity.Espionage;
console.log(myFavoritePirateActivity); // 0
// Javascript: Then only the number of the value is compiled into the code
// var myFavoriteNinjaActivity = 0 /* Espionage */;
// console.log(myFavoritePirateActivity); // 0
// Typescript: The same for the other constant example
console.log(NinjaActivity["Sabotage"]); // 1
// Javascript: Just the number and in a comment the name of the value
// console.log(1 /* "Sabotage" */); // 1
// Typescript: But without the object none runtime access is possible
// Error: A const enum member can only be accessed using a string literal.
// console.log(NinjaActivity[myFavoriteNinjaActivity]);
Pour comparaison, un Enum normal
// Typescript: A normal Enum
enum PirateActivity {
Boarding,
Drinking,
Fencing
}
// Javascript: The Enum after the compiling
// var PirateActivity;
// (function (PirateActivity) {
// PirateActivity[PirateActivity["Boarding"] = 0] = "Boarding";
// PirateActivity[PirateActivity["Drinking"] = 1] = "Drinking";
// PirateActivity[PirateActivity["Fencing"] = 2] = "Fencing";
// })(PirateActivity || (PirateActivity = {}));
// Typescript: A normale use of this Enum
let myFavoritePirateActivity = PirateActivity.Boarding;
console.log(myFavoritePirateActivity); // 0
// Javascript: Looks quite similar in Javascript
// var myFavoritePirateActivity = PirateActivity.Boarding;
// console.log(myFavoritePirateActivity); // 0
// Typescript: And some other normale use
console.log(PirateActivity["Drinking"]); // 1
// Javascript: Looks quite similar in Javascript
// console.log(PirateActivity["Drinking"]); // 1
// Typescript: At runtime, you can access an normal enum
console.log(PirateActivity[myFavoritePirateActivity]); // "Boarding"
// Javascript: And it will be resolved at runtime
// console.log(PirateActivity[myFavoritePirateActivity]); // "Boarding"
