React 应用程序中的 TypeScript 而不是 ES6？

Question

我已经看到人们决定使用 TypeScript 而不是 ES6 的 React 项目和示例。想知道使用 ES6 无法实现什么，而通过使用 TypeScript 和 React 来实现？

Answer 1

想知道使用 ES6 无法实现什么，而使用 TypeScript 和 React 可以实现吗？

类型安全?。 TypeScript 提供 编译时间 类型检查，这是 ES6 / Pure JavaScript 不提供的：http://www.typescriptlang.org/ / Why TypeScript

Answer 2

我相信您知道，ES6 是 javascript 的附加功能。 Typescript 是 javascript 的超集，也实现了这些功能。如果你也想通过 typescript 来利用 ES7 的特性，你可以配置它来做到这一点。所以 Typescript 和 ESX 是独立的。正如 Basarat 所说，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 知道 users 是一个数组，并为我建议数组函数。
2. 如果我尝试对数组执行非数组函数，我的 IDE 会给我一条红线。
3. 当我写这部分 u => u.name 时，我的 IDE 会知道 U 的类型，并为我自动建议 u.name 和 u.id
4. 如果我尝试输入除这两个属性之外的其他内容，我的 IDE 会给我一个红线错误。我不需要 console.log 来仔细检查是否有错别字。

此外，如果我尝试创建函数addProduct，我也可以提取Product 的类型定义并再次使用它，如下所示：

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

...如果您尝试使用该函数，但不使用上面Category 中定义的字符串之一，您也会收到错误消息！

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