[{"data":1,"prerenderedAt":1278},["ShallowReactive",2],{"page-\u002Fts\u002Ftypescript-dans-vue-et-nuxt":3,"pieces-ts":1236,"autour-\u002Fts\u002Ftypescript-dans-vue-et-nuxt":1261,"prerequis-\u002Fts\u002Ftypescript-dans-vue-et-nuxt":1265,"plan-ts":1267},{"id":4,"title":5,"body":6,"description":1201,"extension":1202,"ligne":617,"meta":1203,"motsCles":1204,"navigation":107,"niveau":1207,"path":1208,"prerequis":1209,"ressources":1211,"seo":1223,"sources":1224,"stem":1234,"__hash__":1235},"docs\u002Fts\u002F06.typescript-dans-vue-et-nuxt.md","TypeScript dans Vue et Nuxt",{"type":7,"value":8,"toc":1188},"minimark",[9,14,32,36,47,183,190,196,200,212,304,322,329,333,339,452,455,464,468,479,600,603,607,613,726,737,748,752,759,945,963,969,975,979,994,1029,1042,1084,1088,1101,1107,1117,1121,1131,1135,1184],[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",{},"Activer TypeScript dans un composant Vue.",[18,22,23,24,28],{},"Typer les props, les événements et les ",[25,26,27],"code",{},"ref",".",[18,30,31],{},"Typer une récupération de données et vérifier les types d'un projet Nuxt.",[10,33,35],{"id":34},"activer-typescript-dans-un-composant","Activer TypeScript dans un composant",[37,38,39,40,43,44,28],"p",{},"Il suffit d'ajouter ",[25,41,42],{},"lang=\"ts\""," à la balise ",[25,45,46],{},"script",[48,49,55],"pre",{"className":50,"code":51,"filename":52,"language":53,"meta":54,"style":54},"language-vue shiki shiki-themes github-light-default github-dark-default github-dark-default","\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\n\nconst portions = ref(4)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cp>{{ portions.toFixed(1) }} portions\u003C\u002Fp>\n\u003C\u002Ftemplate>\n","app\u002Fcomponents\u002FRecetteCarte.vue","vue","",[25,56,57,86,102,109,134,144,149,159,174],{"__ignoreMap":54},[58,59,62,66,69,73,76,79,83],"span",{"class":60,"line":61},"line",1,[58,63,65],{"class":64},"scfrF","\u003C",[58,67,46],{"class":68},"s5JFL",[58,70,72],{"class":71},"s5iOY"," setup",[58,74,75],{"class":71}," lang",[58,77,78],{"class":64},"=",[58,80,82],{"class":81},"shWOn","\"ts\"",[58,84,85],{"class":64},">\n",[58,87,89,93,96,99],{"class":60,"line":88},2,[58,90,92],{"class":91},"sOnC1","import",[58,94,95],{"class":64}," { ref } ",[58,97,98],{"class":91},"from",[58,100,101],{"class":81}," 'vue'\n",[58,103,105],{"class":60,"line":104},3,[58,106,108],{"emptyLinePlaceholder":107},true,"\n",[58,110,112,115,118,121,125,128,131],{"class":60,"line":111},4,[58,113,114],{"class":91},"const",[58,116,117],{"class":71}," portions",[58,119,120],{"class":91}," =",[58,122,124],{"class":123},"syCW7"," ref",[58,126,127],{"class":64},"(",[58,129,130],{"class":71},"4",[58,132,133],{"class":64},")\n",[58,135,137,140,142],{"class":60,"line":136},5,[58,138,139],{"class":64},"\u003C\u002F",[58,141,46],{"class":68},[58,143,85],{"class":64},[58,145,147],{"class":60,"line":146},6,[58,148,108],{"emptyLinePlaceholder":107},[58,150,152,154,157],{"class":60,"line":151},7,[58,153,65],{"class":64},[58,155,156],{"class":68},"template",[58,158,85],{"class":64},[58,160,162,165,167,170,172],{"class":60,"line":161},8,[58,163,164],{"class":64},"  \u003C",[58,166,37],{"class":68},[58,168,169],{"class":64},">{{ portions.toFixed(1) }} portions\u003C\u002F",[58,171,37],{"class":68},[58,173,85],{"class":64},[58,175,177,179,181],{"class":60,"line":176},9,[58,178,139],{"class":64},[58,180,156],{"class":68},[58,182,85],{"class":64},[37,184,185,186,189],{},"Avec cet attribut, le code du script et les expressions du template sont vérifiés. Dans le template, ",[25,187,188],{},"portions.toFixed(1)"," est reconnu comme un appel sur un nombre.",[37,191,192,193,195],{},"Dans un projet Nuxt, tu n'as pas besoin d'importer ",[25,194,27],{}," : Nuxt le fait pour toi.",[10,197,199],{"id":198},"typer-les-props","Typer les props",[37,201,202,203,207,208,211],{},"Les ",[204,205,206],"strong",{},"props"," sont les données qu'un composant reçoit de son parent. Avec ",[25,209,210],{},"defineProps",", tu en décris la forme par un type.",[48,213,215],{"className":50,"code":214,"filename":52,"language":53,"meta":54,"style":54},"\u003Cscript setup lang=\"ts\">\ninterface Props {\n  titre: string\n  duree?: number\n}\n\nconst props = defineProps\u003CProps>()\n\u003C\u002Fscript>\n",[25,216,217,233,245,256,267,272,276,296],{"__ignoreMap":54},[58,218,219,221,223,225,227,229,231],{"class":60,"line":61},[58,220,65],{"class":64},[58,222,46],{"class":68},[58,224,72],{"class":71},[58,226,75],{"class":71},[58,228,78],{"class":64},[58,230,82],{"class":81},[58,232,85],{"class":64},[58,234,235,238,242],{"class":60,"line":88},[58,236,237],{"class":91},"interface",[58,239,241],{"class":240},"sIXEE"," Props",[58,243,244],{"class":64}," {\n",[58,246,247,250,253],{"class":60,"line":104},[58,248,249],{"class":240},"  titre",[58,251,252],{"class":91},":",[58,254,255],{"class":71}," string\n",[58,257,258,261,264],{"class":60,"line":111},[58,259,260],{"class":240},"  duree",[58,262,263],{"class":91},"?:",[58,265,266],{"class":71}," number\n",[58,268,269],{"class":60,"line":136},[58,270,271],{"class":64},"}\n",[58,273,274],{"class":60,"line":146},[58,275,108],{"emptyLinePlaceholder":107},[58,277,278,280,283,285,288,290,293],{"class":60,"line":151},[58,279,114],{"class":91},[58,281,282],{"class":71}," props",[58,284,120],{"class":91},[58,286,287],{"class":123}," defineProps",[58,289,65],{"class":64},[58,291,292],{"class":240},"Props",[58,294,295],{"class":64},">()\n",[58,297,298,300,302],{"class":60,"line":161},[58,299,139],{"class":64},[58,301,46],{"class":68},[58,303,85],{"class":64},[37,305,306,307,310,311,314,315,318,319,321],{},"Ici, ",[25,308,309],{},"titre"," est obligatoire et ",[25,312,313],{},"duree"," facultative, donc de type ",[25,316,317],{},"number | undefined",". Si un parent oublie ",[25,320,309],{}," ou passe un nombre, l'erreur apparaît dans l'éditeur.",[37,323,324,325,328],{},"Tu peux aussi écrire le type directement entre les chevrons, sans interface : ",[25,326,327],{},"defineProps\u003C{ titre: string }>()",". La documentation de Vue demande de choisir entre cette déclaration par type et la déclaration classique, sans mélanger les deux.",[10,330,332],{"id":331},"des-valeurs-par-défaut","Des valeurs par défaut",[37,334,335,336,28],{},"Pour donner une valeur à une prop facultative, utilise ",[25,337,338],{},"withDefaults",[48,340,342],{"className":50,"code":341,"language":53,"meta":54,"style":54},"\u003Cscript setup lang=\"ts\">\ninterface Props {\n  titre: string\n  etiquettes?: string[]\n}\n\nconst props = withDefaults(defineProps\u003CProps>(), {\n  etiquettes: () => ['maison']\n})\n\u003C\u002Fscript>\n",[25,343,344,360,368,376,389,393,397,419,438,443],{"__ignoreMap":54},[58,345,346,348,350,352,354,356,358],{"class":60,"line":61},[58,347,65],{"class":64},[58,349,46],{"class":68},[58,351,72],{"class":71},[58,353,75],{"class":71},[58,355,78],{"class":64},[58,357,82],{"class":81},[58,359,85],{"class":64},[58,361,362,364,366],{"class":60,"line":88},[58,363,237],{"class":91},[58,365,241],{"class":240},[58,367,244],{"class":64},[58,369,370,372,374],{"class":60,"line":104},[58,371,249],{"class":240},[58,373,252],{"class":91},[58,375,255],{"class":71},[58,377,378,381,383,386],{"class":60,"line":111},[58,379,380],{"class":240},"  etiquettes",[58,382,263],{"class":91},[58,384,385],{"class":71}," string",[58,387,388],{"class":64},"[]\n",[58,390,391],{"class":60,"line":136},[58,392,271],{"class":64},[58,394,395],{"class":60,"line":146},[58,396,108],{"emptyLinePlaceholder":107},[58,398,399,401,403,405,408,410,412,414,416],{"class":60,"line":151},[58,400,114],{"class":91},[58,402,282],{"class":71},[58,404,120],{"class":91},[58,406,407],{"class":123}," withDefaults",[58,409,127],{"class":64},[58,411,210],{"class":123},[58,413,65],{"class":64},[58,415,292],{"class":240},[58,417,418],{"class":64},">(), {\n",[58,420,421,423,426,429,432,435],{"class":60,"line":161},[58,422,380],{"class":123},[58,424,425],{"class":64},": () ",[58,427,428],{"class":91},"=>",[58,430,431],{"class":64}," [",[58,433,434],{"class":81},"'maison'",[58,436,437],{"class":64},"]\n",[58,439,440],{"class":60,"line":176},[58,441,442],{"class":64},"})\n",[58,444,446,448,450],{"class":60,"line":445},10,[58,447,139],{"class":64},[58,449,46],{"class":68},[58,451,85],{"class":64},[37,453,454],{},"Une valeur de type tableau ou objet se donne sous forme de fonction. Chaque composant obtient ainsi sa propre copie.",[37,456,457,458,460,461,28],{},"Depuis Vue 3.5, la déstructuration réactive des props peut remplacer ",[25,459,338],{}," : ",[25,462,463],{},"const { titre, etiquettes = ['maison'] } = defineProps\u003CProps>()",[10,465,467],{"id":466},"typer-les-événements","Typer les événements",[37,469,470,471,474,475,478],{},"Un composant prévient son parent avec un ",[204,472,473],{},"événement",". ",[25,476,477],{},"defineEmits"," décrit les événements et ce qu'ils transportent.",[48,480,482],{"className":50,"code":481,"language":53,"meta":54,"style":54},"\u003Cscript setup lang=\"ts\">\nconst emit = defineEmits\u003C{\n  choisir: [id: number]\n  supprimer: []\n}>()\n\nemit('choisir', 12)\nemit('choisir', 'douze') \u002F\u002F Erreur\n\u003C\u002Fscript>\n",[25,483,484,500,515,535,545,550,554,572,592],{"__ignoreMap":54},[58,485,486,488,490,492,494,496,498],{"class":60,"line":61},[58,487,65],{"class":64},[58,489,46],{"class":68},[58,491,72],{"class":71},[58,493,75],{"class":71},[58,495,78],{"class":64},[58,497,82],{"class":81},[58,499,85],{"class":64},[58,501,502,504,507,509,512],{"class":60,"line":88},[58,503,114],{"class":91},[58,505,506],{"class":71}," emit",[58,508,120],{"class":91},[58,510,511],{"class":123}," defineEmits",[58,513,514],{"class":64},"\u003C{\n",[58,516,517,520,522,524,527,530,533],{"class":60,"line":104},[58,518,519],{"class":240},"  choisir",[58,521,252],{"class":91},[58,523,431],{"class":64},[58,525,526],{"class":240},"id",[58,528,529],{"class":64},": ",[58,531,532],{"class":71},"number",[58,534,437],{"class":64},[58,536,537,540,542],{"class":60,"line":111},[58,538,539],{"class":240},"  supprimer",[58,541,252],{"class":91},[58,543,544],{"class":64}," []\n",[58,546,547],{"class":60,"line":136},[58,548,549],{"class":64},"}>()\n",[58,551,552],{"class":60,"line":146},[58,553,108],{"emptyLinePlaceholder":107},[58,555,556,559,561,564,567,570],{"class":60,"line":151},[58,557,558],{"class":123},"emit",[58,560,127],{"class":64},[58,562,563],{"class":81},"'choisir'",[58,565,566],{"class":64},", ",[58,568,569],{"class":71},"12",[58,571,133],{"class":64},[58,573,574,576,578,580,582,585,588],{"class":60,"line":161},[58,575,558],{"class":123},[58,577,127],{"class":64},[58,579,563],{"class":81},[58,581,566],{"class":64},[58,583,584],{"class":81},"'douze'",[58,586,587],{"class":64},") ",[58,589,591],{"class":590},"sd6ml","\u002F\u002F Erreur\n",[58,593,594,596,598],{"class":60,"line":176},[58,595,139],{"class":64},[58,597,46],{"class":68},[58,599,85],{"class":64},[37,601,602],{},"Chaque événement est suivi de la liste de ses arguments. Cette syntaxe courte existe depuis Vue 3.3.",[10,604,606],{"id":605},"typer-une-ref","Typer une ref",[37,608,609,610,612],{},"Une ",[204,611,27],{}," est une valeur réactive. Quand tu lui donnes une valeur de départ, son type est déduit.",[48,614,618],{"className":615,"code":616,"language":617,"meta":54,"style":54},"language-ts shiki shiki-themes github-light-default github-dark-default github-dark-default","import { ref } from 'vue'\nimport type { Ref } from 'vue'\n\nconst annee = ref(2026)                       \u002F\u002F Ref\u003Cnumber>\nconst choix = ref\u003Cstring | number>('facile')  \u002F\u002F type explicite\nconst recette = ref\u003CRecette>()                \u002F\u002F Ref\u003CRecette | undefined>\n","ts",[25,619,620,630,644,648,670,704],{"__ignoreMap":54},[58,621,622,624,626,628],{"class":60,"line":61},[58,623,92],{"class":91},[58,625,95],{"class":64},[58,627,98],{"class":91},[58,629,101],{"class":81},[58,631,632,634,637,640,642],{"class":60,"line":88},[58,633,92],{"class":91},[58,635,636],{"class":91}," type",[58,638,639],{"class":64}," { Ref } ",[58,641,98],{"class":91},[58,643,101],{"class":81},[58,645,646],{"class":60,"line":104},[58,647,108],{"emptyLinePlaceholder":107},[58,649,650,652,655,657,659,661,664,667],{"class":60,"line":111},[58,651,114],{"class":91},[58,653,654],{"class":71}," annee",[58,656,120],{"class":91},[58,658,124],{"class":123},[58,660,127],{"class":64},[58,662,663],{"class":71},"2026",[58,665,666],{"class":64},")                       ",[58,668,669],{"class":590},"\u002F\u002F Ref\u003Cnumber>\n",[58,671,672,674,677,679,681,683,686,689,692,695,698,701],{"class":60,"line":136},[58,673,114],{"class":91},[58,675,676],{"class":71}," choix",[58,678,120],{"class":91},[58,680,124],{"class":123},[58,682,65],{"class":64},[58,684,685],{"class":71},"string",[58,687,688],{"class":91}," |",[58,690,691],{"class":71}," number",[58,693,694],{"class":64},">(",[58,696,697],{"class":81},"'facile'",[58,699,700],{"class":64},")  ",[58,702,703],{"class":590},"\u002F\u002F type explicite\n",[58,705,706,708,711,713,715,717,720,723],{"class":60,"line":146},[58,707,114],{"class":91},[58,709,710],{"class":71}," recette",[58,712,120],{"class":91},[58,714,124],{"class":123},[58,716,65],{"class":64},[58,718,719],{"class":240},"Recette",[58,721,722],{"class":64},">()                ",[58,724,725],{"class":590},"\u002F\u002F Ref\u003CRecette | undefined>\n",[37,727,728,729,732,733,736],{},"Sans valeur de départ, ",[25,730,731],{},"ref\u003CRecette>()"," vaut ",[25,734,735],{},"Recette | undefined",". Il faudra donc vérifier la présence de la valeur avant de t'en servir : c'est du narrowing.",[37,738,739,740,743,744,747],{},"Le type ",[25,741,742],{},"Ref"," s'importe avec ",[25,745,746],{},"import type",", qui indique qu'il ne sert qu'aux types.",[10,749,751],{"id":750},"typer-les-données-récupérées","Typer les données récupérées",[37,753,754,755,758],{},"Pour une adresse de ton site, ",[25,756,757],{},"useFetch"," accepte un type générique qui décrit la réponse.",[48,760,763],{"className":50,"code":761,"filename":762,"language":53,"meta":54,"style":54},"\u003Cscript setup lang=\"ts\">\ninterface Recette {\n  id: number\n  titre: string\n}\n\nconst { data, status, error } = await useFetch\u003CRecette[]>('\u002Fapi\u002Frecettes')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cul v-if=\"data\">\n    \u003Cli v-for=\"recette in data\" :key=\"recette.id\">{{ recette.titre }}\u003C\u002Fli>\n  \u003C\u002Ful>\n\u003C\u002Ftemplate>\n","app\u002Fpages\u002Frecettes\u002Findex.vue",[25,764,765,781,790,799,807,811,815,858,866,870,878,895,926,936],{"__ignoreMap":54},[58,766,767,769,771,773,775,777,779],{"class":60,"line":61},[58,768,65],{"class":64},[58,770,46],{"class":68},[58,772,72],{"class":71},[58,774,75],{"class":71},[58,776,78],{"class":64},[58,778,82],{"class":81},[58,780,85],{"class":64},[58,782,783,785,788],{"class":60,"line":88},[58,784,237],{"class":91},[58,786,787],{"class":240}," Recette",[58,789,244],{"class":64},[58,791,792,795,797],{"class":60,"line":104},[58,793,794],{"class":240},"  id",[58,796,252],{"class":91},[58,798,266],{"class":71},[58,800,801,803,805],{"class":60,"line":111},[58,802,249],{"class":240},[58,804,252],{"class":91},[58,806,255],{"class":71},[58,808,809],{"class":60,"line":136},[58,810,271],{"class":64},[58,812,813],{"class":60,"line":146},[58,814,108],{"emptyLinePlaceholder":107},[58,816,817,819,822,825,827,830,832,835,838,840,843,846,848,850,853,856],{"class":60,"line":151},[58,818,114],{"class":91},[58,820,821],{"class":64}," { ",[58,823,824],{"class":71},"data",[58,826,566],{"class":64},[58,828,829],{"class":71},"status",[58,831,566],{"class":64},[58,833,834],{"class":71},"error",[58,836,837],{"class":64}," } ",[58,839,78],{"class":91},[58,841,842],{"class":91}," await",[58,844,845],{"class":123}," useFetch",[58,847,65],{"class":64},[58,849,719],{"class":240},[58,851,852],{"class":64},"[]>(",[58,854,855],{"class":81},"'\u002Fapi\u002Frecettes'",[58,857,133],{"class":64},[58,859,860,862,864],{"class":60,"line":161},[58,861,139],{"class":64},[58,863,46],{"class":68},[58,865,85],{"class":64},[58,867,868],{"class":60,"line":176},[58,869,108],{"emptyLinePlaceholder":107},[58,871,872,874,876],{"class":60,"line":445},[58,873,65],{"class":64},[58,875,156],{"class":68},[58,877,85],{"class":64},[58,879,881,883,885,888,890,893],{"class":60,"line":880},11,[58,882,164],{"class":64},[58,884,15],{"class":68},[58,886,887],{"class":71}," v-if",[58,889,78],{"class":64},[58,891,892],{"class":81},"\"data\"",[58,894,85],{"class":64},[58,896,898,901,903,906,908,911,914,916,919,922,924],{"class":60,"line":897},12,[58,899,900],{"class":64},"    \u003C",[58,902,18],{"class":68},[58,904,905],{"class":71}," v-for",[58,907,78],{"class":64},[58,909,910],{"class":81},"\"recette in data\"",[58,912,913],{"class":71}," :key",[58,915,78],{"class":64},[58,917,918],{"class":81},"\"recette.id\"",[58,920,921],{"class":64},">{{ recette.titre }}\u003C\u002F",[58,923,18],{"class":68},[58,925,85],{"class":64},[58,927,929,932,934],{"class":60,"line":928},13,[58,930,931],{"class":64},"  \u003C\u002F",[58,933,15],{"class":68},[58,935,85],{"class":64},[58,937,939,941,943],{"class":60,"line":938},14,[58,940,139],{"class":64},[58,942,156],{"class":68},[58,944,85],{"class":64},[37,946,947,948,950,951,954,955,958,959,962],{},"Dans le script, ",[25,949,824],{}," est de type ",[25,952,953],{},"Ref\u003CRecette[] | undefined>",". Le ",[25,956,957],{},"v-if"," écarte le cas ",[25,960,961],{},"undefined"," avant la boucle.",[37,964,965,966,968],{},"D'après la documentation de Nuxt, ",[25,967,757],{}," peut aussi déduire le type de la réponse depuis ta route serveur. Le générique explicite sert quand cette déduction n'est pas disponible.",[970,971,972],"warning",{},[37,973,974],{},"Le type annoncé n'est pas vérifié au moment de la réponse. Si ton API envoie un autre format, TypeScript ne le verra pas. Pour une source non maîtrisée, vérifie la donnée toi-même.",[10,976,978],{"id":977},"vérifier-les-types-dun-projet-nuxt","Vérifier les types d'un projet Nuxt",[37,980,981,982,985,986,989,990,993],{},"Par défaut, les commandes ",[25,983,984],{},"nuxt dev"," et ",[25,987,988],{},"nuxt build"," ne vérifient pas les types. Pour le faire, installe ",[25,991,992],{},"vue-tsc"," et lance la commande de contrôle.",[48,995,999],{"className":996,"code":997,"language":998,"meta":54,"style":54},"language-bash shiki shiki-themes github-light-default github-dark-default github-dark-default","npm install --save-dev vue-tsc typescript\nnpx nuxt typecheck\n","bash",[25,1000,1001,1018],{"__ignoreMap":54},[58,1002,1003,1006,1009,1012,1015],{"class":60,"line":61},[58,1004,1005],{"class":240},"npm",[58,1007,1008],{"class":81}," install",[58,1010,1011],{"class":71}," --save-dev",[58,1013,1014],{"class":81}," vue-tsc",[58,1016,1017],{"class":81}," typescript\n",[58,1019,1020,1023,1026],{"class":60,"line":88},[58,1021,1022],{"class":240},"npx",[58,1024,1025],{"class":81}," nuxt",[58,1027,1028],{"class":81}," typecheck\n",[37,1030,1031,1033,1034,1037,1038,1041],{},[25,1032,992],{}," joue le rôle de ",[25,1035,1036],{},"tsc"," pour les fichiers ",[25,1039,1040],{},".vue",". Tu peux aussi activer la vérification pendant le développement ou le build dans le fichier de configuration.",[48,1043,1046],{"className":615,"code":1044,"filename":1045,"language":617,"meta":54,"style":54},"export default defineNuxtConfig({\n  typescript: {\n    typeCheck: true\n  }\n})\n","nuxt.config.ts",[25,1047,1048,1062,1067,1075,1080],{"__ignoreMap":54},[58,1049,1050,1053,1056,1059],{"class":60,"line":61},[58,1051,1052],{"class":91},"export",[58,1054,1055],{"class":91}," default",[58,1057,1058],{"class":123}," defineNuxtConfig",[58,1060,1061],{"class":240},"({\n",[58,1063,1064],{"class":60,"line":88},[58,1065,1066],{"class":64},"  typescript: {\n",[58,1068,1069,1072],{"class":60,"line":104},[58,1070,1071],{"class":64},"    typeCheck: ",[58,1073,1074],{"class":71},"true\n",[58,1076,1077],{"class":60,"line":111},[58,1078,1079],{"class":64},"  }\n",[58,1081,1082],{"class":60,"line":136},[58,1083,442],{"class":240},[10,1085,1087],{"id":1086},"la-configuration-typescript-de-nuxt","La configuration TypeScript de Nuxt",[37,1089,1090,1091,1094,1095,1098,1099,28],{},"Nuxt génère lui-même ses fichiers de configuration dans le dossier ",[25,1092,1093],{},".nuxt",". Il s'appuie sur eux : ne modifie pas directement le ",[25,1096,1097],{},"tsconfig.json"," de ton projet, passe par ",[25,1100,1045],{},[37,1102,1103,1104,28],{},"Ces fichiers sont créés quand tu lances le serveur de développement, le build ou ",[25,1105,1106],{},"nuxt prepare",[1108,1109,1110],"note",{},[37,1111,1112,1113,1116],{},"Si tu migres un projet JavaScript, l'option ",[25,1114,1115],{},"typescript.strict: false"," désactive temporairement les vérifications strictes. Remets-la à la normale ensuite.",[10,1118,1120],{"id":1119},"un-éditeur-adapté","Un éditeur adapté",[37,1122,1123,1124,1127,1128,1130],{},"Dans VS Code, installe l'extension ",[204,1125,1126],{},"Vue - Official"," : elle fournit le typage dans les fichiers ",[25,1129,1040],{},". Elle remplace l'ancienne extension Vetur, à désactiver.",[10,1132,1134],{"id":1133},"à-retenir","À retenir",[15,1136,1137,1145,1154,1159,1167,1173],{},[18,1138,1139,1141,1142,1144],{},[25,1140,42],{}," sur la balise ",[25,1143,46],{}," active TypeScript dans un composant.",[18,1146,1147,1150,1151,1153],{},[25,1148,1149],{},"defineProps\u003CProps>()"," type les props ; ",[25,1152,338],{}," ou la déstructuration donnent des valeurs par défaut.",[18,1155,1156,1158],{},[25,1157,477],{}," décrit chaque événement et ses arguments.",[18,1160,1161,1164,1165,28],{},[25,1162,1163],{},"ref\u003CT>()"," précise le type ; sans valeur de départ, il inclut ",[25,1166,961],{},[18,1168,1169,1172],{},[25,1170,1171],{},"useFetch\u003CRecette[]>(...)"," décrit la réponse, mais ne la vérifie pas à l'exécution.",[18,1174,1175,1178,1179,985,1181,1183],{},[25,1176,1177],{},"npx nuxt typecheck"," contrôle les types, que ",[25,1180,984],{},[25,1182,988],{}," ne font pas seuls.",[1185,1186,1187],"style",{},"html pre.shiki code .scfrF, html code.shiki .scfrF{--shiki-light:#1F2328;--shiki-default:#E6EDF3;--shiki-dark:#E6EDF3}html pre.shiki code .s5JFL, html code.shiki .s5JFL{--shiki-light:#116329;--shiki-default:#7EE787;--shiki-dark:#7EE787}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 .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 .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);}html pre.shiki code .sIXEE, html code.shiki .sIXEE{--shiki-light:#953800;--shiki-default:#FFA657;--shiki-dark:#FFA657}html pre.shiki code .sd6ml, html code.shiki .sd6ml{--shiki-light:#6E7781;--shiki-default:#8B949E;--shiki-dark:#8B949E}",{"title":54,"searchDepth":88,"depth":104,"links":1189},[1190,1191,1192,1193,1194,1195,1196,1197,1198,1199,1200],{"id":12,"depth":88,"text":13},{"id":34,"depth":88,"text":35},{"id":198,"depth":88,"text":199},{"id":331,"depth":88,"text":332},{"id":466,"depth":88,"text":467},{"id":605,"depth":88,"text":606},{"id":750,"depth":88,"text":751},{"id":977,"depth":88,"text":978},{"id":1086,"depth":88,"text":1087},{"id":1119,"depth":88,"text":1120},{"id":1133,"depth":88,"text":1134},"Utilise TypeScript dans un composant Vue avec script setup, type les props, les événements et les ref, et vérifie les types d'un projet Nuxt.","md",{},[1205,42,210,477,338,27,757,992,1206],"script setup","nuxt typecheck","avance","\u002Fts\u002Ftypescript-dans-vue-et-nuxt",[1210],"\u002Fts\u002Fgeneriques-et-utilitaires",[1212,1216,1220],{"nom":1213,"url":1214,"type":1215},"Grafikart, formation TypeScript","https:\u002F\u002Fgrafikart.fr\u002Fformations\u002Ftypescript","cours",{"nom":1217,"url":1218,"type":1219,"anglais":107},"Vue et TypeScript (en anglais)","https:\u002F\u002Fvuejs.org\u002Fguide\u002Ftypescript\u002Foverview.html","doc",{"nom":1221,"url":1222,"type":1219,"anglais":107},"TypeScript dans Nuxt (en anglais)","https:\u002F\u002Fnuxt.com\u002Fdocs\u002F4.x\u002Fguide\u002Fconcepts\u002Ftypescript",{"title":5,"description":1201},[1225,1228,1230,1231],{"nom":1226,"url":1227},"Vue et TypeScript avec la Composition API (en anglais)","https:\u002F\u002Fvuejs.org\u002Fguide\u002Ftypescript\u002Fcomposition-api.html",{"nom":1229,"url":1218},"Vue et TypeScript, vue d'ensemble (en anglais)",{"nom":1221,"url":1222},{"nom":1232,"url":1233},"useFetch dans Nuxt (en anglais)","https:\u002F\u002Fnuxt.com\u002Fdocs\u002F4.x\u002Fapi\u002Fcomposables\u002Fuse-fetch","ts\u002F06.typescript-dans-vue-et-nuxt","ls7aylNlXD4wGL-1aXPy7ZsMfqF1-Expz2I4YYrk1JM",[1237,1241,1245,1249,1253,1256,1257],{"path":1238,"title":1239,"stem":1240},"\u002Fts\u002Fpourquoi-typescript","Pourquoi TypeScript","ts\u002F01.pourquoi-typescript",{"path":1242,"title":1243,"stem":1244},"\u002Fts\u002Ftypes-de-base","Types de base et fonctions","ts\u002F02.types-de-base",{"path":1246,"title":1247,"stem":1248},"\u002Fts\u002Fobjets-interfaces-types","Objets, interface et type","ts\u002F03.objets-interfaces-types",{"path":1250,"title":1251,"stem":1252},"\u002Fts\u002Funions-et-narrowing","Unions, littéraux et narrowing","ts\u002F04.unions-et-narrowing",{"path":1210,"title":1254,"stem":1255},"Génériques et types utilitaires","ts\u002F05.generiques-et-utilitaires",{"path":1208,"title":5,"stem":1234},{"path":1258,"title":1259,"stem":1260},"\u002Fts","TypeScript","ts\u002Findex",[1262,1264],{"title":1254,"path":1210,"stem":1255,"description":1263,"children":-1},"Écris des fonctions et des types réutilisables avec les génériques, puis dérive des types avec Partial, Pick, Omit et Record.",null,[1266],{"path":1210,"title":1254,"ligne":617},[1268,1270,1271,1272,1274,1275,1276],{"path":1238,"title":1239,"niveau":1269,"stem":1240},"debutant",{"path":1242,"title":1243,"niveau":1269,"stem":1244},{"path":1246,"title":1247,"niveau":1269,"stem":1248},{"path":1250,"title":1251,"niveau":1273,"stem":1252},"intermediaire",{"path":1210,"title":1254,"niveau":1273,"stem":1255},{"path":1208,"title":5,"niveau":1207,"stem":1234},{"path":1258,"title":1259,"niveau":1277,"stem":1260},"memo",1794583436045]