Question

我看过React项目和示例，人们决定使用TypeScript代替ES6。想知道我们使用ES6无法实现什么，将TypeScript与React一起使用可以做到这一点吗？

Answer 1

想知道我们使用ES6无法实现的事情，这可以通过将TypeScript与React一起使用来实现？

TypeSafety。 TypeScript提供编译时类型检查，而ES6 / Pure JavaScript不提供这些检查：http://www.typescriptlang.org/ / Why TypeScript

Answer 2

我确定您知道，ES6是javascript的附加功能。 Typescript是javascript的超集，也实现了这些功能。如果您还希望将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);
}

这里有许多好处。

编写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"});

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

2 个答案: