React-Native 是一个基于 React 的移动应用程序开发框架。它允许开发人员使用 JavaScript 和 React 组件来构建原生应用程序。然而，随着应用程序变得越来越复杂，JavaScript 开发可能会变得难以维护。这就是 TypeScript 出现的原因。TypeScript 是一种静态类型的 JavaScript 超集，它增加了代码的可读性和可维护性。这篇文章将介绍如何使用 TypeScript 编写 React-Native 应用程序。
为你的项目配置 TypeScript
为了使用 TypeScript，你首先需要在你的项目中添加它。你可以通过运行以下命令来安装 TypeScript：
npm install --save-dev typescript
在根目录下创建名为 tsconfig.json 的文件，如下所示：
-- -------------------- ---- -------
-
------------------ -
--------- ------
--------- -----------
------ --------
------ ---------------
--------- -----
------------------ -----
--------- -----
------------------ -----
--------------- ----
--
---------- ----------------
-这个文件告诉 TypeScript 编译器将代码编译为 ES6，使用 CommonJS 模块以适应 React-Native，以及在 JSX 中使用 React-Native（这是一个必需的配置）。
创建一个 React-Native 应用程序
现在你可以创建一个简单的 React-Native 应用程序，并将其转化为 TypeScript。
使用以下命令创建 React-Native 应用程序：
npx react-native init MyTSApp
这里我们使用 TypeScript 的优势来创建一个好看的 UI，因此添加了一个简单的背景和文本标签到我们的应用程序中：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ----- ----------- ---- ---------------
----- --- - -- -- -
------ -
----- -------------------------
----- ------------------------- -------------
-------
--
--
----- ------ - -------------------
---------- -
----- --
---------------- -------
----------- ---------
--------------- ---------
--
----- -
--------- ---
--
---
------ ------- ----你可以看到我们使用了 StyleSheet.create() 方法来定义我们的样式。
将 JavaScript 代码转化为 TypeScript
现在我们有了一个简单的 React-Native 应用程序，我们要将它转化为 TypeScript。让我们先从将我们的 App.js 文件转化为 App.tsx 文件开始。这个文件的结构如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ----- ----------- ---- ---------------
----- ---- -------- - -- -- -
------ -
----- -------------------------
----- ------------------------- -------------
-------
--
--
----- ------ - -------------------
---------- -
----- --
---------------- -------
----------- ---------
--------------- ---------
--
----- -
--------- ---
--
---
------ ------- ----我们为我们的 App 组件添加了一个类型 <React.FC>。这意味着 App 组件接受一个 props 对象并返回一个 ReactNode 类型的元素。如果你不需要 props，可以省略类型，如下所示：
const App = () => {
// ...
};TypeScript 简单的输入验证
对于一个简单的例子，让我们假设我们有一个严重的输入验证错误。在我们的应用中，我们想要确保用户输入时间戳格式的字符串。让我们添加一个 TimestampInput 组件并添加验证：
-- -------------------- ---- -------
------ ------ ---------- ---- --------
------ ------ ----- ----------- ---------- ---- ---------------
--------- ----- -
------- -------
------ -------
--------- ----------- ------- -- -----
------- -------
-
----- -------------- - -------- ------ --------- ------- ------ -- -
----- ------------ -------------- - ----------------
----- ---------------- - ------ ------- -- -
-- ---------------------------------------------------------------------- -
--------------------
---------------
- ---- -
--------------------
--------------------
-
--
------ -
------
------ -- ----- ------------------------------------
---------- --------------------- ----- -- -------------- ------------------ ------------------------------- --
------ -- ----- ----------------------------------------
-------
--
--
----- ------ - -------------------
------ -
----------- -------
------------- ---
--
------ -
------------ -------
------------ --
------------- --
-------- ---
------------- ---
--
------ -
------------ ------
--
---------- -
------ ------
--
---
------ ------- ---------------我们创建了一个接受 label、value、onUpdate 和 error 属性的组件，这与 <TextInput> 组件的 label、value、onChangeText 和 error 属性非常相似。但是，我们添加了验证以确保输入值是正确的时间戳格式。如果输入值是正确的格式，我们将调用 onUpdate 并传递正确的时间戳。否则，我们将传递 undefined。
现在，在我们的 App.tsx 文件中，我们可以使用 TimestampInput 组件：
-- -------------------- ---- -------
------ ------ ---------- ---- --------
------ ------ ----- ----------- ---- ---------------
------ -------------- ---- -------------------
----- ---- -------- - -- -- -
----- ----------- ------------- - -------------
----- --------------------- - -------------- ------ - ---------- -- -
------------------------- -- ----
--
------ -
----- -------------------------
----- ----------------------------- ----- --------------
--------------- ------------ ---------- ----------------- -------------------------------- -------------- --------- ------- --
------------- ------------------
-------
--
--
----- ------ - -------------------
---------- -
----- --
---------------- -------
----------- ---------
--------------- ---------
--
----- -
--------- ---
------------- ---
--
---
------ ------- ----总结
在本文中，我们学习了如何使用 TypeScript 编写 React-Native 应用程序。我们从在项目中配置 TypeScript 开始，然后创建了一个简单的 React-Native 应用程序，并将其转换为 TypeScript。最后，我们简单地介绍了如何使用 TypeScript 进行输入验证，并在我们的应用程序中使用它。通过这些实践，你可以更好地理解如何在 React-Native 项目中使用 TypeScript，提高了代码可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6501503495b1f8cacdf0de0c