[ReactJS] 从 Javascript 到 Typescript

大家好，大家好！

本文也适用于 React 以外的领域，但我将重点介绍 React 生态系统，因此如果你使用 React 以外的其他方式，请跳过 React 部分。😉

所以，今天我将讨论如何从 JavaScript 世界迁移到 Typescript 的仙境。但在此之前，你需要先问自己一个问题：“我为什么首先需要使用 Typescript 🤔？”

说实话，Typescript 可能会带来一些学习难度，语法方面也可能会有一些变化，语法要么更短，要么更冗长。当然，除了更短和冗长之外，还有更多其他的变化。

那么，Typescript 的优点是：

• 从类型松散到类型化变量和函数。想象一下，你没有得到想要的输出，仅仅因为“1+1=11”。很荒谬吧？
• 详细性。这意味着您可以更好地阅读代码，因为您知道每个函数需要什么以及它的类型。
• 开发者体验。如果你喜欢 VS Code、JetBrains 或任何支持 Typescript 的 IDE，它会很有帮助，而且是真的非常有帮助，这样你就不用再费心猜测了，还能在团队协作时为你提供帮助。🤯
• 在设置过程中可能会花费一些时间，但随着您的操作，甚至在扩大规模的过程中，它会变得更加容易！
• 当然，Typescript 还支持 ES6 及更高版本！

公平地说，我还需要告诉你它的缺点是什么：

• 正如我之前所说，它在设置过程中会花费一些时间，而且也很复杂。
• 一开始可能会感到恼火，因为 Typescript 真的很讨厌any类型😣，但总有一天你会克服这一点的。
• Typescript 并不能保证您的安全性，但它可以保证您能减少错误。
• 由于我们需要在 Javascript 之上安装 Typescript，因此 Typescript 需要编译器，因此 Typescript 编译器 (TSC) 可以为您处理它。

好的，让我们深入研究一下这个动作！

安装 Typescript

那么，我必须安装 Typescript 吗？答案是肯定的，因为 Typescript 建立在 Javascript 之上，只不过之后需要将其转换为 Javascript。不过不用担心，Typescript 编译器 (TSC) 会帮你完成这项工作，所以你只需要创建一个.tsx文件，而不是.jsx.

别担心，安装相对简单。只需运行这个！

npm install typescript @types/node @types/react @types/react-dom @types/jest --dev

如果您使用任何框架，例如 create-react-app (CRA) 或 Gatsby 或 NextJS 或 Remix，我相信如果您想初始化项目，有更好的方法。

并且不要忘记，如果您想在任何项目中使用 Typescript，只需将文件扩展名从.jsx更改为.tsx！

从变量开始

一切始于type。

type YourVariable = string;

// is equivalent to

const yourVariable: string = "Hello DEV.to";

有一些基本类型可供您使用，例如，，，，string以及一些高级类型，例如，。但有时，您可能会感到困惑或不确定应该实现哪种类型，因此存在诸如，和之类的类型。无论如何，您都必须尽量避免使用，但对于刚开始学习 Typescript 的人来说，这不是什么大问题。numberbooleanbigintArrayFunctionunknownneveranyany

// One type
type VariableOne = string;
// More than one type
type VariableTwo = string | number;
// Object of types
type ObjectOne = {
  paramOne: string;
  paramTwo: number;
};

一点建议。在审查其他代码时，看到非常复杂的输入时不要感到不知所措，因为具体实现取决于你。随着你水平的提高，你最终会达到那个水平。

稍后，涉及类构造（OOP），您将了解interface，其行为与非常相似type，但也有一些差异，但通常，无论哪种方式都可以。

interface ObjectOne {
  paramOne: string;
  paramTwo: unknown;
}

我的另一个亮点是函数。你可以在传递参数时告诉 IDE 需要哪一个，如下所示。

type FunctionOne = (paramOne: string, paramTwo: number) => boolean;

// This function will accept `paramOne` as a string and `paramTwo` as a number and will return boolean

稍后，当你在代码中调用该函数时，IDE 的智能感知功能会根据你在类型中描述的准确提示你所需的内容。是不是很酷？

那么，您已经创建了您的类型，那么如何将其放入您的变量中？

// Step 1: Create your type
type VarOne = string;

// Step 2: Call your type
const varOne: VarOne = "";

很简单吧？告诉你，这并不难。你可能觉得这个例子很简单，等着看一个需要多个参数的更复杂的函数吧。

想要让你的类型可选吗？这里有个方法。

// Two way of writing it
type VarOne = {
  paramOne: string | undefined;
}

// Or, the far better way, and more readable!
type VarOne = {
  paramOne?: string;
};

Typescript 和 React

好了，您已经了解了如何构建类型。React 也是如此！React 提供了多种可用于开发组件的类型。例如，React.FC适用于函数式组件。

const Home: React.FC = () => {
  return (
    <div></div>
  );
};

React.FC是 React 提供的类型之一，它能帮助你识别函数式组件所需的内容。那么，如果你需要传递 props 怎么办呢？

const Home: React.FC<{ paramOne: string }> = ({ paramOne }) => {
  return (
    // Your JSX
  );
};

想要让你的代码更简洁吗？

type HomeProps = {
  paramOne: string;
}

const Home: React.FC<HomeProps> = ({ paramOne }) => {
  return (
    // Your JSX
  );
};

好了，关于 React 从 JavaScript 到 Typescript 的介绍就到这里。说实话，我第一次接触 Typescript 的时候，也有点不知所措，害怕差别太大。但最终，我爱上了 Typescript，从此再也没有回头。

如果你能走到这一步，那就意味着你已经熟悉了 Typescript，但是你可以通过 Typescript 学到很多东西，比如泛型类型等等。但进入 Typescript 并不像看起来那么难。

您可以浏览TS 文档和TS-React 备忘单以了解更多信息。

奖励内容

之前我写过一篇关于解构的文章。你可以阅读下面的文章👇

Javascript——解构事物！

Atif Aiman ・ 21年10月16日

#javascript #webdev #beginners

在评论部分，有人询问如何输入解构变量。

首先，如果您解构一个已经类型化的对象，您就不再需要类型化解构变量，因为类型化参数将被继承到下一个变量。

然后，如果你想解构一个没有类型的对象，也有办法！

type ObjectOne = any;

const objectOne: ObjectOne = {
  paramOne: "",
  paramTwo: 123,
  paramThree: true,
};

const {
  paramOne,
  paramFour = "Holla",
}: { paramOne: string, paramFour?: string } = objectOne;

好的，我会讲得慢一点。

在第一部分中，我声明了一个对象，但我不知道对象中的内容，因此我将其类型化为any。这也适用于外部 JSON 数据。

然后，假设objectOne我从某个 API 中获取了数据。强制转换ObjectOne为objectOne只是我模拟 API 的类型。

在这下面，我对数据进行了解构，并添加了解构后的数据类型（注意，paramFour 不在 中objectOne，而是在解构类型中是可选的）。所以，这就是对无类型解构数据进行类型化的方法。

就这样！如果有任何错误或建议，请在下方评论👇。我强烈建议你从 JavaScript 迁移到 Typescript，当然，这取决于你的使用场景。

朋友们，到此为止。再见，愿你们平安！