Как я уверен, вы знаете, ES6 - это дополнительные функции для javascript. Typescript, являясь надмножеством javascript, также реализует эти функции. Если вы хотите использовать возможности ES7 и для машинописного текста, вы можете настроить его для этого. Так что Typescript и ESX независимы. Как сказал Басарат, Typescript дает вам проверку типов во время компиляции: возможность и обозначения для определения типов в вашем коде. Чтобы нарисовать картину того, как это можно использовать, вот надуманный пример. Если у вас есть данные, поступающие из API ...
type Category = "Kitchen" | "Hardware" | "Linens";
//dont know exactly what users[n].about looks like yet
type Data = {
users: {name: string, id: string, about: any}[];
products: {name: string, id: string: category: Category}[];
}
export async function getUsers() {
const data: Data = await fetch.get('localhost:3000/api');
return data.users.map(u => u.name);
}
Здесь есть ряд преимуществ.
- Когда пишу
data.users.map
, моя IDE знает, что пользователи - это массив, и предлагает функции массива для меня.
- Моя IDE выделит мне красную линию, если я попытаюсь выполнить функцию, не являющуюся массивом, для массива.
- Когда я пишу эту часть
u => u.name
, моя IDE будет знать тип U, а также автозаполнение u.name и u.id для меня
- Моя IDE выдаст мне сообщение об ошибке красной линии, если я попытаюсь ввести что-то еще, кроме этих двух свойств. Мне не нужно console.log, чтобы перепроверить на предмет опечаток.
Кроме того, если я попытаюсь создать функцию addProduct
, я смогу также извлечь определение типа для Product
и использовать его снова так:
export function addProduct(product: Product) {
data.products.push(product);
}
... если вы попытаетесь использовать эту функцию, но не используете одну из строк, определенных в Category
выше, вы также получите сообщение об ошибке!
addProducts({name: "Missile Launcher", id: "Boom10001", Category: "Artillary"});