我们应该将 TypeScript 与 React Native 一起使用吗？

React Native 用于为 Android 和 iOS 平台创建应用程序。它允许您为两个平台使用单个代码库。 React Native 提供的最大优势之一是它很容易学习，因为你不需要为它学习一门全新的编程语言。因为它在后台使用了众所周知的 javascript。因此，已经熟悉 javascript 的开发人员可以轻松地转向 React Native 来构建移动应用程序。

但问题是 React Native 也支持 typescript 编程语言。但即使在今天，许多开发人员仍然使用 React Native 中的 javascript 来构建应用程序。在讨论是否应该在 React Native 中使用 typescript 之前，让我们先看一下 typescript。

TypeScript： TypeScript 是微软开发的一种编程语言，用于填补 JavaScript 的不足。

JavaScript 是一种松散类型的语言。这意味着您不必事先指定将存储在变量中的信息类型。 JavaScript 根据您分配给它的信息类型自动键入变量。

这种方式 JavaScript 的类型系统为您提供了更多的灵活性，但它缺乏强类型系统的优势。即使您尝试将错误类型的信息分配给对象，也不会出现任何错误。这就是 Typescript 发挥作用的地方。

Typescript 只是将类型添加到 javascript。在引擎盖下，它也是 javascript。添加类型意味着声明一个值或函数的类型或任何需要类型的东西。这意味着，通过声明真正的预期类型，系统可以确定我们传递给函数的值是否有效。这使我们能够在编译时而不是运行时发现任何可能的错误。

TypeScript 为 JavaScript 添加了额外的语法，以支持与您的编辑器的强大集成。这样您的编辑器可以及早发现错误。

打字稿的特点

1. TypeScript 基本上是底层的 JavaScript。 Typescript 采用 JavaScript 中的程序的基本构建块。因此，您只需要了解 JavaScript 即可使用 TypeScript。所有 TypeScript 代码都被转换成它的 JavaScript 等价物以供执行。
2. TypeScript 支持所有 JavaScript 库。您可以使用所有现有的 JavaScript 框架、工具等。
3. JavaScript 也是一种 TypeScript。这意味着任何有效的 .js 文件都可以转换为 .ts 文件并与其他 TypeScript 文件一起编译。
4. TypeScript 可跨所有浏览器和操作系统移植。它可以在任何运行 JavaScript 的环境中运行。 TypeScript 不需要任何特定的环境来执行。

语法： javascript 中的语法如下所示：

let varible_name = "GeeksforGeeks";

打字稿中的语法如下所示：

let varible_name: string = "GeeksforGeeks";

在打字稿中，我们还提供了变量的类型。

在 React Native 中使用 TypeScript 的优点：

1. 自我文档：当您开始在代码中编写变量和函数的类型时，您正在记录您期望在这些组件中的值。其他开发人员很容易更好地理解您的代码。
2. 重构变得容易：每当您犯任何错误，例如为变量提供错误的值或向函数传递错误的参数时，打字稿都会给您一个错误，以便您可以在运行应用程序之前纠正错误。
3. 轻松调试：使用 typescript 调试代码变得非常容易，因为您在代码本身中记录了所有类型。它还可以帮助其他开发人员使用相同的代码。
4. 有效输出：如果您编写了有效的打字稿，那么您可以自信地说它将生成有效的 JavaScript 输出。你对 javascript 没有同样的信心。
5. 文本编辑器或 IDE 也将帮助您：TypeScript 可以与所有编辑器和 IDE 集成。这允许您的编辑器使用 TypeScript 定义并自动完成代码，并让您知道要传递给组件的内容。
6. 它变得容易思考和发展：通过定义变量和函数的类型，您可以获得整个应用程序的结构。它可以帮助您更好地思考整个应用程序的范围和上下文。您可以轻松地扩展您的应用程序。
7. 易于采用：Typescript 不是一门全新的语言。如果您已经熟悉 javascript，那么您可以轻松学习 typescript。

没有一种编程语言是完美的。 Typescript 也有一些缺点。

在 React Native 中使用 TypeScript 的缺点：

