TypeScript в приложении React вместо ES6?

Wondering what we can not achieve using ES6, which is possible by using TypeScript with React?

ТипБезопасность ?. TypeScript обеспечивает проверку типов время компиляции, чего нет в ES6/Pure JavaScript: http://www.typescriptlang.org//Почему TypeScript

Я уверен, вы знаете, что 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);
}

Здесь есть ряд преимуществ.

1. Когда я пишу data.users.map, моя IDE знает, что пользователи — это массив, и предлагает мне функции массива.
2. Моя IDE выдаст мне красную строку, если я попытаюсь выполнить функцию, не являющуюся массивом, в массиве.
3. Когда я пишу эту часть u => u.name, моя IDE будет знать тип U и автоматически предложит мне u.name и u.id
4. Моя IDE выдаст мне ошибку красной строки, если я попытаюсь ввести что-то еще, кроме этих двух свойств. Мне не нужно использовать console.info для двойной проверки на наличие опечаток.

Кроме того, если я попытаюсь создать функцию addProduct, я также могу извлечь свое определение типа для Product и снова использовать его следующим образом:

export function addProduct(product: Product) {
  data.products.push(product);
}

... если вы попытаетесь использовать эту функцию, но не используете одну из строк, определенных в Category выше, вы также получите сообщение об ошибке!

addProducts({name: "Missile Launcher", id: "Boom10001", Category: "Artillary"});