TypeScript
Le mémo de TypeScript : types de base, objets, unions, narrowing, génériques, types utilitaires et usage dans Vue et Nuxt.
Ce mémo résume les outils de TypeScript. Chaque section renvoie au cours qui l'explique en détail.
Essayer et compiler
| Besoin | Moyen |
|---|---|
| Essayer sans installer | typescriptlang.org/play |
| Installer dans un projet | npm install typescript --save-dev |
| Compiler un fichier | npx tsc fichier.ts |
Détails : Pourquoi TypeScript.
Types de base et fonctions
const nom: string = "Gratin"
const ingredients: string[] = ["ail", "sel"]
let personnes = 4 // déduit : number
function duree(prep: number, cuisson?: number): number {
return prep + (cuisson ?? 0)
}
| Type | Sens |
|---|---|
string, number, boolean | Texte, nombre, vrai ou faux |
string[] | Tableau de textes |
void | Fonction sans valeur renvoyée |
any | Aucune vérification, à éviter |
Détails : Types de base et fonctions.
Objets
interface Recette {
readonly id: number
nom: string
duree?: number
}
type Etendue = Recette & { date: string }
interface par défaut, type pour nommer une union. Détails : Objets, interface et type.
Unions et narrowing
type Difficulte = "facile" | "moyen" | "difficile"
function afficher(valeur: number | string) {
if (typeof valeur === "string") return valeur.toUpperCase()
return valeur.toFixed(1)
}
| Test | Sert à |
|---|---|
typeof x === "string" | Types de base |
x instanceof Date | Objets d'une classe |
"cle" in x | Propriété présente |
etape.type === "cuisson" | Union discriminée |
unknown oblige à vérifier avant usage, any ne vérifie rien. Détails : Unions, littéraux et narrowing.
Génériques et types utilitaires
function premier<T>(liste: T[]): T {
return liste[0]
}
| Type | Effet |
|---|---|
Partial<T> | Tout devient facultatif |
Required<T> | Tout devient obligatoire |
Readonly<T> | Tout passe en lecture seule |
Pick<T, "a" | "b"> | Garde les clés listées |
Omit<T, "a"> | Retire les clés listées |
Record<K, V> | Dictionnaire de clés K |
Détails : Génériques et types utilitaires.
Vue et Nuxt
<script setup lang="ts">
interface Props { titre: string; duree?: number }
const props = defineProps<Props>()
const emit = defineEmits<{ choisir: [id: number] }>()
const { data } = await useFetch<Recette[]>('/api/recettes')
</script>
| Besoin | Commande ou outil |
|---|---|
| Vérifier les types d'un projet Nuxt | npx nuxt typecheck |
| Dépendances de la vérification | vue-tsc et typescript |
| Éditeur | Extension Vue - Official |
Détails : TypeScript dans Vue et Nuxt.
Sources officielles
Ensuite
- Projet
- Lignes de code
- Niveau
- 3e étage
- Appartement
- TypeScript
- Pièce
- 7/7
- Plan n°
- ts/index