Neue TypeScript-Funktionen für verbesserte Benutzerfreundlichkeit

Unveränderliche Objekte und Arrays

Verbesserung der Benutzerfreundlichkeit mit schreibgeschützten Parametern

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

Verbesserung der Verwendbarkeit unveränderlicher Variablen mit dem Konstrukt 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); // !

Hilfstyp Auslassen

//     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' }; // ;

Neue JavaScript-Funktionen, die von TypeScript unterstützt werden

▍ Auf null und undefiniert prüfen

//  ||     ,  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

▍ Optionale Sequenzen

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

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

▍ Private Klassenfelder

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

▍Verwenden Sie das Schlüsselwort await auf der obersten Codeebene

(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 };

Erweiterte TypeScript-Experimentierumgebung

Zusammenfassung