[{"data":1,"prerenderedAt":652},["ShallowReactive",2],{"page-\u002Fts\u002Fpourquoi-typescript":3,"pieces-ts":608,"autour-\u002Fts\u002Fpourquoi-typescript":633,"prerequis-\u002Fts\u002Fpourquoi-typescript":638,"plan-ts":641},{"id":4,"title":5,"body":6,"description":578,"extension":579,"ligne":175,"meta":580,"motsCles":581,"navigation":105,"niveau":584,"path":585,"prerequis":586,"ressources":588,"seo":600,"sources":601,"stem":606,"__hash__":607},"docs\u002Fts\u002F01.pourquoi-typescript.md","Pourquoi TypeScript",{"type":7,"value":8,"toc":566},"minimark",[9,14,32,36,40,140,147,150,154,165,168,171,245,255,259,266,331,334,338,355,361,367,371,381,398,401,405,408,429,436,452,461,464,468,471,479,482,485,503,509,513,524,527,531,562],[10,11,13],"h2",{"id":12},"ce-que-tu-vas-apprendre","Ce que tu vas apprendre",[15,16,17,21,29],"ul",{},[18,19,20],"li",{},"Ce qu'est TypeScript et le problème qu'il résout.",[18,22,23,24,28],{},"Comment l'essayer sans rien installer, puis avec ",[25,26,27],"code",{},"tsc",".",[18,30,31],{},"Comment lire un message d'erreur de type.",[10,33,35],{"id":34},"une-erreur-que-javascript-laisse-passer","Une erreur que JavaScript laisse passer",[37,38,39],"p",{},"Voici une fonction JavaScript pour un site de recettes.",[41,42,47],"pre",{"className":43,"code":44,"language":45,"meta":46,"style":46},"language-js shiki shiki-themes github-light-default github-dark-default github-dark-default","function totalPersonnes(parts, invites) {\n  return parts + invites\n}\n\nconsole.log(totalPersonnes(4, \"2\")) \u002F\u002F \"42\"\n","js","",[25,48,49,79,94,100,107],{"__ignoreMap":46},[50,51,54,58,62,66,70,73,76],"span",{"class":52,"line":53},"line",1,[50,55,57],{"class":56},"sOnC1","function",[50,59,61],{"class":60},"syCW7"," totalPersonnes",[50,63,65],{"class":64},"scfrF","(",[50,67,69],{"class":68},"sIXEE","parts",[50,71,72],{"class":64},", ",[50,74,75],{"class":68},"invites",[50,77,78],{"class":64},") {\n",[50,80,82,85,88,91],{"class":52,"line":81},2,[50,83,84],{"class":56},"  return",[50,86,87],{"class":64}," parts ",[50,89,90],{"class":56},"+",[50,92,93],{"class":64}," invites\n",[50,95,97],{"class":52,"line":96},3,[50,98,99],{"class":64},"}\n",[50,101,103],{"class":52,"line":102},4,[50,104,106],{"emptyLinePlaceholder":105},true,"\n",[50,108,110,113,116,118,121,123,127,129,133,136],{"class":52,"line":109},5,[50,111,112],{"class":64},"console.",[50,114,115],{"class":60},"log",[50,117,65],{"class":64},[50,119,120],{"class":60},"totalPersonnes",[50,122,65],{"class":64},[50,124,126],{"class":125},"s5iOY","4",[50,128,72],{"class":64},[50,130,132],{"class":131},"shWOn","\"2\"",[50,134,135],{"class":64},")) ",[50,137,139],{"class":138},"sd6ml","\u002F\u002F \"42\"\n",[37,141,142,143,146],{},"Tu voulais 6, tu obtiens la chaîne ",[25,144,145],{},"\"42\"",". JavaScript ne t'a rien dit : il a collé les deux valeurs.",[37,148,149],{},"L'erreur n'apparaît qu'à l'exécution, parfois chez un visiteur. C'est ce que TypeScript veut éviter.",[10,151,153],{"id":152},"ce-que-typescript-ajoute","Ce que TypeScript ajoute",[37,155,156,160,161,164],{},[157,158,159],"strong",{},"TypeScript"," est JavaScript auquel on ajoute des types. Un ",[157,162,163],{},"type"," décrit la nature d'une valeur : un nombre, du texte, une liste.",[37,166,167],{},"Tout code JavaScript valide est déjà du TypeScript valide. Tu ajoutes des types petit à petit.",[37,169,170],{},"Reprenons la fonction avec des types :",[41,172,176],{"className":173,"code":174,"language":175,"meta":46,"style":46},"language-ts shiki shiki-themes github-light-default github-dark-default github-dark-default","function totalPersonnes(parts: number, invites: number): number {\n  return parts + invites\n}\n\ntotalPersonnes(4, \"2\")\n","ts",[25,177,178,212,222,226,230],{"__ignoreMap":46},[50,179,180,182,184,186,188,191,194,196,198,200,202,205,207,209],{"class":52,"line":53},[50,181,57],{"class":56},[50,183,61],{"class":60},[50,185,65],{"class":64},[50,187,69],{"class":68},[50,189,190],{"class":56},":",[50,192,193],{"class":125}," number",[50,195,72],{"class":64},[50,197,75],{"class":68},[50,199,190],{"class":56},[50,201,193],{"class":125},[50,203,204],{"class":64},")",[50,206,190],{"class":56},[50,208,193],{"class":125},[50,210,211],{"class":64}," {\n",[50,213,214,216,218,220],{"class":52,"line":81},[50,215,84],{"class":56},[50,217,87],{"class":64},[50,219,90],{"class":56},[50,221,93],{"class":64},[50,223,224],{"class":52,"line":96},[50,225,99],{"class":64},[50,227,228],{"class":52,"line":102},[50,229,106],{"emptyLinePlaceholder":105},[50,231,232,234,236,238,240,242],{"class":52,"line":109},[50,233,120],{"class":60},[50,235,65],{"class":64},[50,237,126],{"class":125},[50,239,72],{"class":64},[50,241,132],{"class":131},[50,243,244],{"class":64},")\n",[37,246,247,248,251,252,254],{},"Ici, ",[25,249,250],{},": number"," signifie « un nombre ». L'éditeur souligne ",[25,253,132],{}," en rouge avant même que tu lances le code.",[10,256,258],{"id":257},"le-typage-statique","Le typage statique",[37,260,261,262,265],{},"On parle de ",[157,263,264],{},"typage statique"," : les types sont vérifiés avant l'exécution, en lisant le code. JavaScript, lui, ne connaît les types qu'au moment où le programme tourne.",[267,268,269,283],"table",{},[270,271,272],"thead",{},[273,274,275,278,281],"tr",{},[276,277],"th",{},[276,279,280],{},"JavaScript",[276,282,159],{},[284,285,286,298,309,320],"tbody",{},[273,287,288,292,295],{},[289,290,291],"td",{},"Vérification des types",[289,293,294],{},"À l'exécution",[289,296,297],{},"Avant l'exécution",[273,299,300,303,306],{},[289,301,302],{},"Erreur de frappe sur un nom",[289,304,305],{},"Découverte en lançant le code",[289,307,308],{},"Soulignée dans l'éditeur",[273,310,311,314,317],{},[289,312,313],{},"Autocomplétion",[289,315,316],{},"Limitée",[289,318,319],{},"Précise, car les types sont connus",[273,321,322,325,328],{},[289,323,324],{},"Exécution",[289,326,327],{},"Directe",[289,329,330],{},"Il faut retirer les types d'abord",[37,332,333],{},"Cette dernière ligne est importante : un navigateur ne comprend pas TypeScript.",[10,335,337],{"id":336},"les-types-disparaissent-à-larrivée","Les types disparaissent à l'arrivée",[37,339,340,341,344,345,348,349,352,353,28],{},"Un outil appelé ",[157,342,343],{},"compilateur"," transforme ton fichier ",[25,346,347],{},".ts"," en fichier ",[25,350,351],{},".js"," en retirant les types. Le compilateur de TypeScript s'appelle ",[157,354,27],{},[37,356,357,358,28],{},"Les types n'existent donc que pendant l'écriture. Ils ne ralentissent pas ton site et ne protègent pas contre une donnée venue d'Internet : on y reviendra avec ",[25,359,360],{},"unknown",[362,363,364],"note",{},[37,365,366],{},"Une version de TypeScript est publiée régulièrement. Au moment où ce cours est écrit, la version stable indiquée sur le site officiel est la 7.0. Les bases décrites ici ne changent pas d'une version à l'autre.",[10,368,370],{"id":369},"essayer-sans-rien-installer","Essayer sans rien installer",[37,372,373,374,377,378,28],{},"Le plus simple est le ",[157,375,376],{},"playground"," officiel, une page web où tu tapes du TypeScript et vois le résultat. Il est à l'adresse ",[25,379,380],{},"typescriptlang.org\u002Fplay",[382,383,384,387,390,395],"ol",{},[18,385,386],{},"Ouvre la page.",[18,388,389],{},"Colle la fonction typée de plus haut.",[18,391,392,393,28],{},"Observe le soulignement rouge sous ",[25,394,132],{},[18,396,397],{},"Passe la souris dessus pour lire l'erreur.",[37,399,400],{},"À droite, le playground peut aussi afficher le JavaScript obtenu après compilation. Tu y vois les types disparaître.",[10,402,404],{"id":403},"essayer-avec-tsc","Essayer avec tsc",[37,406,407],{},"Pour travailler sur ton ordinateur, installe TypeScript dans ton projet. Il faut avoir Node.js et npm.",[41,409,413],{"className":410,"code":411,"language":412,"meta":46,"style":46},"language-bash shiki shiki-themes github-light-default github-dark-default github-dark-default","npm install typescript --save-dev\n","bash",[25,414,415],{"__ignoreMap":46},[50,416,417,420,423,426],{"class":52,"line":53},[50,418,419],{"class":68},"npm",[50,421,422],{"class":131}," install",[50,424,425],{"class":131}," typescript",[50,427,428],{"class":125}," --save-dev\n",[37,430,431,432,435],{},"Crée ensuite un fichier ",[25,433,434],{},"recette.ts",", puis compile-le :",[41,437,439],{"className":410,"code":438,"language":412,"meta":46,"style":46},"npx tsc recette.ts\n",[25,440,441],{"__ignoreMap":46},[50,442,443,446,449],{"class":52,"line":53},[50,444,445],{"class":68},"npx",[50,447,448],{"class":131}," tsc",[50,450,451],{"class":131}," recette.ts\n",[37,453,454,456,457,460],{},[25,455,27],{}," affiche les erreurs de type, s'il y en a, et produit un fichier ",[25,458,459],{},"recette.js",". Tu peux lancer ce fichier avec Node.js.",[37,462,463],{},"La documentation officielle conseille cette installation dans le projet plutôt que globale, pour que toute l'équipe utilise la même version.",[10,465,467],{"id":466},"lire-une-erreur-de-type","Lire une erreur de type",[37,469,470],{},"Une erreur de TypeScript suit presque toujours le même modèle.",[41,472,477],{"className":473,"code":475,"language":476},[474],"language-text","Argument of type 'string' is not assignable to parameter of type 'number'.\n","text",[25,478,475],{"__ignoreMap":46},[37,480,481],{},"Les messages sont en anglais. Traduction : « un argument de type texte ne peut pas aller dans un paramètre de type nombre ».",[37,483,484],{},"Lis-les ainsi :",[382,486,487,494,500],{},[18,488,489,490,493],{},"Repère le type que tu as fourni (",[25,491,492],{},"string",").",[18,495,496,497,493],{},"Repère le type attendu (",[25,498,499],{},"number",[18,501,502],{},"Corrige la valeur ou le type, selon ce que tu voulais vraiment.",[504,505,506],"tip",{},[37,507,508],{},"Quand une erreur est longue, lis d'abord la première et la dernière ligne. Le plus utile est souvent aux deux extrémités.",[10,510,512],{"id":511},"typescript-ne-remplace-pas-les-tests","TypeScript ne remplace pas les tests",[37,514,515,516,519,520,523],{},"TypeScript attrape les fautes de type, pas les fautes de logique. Si tu écris ",[25,517,518],{},"parts - invites"," au lieu de ",[25,521,522],{},"parts + invites",", les types sont corrects.",[37,525,526],{},"Il rend surtout le code plus facile à relire et à modifier. Le nom d'un champ renommé est corrigé partout, ou signalé là où tu l'as oublié.",[10,528,530],{"id":529},"à-retenir","À retenir",[15,532,533,536,539,545,556,559],{},[18,534,535],{},"TypeScript est du JavaScript avec des types, vérifiés avant l'exécution.",[18,537,538],{},"Les types sont retirés à la compilation : le navigateur ne voit que du JavaScript.",[18,540,541,542,544],{},"Le playground sur ",[25,543,380],{}," permet d'essayer sans installation.",[18,546,547,548,551,552,555],{},"Avec ",[25,549,550],{},"npm install typescript --save-dev"," puis ",[25,553,554],{},"npx tsc fichier.ts",", tu compiles chez toi.",[18,557,558],{},"Une erreur de type compare le type fourni au type attendu.",[18,560,561],{},"TypeScript ne détecte pas les erreurs de logique.",[563,564,565],"style",{},"html pre.shiki code .sOnC1, html code.shiki .sOnC1{--shiki-light:#CF222E;--shiki-default:#FF7B72;--shiki-dark:#FF7B72}html pre.shiki code .syCW7, html code.shiki .syCW7{--shiki-light:#8250DF;--shiki-default:#D2A8FF;--shiki-dark:#D2A8FF}html pre.shiki code .scfrF, html code.shiki .scfrF{--shiki-light:#1F2328;--shiki-default:#E6EDF3;--shiki-dark:#E6EDF3}html pre.shiki code .sIXEE, html code.shiki .sIXEE{--shiki-light:#953800;--shiki-default:#FFA657;--shiki-dark:#FFA657}html pre.shiki code .s5iOY, html code.shiki .s5iOY{--shiki-light:#0550AE;--shiki-default:#79C0FF;--shiki-dark:#79C0FF}html pre.shiki code .shWOn, html code.shiki .shWOn{--shiki-light:#0A3069;--shiki-default:#A5D6FF;--shiki-dark:#A5D6FF}html pre.shiki code .sd6ml, html code.shiki .sd6ml{--shiki-light:#6E7781;--shiki-default:#8B949E;--shiki-dark:#8B949E}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":46,"searchDepth":81,"depth":96,"links":567},[568,569,570,571,572,573,574,575,576,577],{"id":12,"depth":81,"text":13},{"id":34,"depth":81,"text":35},{"id":152,"depth":81,"text":153},{"id":257,"depth":81,"text":258},{"id":336,"depth":81,"text":337},{"id":369,"depth":81,"text":370},{"id":403,"depth":81,"text":404},{"id":466,"depth":81,"text":467},{"id":511,"depth":81,"text":512},{"id":529,"depth":81,"text":530},"Découvre ce que TypeScript ajoute à JavaScript, comment l'essayer dans le playground et avec tsc, et comment lire une erreur de type.","md",{},[159,163,264,27,376,582,583,280],"erreur de type","compilation","debutant","\u002Fts\u002Fpourquoi-typescript",[587],"\u002Fjs\u002Fpremiers-pas",[589,593,597],{"nom":590,"url":591,"type":592},"MDN, définition de TypeScript","https:\u002F\u002Fdeveloper.mozilla.org\u002Ffr\u002Fdocs\u002FGlossary\u002FTypeScript","doc",{"nom":594,"url":595,"type":596},"Grafikart, formation TypeScript","https:\u002F\u002Fgrafikart.fr\u002Fformations\u002Ftypescript","cours",{"nom":598,"url":599,"type":592,"anglais":105},"Documentation de TypeScript (en anglais)","https:\u002F\u002Fwww.typescriptlang.org\u002Fdocs\u002F",{"title":5,"description":578},[602,603],{"nom":598,"url":599},{"nom":604,"url":605},"Installer TypeScript (en anglais)","https:\u002F\u002Fwww.typescriptlang.org\u002Fdownload\u002F","ts\u002F01.pourquoi-typescript","VqzvTU78VQWaoT5wFJwHIwpUp-fOhIZJoR3aNlniQ-Q",[609,610,614,618,622,626,630],{"path":585,"title":5,"stem":606},{"path":611,"title":612,"stem":613},"\u002Fts\u002Ftypes-de-base","Types de base et fonctions","ts\u002F02.types-de-base",{"path":615,"title":616,"stem":617},"\u002Fts\u002Fobjets-interfaces-types","Objets, interface et type","ts\u002F03.objets-interfaces-types",{"path":619,"title":620,"stem":621},"\u002Fts\u002Funions-et-narrowing","Unions, littéraux et narrowing","ts\u002F04.unions-et-narrowing",{"path":623,"title":624,"stem":625},"\u002Fts\u002Fgeneriques-et-utilitaires","Génériques et types utilitaires","ts\u002F05.generiques-et-utilitaires",{"path":627,"title":628,"stem":629},"\u002Fts\u002Ftypescript-dans-vue-et-nuxt","TypeScript dans Vue et Nuxt","ts\u002F06.typescript-dans-vue-et-nuxt",{"path":631,"title":159,"stem":632},"\u002Fts","ts\u002Findex",[634,636],{"title":159,"path":631,"stem":632,"description":635,"children":-1},"Le mémo de TypeScript : types de base, objets, unions, narrowing, génériques, types utilitaires et usage dans Vue et Nuxt.",{"title":612,"path":611,"stem":613,"description":637,"children":-1},"Annote des variables avec string, number et boolean, laisse l'inférence travailler, puis type les paramètres et les retours de tes fonctions.",[639],{"path":587,"title":640,"ligne":45},"Premiers pas en JavaScript",[642,643,644,645,647,648,650],{"path":585,"title":5,"niveau":584,"stem":606},{"path":611,"title":612,"niveau":584,"stem":613},{"path":615,"title":616,"niveau":584,"stem":617},{"path":619,"title":620,"niveau":646,"stem":621},"intermediaire",{"path":623,"title":624,"niveau":646,"stem":625},{"path":627,"title":628,"niveau":649,"stem":629},"avance",{"path":631,"title":159,"niveau":651,"stem":632},"memo",1794583433050]