1. 需要管理更多依赖项：您必须为创建的每个对象添加类型，并且在为其分配值时必须牢记这些类型。
2. 新语法：TypeScript 不是一种全新的编程语言，但它仍然带有一些新语法。您必须适应它，并且需要一些时间来适应它。
3. 耗时：通过为对象编写类型可以获得很多好处，但与纯 JavaScript 相比也非常耗时。
4. 缺乏知识：JavaScript 的使用比 Typescript 多。所以了解它的人越来越少。所以他们需要花一些时间来学习它以使用您的项目代码。

凭借所有这些优点和缺点，Typescript 仍然为您的项目提供了巨大的价值。使用 TypeScript 可以节省许多小时的调试时间。因此，你绝对应该在你的 React Native 项目中使用 TypeScript。

如何在 React Native 中使用打字稿：

第 1 步：打开终端并运行以下命令。它将在您的系统中全局安装 Expo CLI。

npm install -g expo-cli

第 2 步：现在，通过运行以下命令创建一个新的 React Native 项目。

expo init "Your_Project_Name"

第 3 步：您将被要求选择一个模板。选择空白（TypeScript）或选项卡（TypeScript）模板而不是第一个。

通过选择此模板，将为您生成一个集成了 typescript 的新 React Native 项目。

项目结构：它将如下所示。

项目结构

在以下示例中，我们将创建一个名为GeeksforGeeks.tsx的自定义组件，我们将在主App.tsx文件中呈现该组件。我们将向这个自定义组件传递一个对象，并且该组件还将包含该对象的类型定义。

创建一个名为GeeksforGeeks.tsx 的新文件。该文件是我们将在主App.tsx文件中呈现的自定义组件。

GeeksforGeeks.tsx 文件

示例：下面的示例将说明 TypeScript 与 React Native 的使用

第 1 步：打开GeeksforGeeks.tsx文件，在该文件中写入以下代码。该组件将从App.tsx文件中接收 1 个对象作为道具。这个对象将有 2 个属性，id 和 title。两者都是字符串类型，我们必须在这个组件中定义这些类型，因为我们使用的是 TypeScript。然后我们将简单地在屏幕上显示这个 id 和标题，并带有一些样式。

这基本上是 JavaScript，我们只为类型定义添加几行代码。您将在.tsx文件中编写此代码。

正如您在代码中看到的，我们为 GeeksforGeeksProps 提供了类型定义。您需要使用导出类型语法来定义所有类型。

GeeksforGeeks.tsx

import { StyleSheet, Text, View } from 'react-native';
import React from 'react';
  
export type GeeksforGeeksProps = {
    text: {
        id: string;
        title: string;
    }
}
  
const GeeksforGeeks = (props: GeeksforGeeksProps) => {
    return (
        
            
                {props.text.id}
            
                {props.text.title}
        
    )
}
  
export default GeeksforGeeks
  
const styles = StyleSheet.create({
    container: {
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: "#3B5323",
        height: 300,
        width: 300
    },
    id: {
        fontSize: 40,
        fontWeight: "bold",
        color: "#fff"
    },
    title: {
        fontSize: 40,
        fontWeight: "500",
        color: "#fff"
    }
})

第 2 步：打开App.tsx文件并在该文件中写入以下代码。

App.tsx是运行应用程序时首先呈现的主文件。在这个文件中，我们将创建一个不断调用的文本。我们将在 GeeksforGeeks 组件中将此文本作为道具传递，并将其呈现在主屏幕上。

这也基本上是 JavaScript，我们只为类型定义添加了几行代码。您将在.tsx文件中编写此代码。

应用程序.tsx

import { StyleSheet, Text, View } from 'react-native';
import GeeksforGeeks from './GeeksforGeeks';
  
export default function App() {
    const text = {
        id: "1",
        title: "GeeksforGeeks"
    }
  
    return (
        
            
        
    );
}
  
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
});

id 和 title 都有字符串类型。如果你不遵守这类规则，编辑器会给你一个错误。例如，如果您为 id 提供 1 而不是“1”，您的编辑器会告诉您“类型编号不可分配给类型字符串”。

这就是 TypeScript 将如何帮助您在执行代码之前解决错误。如果您的代码中没有任何错误，那么您将获得如下所示的成功输出。

输出：