TypeScript в приложении React вместо ES6? - PullRequest
0 голосов
/ 03 мая 2019

Я видел проекты и примеры React, в которых люди решили использовать TypeScript вместо ES6. Хотите знать, что мы не можем достичь с помощью ES6, что возможно с помощью TypeScript с React?

Ответы [ 2 ]

2 голосов
/ 03 мая 2019

Хотите знать, чего мы не можем достичь с помощью ES6, что возможно при использовании TypeScript с React?

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

0 голосов
/ 03 мая 2019

Как я уверен, вы знаете, 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.log, чтобы перепроверить на предмет опечаток.

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

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

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

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