Nouvelles fonctionnalités TypeScript pour une convivialité améliorée

Objets et tableaux immuables

Amélioration de la convivialité avec des paramètres en lecture seule

function foo(s: ReadonlyArray<string>) { /* ... */ }
 
function foo(s: readonly string[]) { /* ... */ }

Amélioration de l'utilisabilité des variables immuables à l'aide de la construction as const

interface Person { 
  name: string; 
}
 
const person = { 
  name: 'Will' 
} as Readonly<Person>;
person.name = 'Diana'; // !

const person = { 
        name: 'Will' 
} as const;
 
person.name = 'Diana'; // !
 
//      as const
const array = [1, 2, 3] as const; 
array.push(4); // !

Type d'assistance Omettre

//     TypeScript 3.5
type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
 
interface A { 
    propA?: string; 
    propB?: string; 
    propC?: string; 
}
 
type B = Omit<A, 'propA' | 'propC'>; 
const b: B = { propA: 'hi' }; // ;

Nouvelles fonctionnalités JavaScript prises en charge par TypeScript

▍ Vérifier la valeur nulle et non définie

//  ||     ,  index  0
const getValueOrOne = (x?: number) => index || 1; 
getValueOrOne(0); // 1 <-- 

//   ,    
const getValueOrOne = (x?: number) => index !== null && index !== undefined ? : 1; 
getValueOrOne(0); // 0

// !
const getValueOrOne = (x?: number) => index ?? 1; 
getValueOrOne(0); // 0
getValueOrOne(2); // 2
getValueOrOne(); // 1

▍ Séquences optionnelles

//    
const value = foo && foo.bar && foo.bar.baz;
 
//    
const value = foo?.bar?.baz;

const value = foo?.bar?.baz ?? 'default value';

▍ Champs de cours privés

class Fan { 
    #on = false; 
    private name = 'fan';
 
    turnOn() { 
        this.#on = true; 
    }
   isTurnedOn() { 
        return this.#on; 
    }
}
 
const fan = new Fan(); 
fan.isTurnedOn(); // false  
fan.turnOn(); 
fan.isTurnedOn(); // true
 
fan.on; //  
fan.#on; // 
fan.name; //   ,    JS

▍Utilisation du mot-clé wait au niveau supérieur du code

(async () => { 
    const response = await fetch('https://api.github.com/users/sitepen'); 
    const data = await response.json(); 
    console.log(`Check out the blog at ${data.blog}`); 
})();

const response = await fetch('https://api.github.com/users/sitepen'); 
const data = await response.json();
 
export default { ...data };

Environnement d'expérimentation TypeScript amélioré

Sommaire