|
| 1 | +--- |
| 2 | +title: TypeScript pour les Développeurs Java/C# |
| 3 | +short: TS pour les Développeurs Java/C# |
| 4 | +layout: docs |
| 5 | +permalink: /docs/handbook/typescript-in-5-minutes-oop.html |
| 6 | +oneline: Apprenez TypeScript si vous avez un vécu avec les langages orientés objet |
| 7 | +--- |
| 8 | + |
| 9 | +TypeScript est un choix populaire pour les développeurs habitués aux autres langages à typage statique, comme le C# et le Java. |
| 10 | + |
| 11 | +Le système de types de TypeScript offre la plupart de ces bénéfices : meilleure complétion de code, détection d'erreurs plus précoce, communication plus claire entre les composantes de votre programme. |
| 12 | +TypeScript fournit plusieurs fonctionnalités familières à ces développeurs, mais il est intéressant de prendre un pas en arrière et apprendre comment le JavaScript (et par conséquent, TypeScript) diffère des langages orientés objet traditionnels. |
| 13 | +Comprendre ces différences vous permettra d'écrire du code JavaScript de meilleure qualité, et d'éviter les pièges communs dans lesquels les développeurs passant de C#/Java à TypeScript peuvent tomber. |
| 14 | + |
| 15 | +## Apprendre le JavaScript |
| 16 | + |
| 17 | +Si vous êtes déjà familier avec le JavaScript, mais vous êtes principalement un développeur Java ou C#, cette page d'introduction peut expliquer certaines idées fausses et pièges auxquels vous seriez susceptible. |
| 18 | +Certaines façons avec lesquelles TypeScript modélise les types sont très différentes du Java ou du C#. Il est important de s'en souvenir en apprenant TypeScript. |
| 19 | + |
| 20 | +Si vous êtes un développeur Java ou C#, et vous êtes nouveau à JavaScript en général, nous recommandons d'apprendre un peu de JavaScript _sans les types_ d'abord, afin de comprendre son comportement lors de l'exécution. |
| 21 | +Vu que TypeScript ne change pas comment votre code _s'exécute_, vous devrez quand même apprendre le JavaScript pour écrire du code qui fait réellement quelque chose ! |
| 22 | + |
| 23 | +Il est important de se rappeler que TypeScript utilise le même _runtime_ que le JavaScript, donc toute ressource sur comment accomplir un comportement particulier (conversion d'un string à un nombre, affichage d'une alerte, écriture d'un fichier, etc.) s'appliquera également sur TypeScript. |
| 24 | +Ne vous limitez pas à ce qui est spécifique à TypeScript ! |
| 25 | + |
| 26 | +## Repenser les classes |
| 27 | + |
| 28 | +Le C# et le Java sont ce qu'on pourrait appeler des langages à _POO obligatoire_. |
| 29 | +Dans ces langages, la _classe_ est l'unité basique d'organisation de code, ainsi que le conteneur de base de toutes les données _et_ de la logique à l'exécution. |
| 30 | +Obliger toute la fonctionnalité et toutes les données à être contenues dans des classes peut être un bon modèle de domaine pour certains problèmes, mais pas tous les domaines _doivent_ être représentés de cette façon. |
| 31 | + |
| 32 | +### Fonctions et données libres |
| 33 | + |
| 34 | +En JavaScript, les fonctions peuvent être placées n'importe où, et les données peuvent être librement relayées sans être cantonnées à une `class` ou une `struct`. |
| 35 | +Cette flexibilité est extrêmement puissante. |
| 36 | +Ces fonctions "libres" (celles qui ne sont pas associées à une classe), qui travaillent sur des données sans hiérarchie orientée objet, ont tendance à être le modèle préféré pour écrire un programme en JavaScript. |
| 37 | + |
| 38 | +### Classes statiques |
| 39 | + |
| 40 | +De plus, certaines structures du C# et du Java, comme les singletons et les classes statiques, ne sont pas nécessaires en TypeScript. |
| 41 | + |
| 42 | +## POO en TypeScript |
| 43 | + |
| 44 | +Cela dit, vous pouvez quand même utiliser des classes si vous le souhaitez ! |
| 45 | +Certains problèmes ont une solution qui correspond à l'approche POO classique, et la capacité de TypeScript à supporter les classes JavaScript rendront ces solutions encore plus puissantes. |
| 46 | +TypeScript supporte plusieurs patterns comme l'implémentation d'interfaces, l'héritage, et les méthodes statiques. |
| 47 | + |
| 48 | +Nous couvrirons les classes plus tard dans ce guide. |
| 49 | + |
| 50 | +## Repenser les types |
| 51 | + |
| 52 | +La façon dont TypeScript comprend la notion de _type_ est très différente du C# et du Java. |
| 53 | +Explorons certaines différences. |
| 54 | + |
| 55 | +### Systèmes de Types Nominaux Réifiés |
| 56 | + |
| 57 | +En C# ou Java, toute valeur a exactement un type - `null`, une primitive, ou un type de classe. |
| 58 | +Nous pouvons appeler des méthodes comme `value.GetType()` ou `value.getClass()` pour obtenir le type exact à l'exécution. |
| 59 | +La définition de ce type réside dans une certaine classe sous un certain nom, et nous n'avons pas le droit d'utiliser deux classes à formes similaires de façon interchangeable, sauf si une relation explicite d'héritage existe ou une interface en commun est implémentée. |
| 60 | + |
| 61 | +Ces aspects décrivent un système de types _réifié et nominal_. |
| 62 | +Les types qu'on écrit sont présents à l'exécution, et ils sont liés à eux via leurs déclarations, pas leurs structures. |
| 63 | + |
| 64 | +### Types as Sets |
| 65 | + |
| 66 | +En C# ou Java, cela fait sens de faire une correspondance entre un type à l'exécution et sa déclarations à la compilation. |
| 67 | + |
| 68 | +En TypeScript, il vaut mieux de penser aux types comme des _ensembles de valeurs_ qui partagent quelque chose en commun. |
| 69 | +Parce que les types ne sont que des ensembles, une valeur peut appartenir à _plusieurs_ ensembles en même temps. |
| 70 | + |
| 71 | +Une fois que vous pensez aux types en tant qu'ensembles, certaines opérations deviennent naturelles. |
| 72 | +Par exemple, en C#, il est bizarre de transmettre une valeur qui est _soit_ un `string` ou `int`, parce qu'il n'existe aucun type les représentant tous les deux. |
| 73 | + |
| 74 | +In TypeScript, ce procédé devient naturel quand vous pensez aux types en tant qu'ensembles. |
| 75 | +Comment décrire une valeur qui appartient, soit à l'ensemble des `string`, soit à celui des `number` ? |
| 76 | +Elle appartient simplement à l' _union_ de ces valeurs : `string | number`. |
| 77 | + |
| 78 | +TypeScript provides a number of mechanisms to work with types in a set-theoretic way, and you'll find them more intuitive if you think of types as sets. |
| 79 | + |
| 80 | +### Erased Structural Types |
| 81 | + |
| 82 | +In TypeScript, objects are _not_ of a single exact type. |
| 83 | +For example, if we construct an object that satisfies an interface, we can use that object where that interface is expected even though there was no declarative relationship between the two. |
| 84 | + |
| 85 | +```ts twoslash |
| 86 | +interface Pointlike { |
| 87 | + x: number; |
| 88 | + y: number; |
| 89 | +} |
| 90 | +interface Named { |
| 91 | + name: string; |
| 92 | +} |
| 93 | + |
| 94 | +function logPoint(point: Pointlike) { |
| 95 | + console.log("x = " + point.x + ", y = " + point.y); |
| 96 | +} |
| 97 | + |
| 98 | +function logName(x: Named) { |
| 99 | + console.log("Hello, " + x.name); |
| 100 | +} |
| 101 | + |
| 102 | +const obj = { |
| 103 | + x: 0, |
| 104 | + y: 0, |
| 105 | + name: "Origin", |
| 106 | +}; |
| 107 | + |
| 108 | +logPoint(obj); |
| 109 | +logName(obj); |
| 110 | +``` |
| 111 | + |
| 112 | +TypeScript's type system is _structural_, not nominal: We can use `obj` as a `Pointlike` because it has `x` and `y` properties that are both numbers. |
| 113 | +The relationships between types are determined by the properties they contain, not whether they were declared with some particular relationship. |
| 114 | + |
| 115 | +TypeScript's type system is also _not reified_: There's nothing at runtime that will tell us that `obj` is `Pointlike`. |
| 116 | +In fact, the `Pointlike` type is not present _in any form_ at runtime. |
| 117 | + |
| 118 | +Going back to the idea of _types as sets_, we can think of `obj` as being a member of both the `Pointlike` set of values and the `Named` set of values. |
| 119 | + |
| 120 | +### Consequences of Structural Typing |
| 121 | + |
| 122 | +OOP programmers are often surprised by two particular aspects of structural typing. |
| 123 | + |
| 124 | +#### Empty Types |
| 125 | + |
| 126 | +The first is that the _empty type_ seems to defy expectation: |
| 127 | + |
| 128 | +```ts twoslash |
| 129 | +class Empty {} |
| 130 | + |
| 131 | +function fn(arg: Empty) { |
| 132 | + // do something? |
| 133 | +} |
| 134 | + |
| 135 | +// No error, but this isn't an 'Empty' ? |
| 136 | +fn({ k: 10 }); |
| 137 | +``` |
| 138 | + |
| 139 | +TypeScript determines if the call to `fn` here is valid by seeing if the provided argument is a valid `Empty`. |
| 140 | +It does so by examining the _structure_ of `{ k: 10 }` and `class Empty { }`. |
| 141 | +We can see that `{ k: 10 }` has _all_ of the properties that `Empty` does, because `Empty` has no properties. |
| 142 | +Therefore, this is a valid call! |
| 143 | + |
| 144 | +This may seem surprising, but it's ultimately a very similar relationship to one enforced in nominal OOP languages. |
| 145 | +A subclass cannot _remove_ a property of its base class, because doing so would destroy the natural subtype relationship between the derived class and its base. |
| 146 | +Structural type systems simply identify this relationship implicitly by describing subtypes in terms of having properties of compatible types. |
| 147 | + |
| 148 | +#### Identical Types |
| 149 | + |
| 150 | +Another frequent source of surprise comes with identical types: |
| 151 | + |
| 152 | +```ts |
| 153 | +class Car { |
| 154 | + drive() { |
| 155 | + // hit the gas |
| 156 | + } |
| 157 | +} |
| 158 | +class Golfer { |
| 159 | + drive() { |
| 160 | + // hit the ball far |
| 161 | + } |
| 162 | +} |
| 163 | + |
| 164 | +// No error? |
| 165 | +let w: Car = new Golfer(); |
| 166 | +``` |
| 167 | + |
| 168 | +Again, this isn't an error because the _structures_ of these classes are the same. |
| 169 | +While this may seem like a potential source of confusion, in practice, identical classes that shouldn't be related are not common. |
| 170 | + |
| 171 | +We'll learn more about how classes relate to each other in the Classes chapter. |
| 172 | + |
| 173 | +### Reflection |
| 174 | + |
| 175 | +OOP programmers are accustomed to being able to query the type of any value, even a generic one: |
| 176 | + |
| 177 | +```csharp |
| 178 | +// C# |
| 179 | +static void LogType<T>() { |
| 180 | + Console.WriteLine(typeof(T).Name); |
| 181 | +} |
| 182 | +``` |
| 183 | + |
| 184 | +Because TypeScript's type system is fully erased, information about e.g. the instantiation of a generic type parameter is not available at runtime. |
| 185 | + |
| 186 | +JavaScript does have some limited primitives like `typeof` and `instanceof`, but remember that these operators are still working on the values as they exist in the type-erased output code. |
| 187 | +For example, `typeof (new Car())` will be `"object"`, not `Car` or `"Car"`. |
| 188 | + |
| 189 | +## Next Steps |
| 190 | + |
| 191 | +This was a brief overview of the syntax and tools used in everyday TypeScript. From here, you can: |
| 192 | + |
| 193 | +- Read the full Handbook [from start to finish](/docs/handbook/intro.html) (30m) |
| 194 | +- Explore the [Playground examples](/play#show-examples) |
0 commit comments