如何使用 React 定义编译 Typescript
介绍
Typescript 的流行度飙升，让开发人员能够像 JavaScript 一样接受它，甚至比 JavaScript 更受欢迎。它一开始确实看起来令人生畏，但一旦你掌握了它，它就会派上用场。Typescript 提供了许多优势，例如自动完成代码建议、在编译时突出显示错误以及简化调试过程，仅举几例。它可以编译为 JavaScript，也可以编译原生 JavaScript，为开发人员提供循序渐进的学习曲线。本指南探讨如何使用 Create-React-App 使用和编译带有 React 定义的 Typescript。
配置 Typescript
Typescript 允许您配置编译器，从而让您对编写代码有更细粒度的控制。您可以通过调整其严格模式来设置 ECMA 脚本的版本和错误优先级。它们的配置是在项目根目录中的tsconfig.json中完成的。您可以按照自己想要的方式修改它，并允许 Typescript 为您的项目设置默认配置。本指南中演示的示例为简单起见使用了默认配置。
在现有的 React 应用中设置 Typescript
如果您希望迁移使用 Create-React-App 构建的空 React 应用程序，则必须首先将所有必需的依赖项作为主依赖项安装到您的 React 项目中。在项目内部，运行以下命令：
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
这将安装所有必需的模块以及 Typescript。安装的附加模块是编译 Typescript 所需的声明文件。这些文件弥补了现有 JavaScript 代码和新 Typescript 代码之间的差距。它们主要负责您在编辑器中编写 Typescript 时获得的代码建议。
接下来，将index.js和App.js分别更改为index.tsx和App.tsx，并使用以下命令运行 React 开发服务器：
npm start
您会注意到 Create-React-App 注意到了这些更改并自动为您创建了一个tsconfig.json文件。因此，如果您已经有一个空的 React 项目，则无需转储它并创建一个新项目。您仍然可以在该项目中使用 Typescript，只需进行本节中显示的必要修改即可。
在新的 Create-React-App 中设置 Typescript
要预配置 Typescript，请使用--typescript标志创建一个空的 React 项目。运行以下命令：
npx create-react-app react-typescript-app --typescript
您会注意到，Create-React-App 为您创建了所有带有.tsx扩展名的文件以及开箱即用的tsconfig.json 。
在 Typescript 中创建组件
创建一个简单的MyHeader组件来呈现字符串。在 Typescript 中导入 React 的核心模块React涉及不同的语法，如下所示。
import * as React from 'react';
接下来，为MyHeader组件定义一个接口，该接口将作为props传递给组件。接口通过提供与对象键关联的类型的信息来定义对象的结构。状态变量也必须附带一个接口。
interface myInterface {
name: string;
}
myInterface规定对象将包含一个带有字符串值的键名。为该键分配不同的值将导致错误。
如下所示创建MyHeader组件。React.FunctionComponent表示你的组件是一个 hooks 组件。
const MyHeader: React.FunctionComponent<myInterface> = (props: myInterface) => (
<h1>Hola, {props.name}! </h1>
);
你的MyHeader.tsx应该如下所示：
import * as React from 'react';
interface myInterface {
name: string;
}
const MyHeader: React.FunctionComponent<myInterface> = (props: myInterface) => (
<h1>Hola, {props.name}! </h1>
);
export default MyHeader;
在根组件或App.tsx中渲染此组件。
import React from 'react';
import './App.css';
import MyHeader from './MyHeader';
function App() {
return (
<div className="App">
<MyHeader name="Developer"/>
</div>
);
}
export default App;
最后，通过运行以下命令编译所有 Typescript 代码：
npm start
结论
如果您有一个想要长期维护的 React 项目，使用 Typescript 是一个明智的选择。除了其他优点之外，它还使用类、状态、props 和接口的类型声明来记录您的代码，以供项目的未来开发人员使用。Create-React-App 可以轻松编译 Typescript，让您可以轻松地在 React 应用中编写和编译它。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~