如何使用 TypeScript 编写 React-Native 应用程序-JavaScript中文网-JavaScript教程资源分享门户

React-Native 是一个基于 React 的移动应用程序开发框架。它允许开发人员使用 JavaScript 和 React 组件来构建原生应用程序。然而，随着应用程序变得越来越复杂，JavaScript 开发可能会变得难以维护。这就是 TypeScript 出现的原因。TypeScript 是一种静态类型的 JavaScript 超集，它增加了代码的可读性和可维护性。这篇文章将介绍如何使用 TypeScript 编写 React-Native 应用程序。

为你的项目配置 TypeScript

为了使用 TypeScript，你首先需要在你的项目中添加它。你可以通过运行以下命令来安装 TypeScript：

npm install --save-dev typescript

在根目录下创建名为 tsconfig.json 的文件，如下所示：

// javascriptcn.com 代码示例
{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "lib": ["es6"],
    "jsx": "react-native",
    "noEmit": true,
    "isolatedModules": true,
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "exclude": ["node_modules"]
}

这个文件告诉 TypeScript 编译器将代码编译为 ES6，使用 CommonJS 模块以适应 React-Native，以及在 JSX 中使用 React-Native（这是一个必需的配置）。

创建一个 React-Native 应用程序

现在你可以创建一个简单的 React-Native 应用程序，并将其转化为 TypeScript。

使用以下命令创建 React-Native 应用程序：

npx react-native init MyTSApp

这里我们使用 TypeScript 的优势来创建一个好看的 UI，因此添加了一个简单的背景和文本标签到我们的应用程序中：

// javascriptcn.com 代码示例
import React from 'react';
import {View, Text, StyleSheet} from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello World!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 30,
  },
});

export default App;

你可以看到我们使用了 StyleSheet.create() 方法来定义我们的样式。

将 JavaScript 代码转化为 TypeScript

现在我们有了一个简单的 React-Native 应用程序，我们要将它转化为 TypeScript。让我们先从将我们的 App.js 文件转化为 App.tsx 文件开始。这个文件的结构如下：

// javascriptcn.com 代码示例
import React from 'react';
import {View, Text, StyleSheet} from 'react-native';

const App: React.FC = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello World!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 30,
  },
});

export default App;

我们为我们的 App 组件添加了一个类型 <React.FC>。这意味着 App 组件接受一个 props 对象并返回一个 ReactNode 类型的元素。如果你不需要 props，可以省略类型，如下所示：

const App = () => {
  // ...
};

TypeScript 简单的输入验证

对于一个简单的例子，让我们假设我们有一个严重的输入验证错误。在我们的应用中，我们想要确保用户输入时间戳格式的字符串。让我们添加一个 TimestampInput 组件并添加验证：

// javascriptcn.com 代码示例
import React, {useState} from 'react';
import {View, Text, StyleSheet, TextInput} from 'react-native';

interface Props {
  label?: string;
  value: string;
  onUpdate: (timestamp: string) => void;
  error?: string;
}

const TimestampInput = ({label, value, onUpdate, error}: Props) => {
  const [inputValue, setInputValue] = useState(value);

  const handleChangeText = (text: string) => {
    if (text.trim().match(/^\d{4}\-\d{2}\-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z$/)) {
      setInputValue(text);
      onUpdate(text);
    } else {
      setInputValue(text);
      onUpdate(undefined);
    }
  };

  return (
    <View>
      {label && <Text style={styles.label}>{label}</Text>}
      <TextInput style={[styles.input, error && styles.error]} value={inputValue} onChangeText={handleChangeText} />
      {error && <Text style={styles.errorText}>{error}</Text>}
    </View>
  );
};

const styles = StyleSheet.create({
  label: {
    fontWeight: 'bold',
    marginBottom: 10,
  },
  input: {
    borderColor: 'gray',
    borderWidth: 1,
    borderRadius: 5,
    padding: 10,
    marginBottom: 10,
  },
  error: {
    borderColor: 'red',
  },
  errorText: {
    color: 'red',
  },
});

export default TimestampInput;

我们创建了一个接受 label、value、onUpdate 和 error 属性的组件，这与 <TextInput> 组件的 label、value、onChangeText 和 error 属性非常相似。但是，我们添加了验证以确保输入值是正确的时间戳格式。如果输入值是正确的格式，我们将调用 onUpdate 并传递正确的时间戳。否则，我们将传递 undefined。

现在，在我们的 App.tsx 文件中，我们可以使用 TimestampInput 组件：

// javascriptcn.com 代码示例
import React, {useState} from 'react';
import {View, Text, StyleSheet} from 'react-native';
import TimestampInput from './TimestampInput';

const App: React.FC = () => {
  const [timestamp, setTimestamp] = useState('');

  const handleUpdateTimestamp = (newTimestamp: string | undefined) => {
    setTimestamp(newTimestamp || '');
  };

  return (
    <View style={styles.container}>
      <Text style={styles.text}>Timestamp Input Example</Text>
      <TimestampInput label="Enter Timestamp" value={timestamp} onUpdate={handleUpdateTimestamp} error="Invalid Timestamp Format" />
      <Text>Output: {timestamp}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 30,
    marginBottom: 20,
  },
});

export default App;

总结

在本文中，我们学习了如何使用 TypeScript 编写 React-Native 应用程序。我们从在项目中配置 TypeScript 开始，然后创建了一个简单的 React-Native 应用程序，并将其转换为 TypeScript。最后，我们简单地介绍了如何使用 TypeScript 进行输入验证，并在我们的应用程序中使用它。通过这些实践，你可以更好地理解如何在 React-Native 项目中使用 TypeScript，提高了代码可读性和可维护性。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6501503495b1f8cacdf0de0c