TypeScript

Qui je suis ?

• Jonathan Boyer
• Freelance full-stack
• Formateur : Grafikart.fr

Le JavaScript

• Langage de script pour le navigateur
• Typage faible
• Dynamique
• Évènementiel

function main () {
    const input = document.querySelector("input");
    const result = document.querySelector('.result')

    if (!input || !result) {
        return;
    }

    input.addEventListener("input", function(event) {
        const texte = input.value
        result.innerText = texte.toUpperCase()
    });
}

main();
        

Défaut du JavaScript

Pas de type = Pas de documentation

export function offsetTop(element, parent = null) {
  let top = element.offsetTop;
  while ((element = element.offsetParent)) {
    if (parent === element) {
      return top;
    }
    top += element.offsetTop;
  }
  return top;
}
        

/**
 * Trouve la position de l'élément
 * par rapport au haut de la page
 *
 * @param {HTMLElement} element
 * @param {HTMLElement|null} parent
 */
export function offsetTop(element, parent = null) {
  return top;
}
        

Défaut du JavaScript

Langage trop dynamique

function addNumbers (a, b) {
  return a + b
}

addNumbers(2, 3) // 5
addNumbers(2, '3') // '23'
        

addNumbers(2, input.value)
        

function addNumbers (a: number, b: number): number {
  return a + b
}

addNumbers(2, 3) // 5
addNumbers(2, '3') // Erreur
        

Limitation du navigateur

L'outil TypeScript

• Transpiler : Retire les types du code
• Check : Vérifier le code

La vérification ne se fait pas à l'éxécution !

Vérification dans l'éditeur

Syntaxe

Types de bases

const k: number
const name: string
const isValid: boolean
const v: null
const items: string[]
const cb: (n: number) => void
        

Syntaxe

Objets

const person: {firstname: string, lastname?: string, age: number}
const items: Record<string, number>
const arr: Array<string>
        

Syntaxe

Type avec générique

const a: Map<string, number>
const b: Promise<string>
        

Syntaxe

Tuple

const point: [number, number]
        

Syntaxe

Spéciaux

never
any
unknown
        

Alias

type Person = {firstname: string, lastname: string}

const a: Person
        

Cast

const a = ['hello']

// Cast pour spécifier le type
const a = [] as string[]
const a: string[] = []
        

Union

type Demo = string | number | null
        

Intersection

type Person = {firstname: string, lastname: string}

type AgedPerson = Person & {age: number}
        

Inconvénients

• Outils supplémentaires
• Limite le dynamisme
• Breaking change

Conclusion

• Moins d'erreurs
• Avantages > Inconvénients
• Bonne intégration