在React Native中使用TypeScript

JavaScript是一门弱类型的编程语言,声明变量时不需要声明变量的数据类型,因此这门语言编写起来具有很强的灵活性。但是换句话说在开发大型项目或多人合作的项目中,JavaScript混乱的变量数据类型常常会让人很头疼。因此,引入“数据类型”的概念就十分有必要了。

关于TypeScript

TypeScript是一门由Microsoft开发和维护的JavaScript的超集。TypeScript可以使用JavaScript中的所有代码和编码概念,TypeScript是为了使JavaScript的开发变得更加容易而创建的。

  • TypeScript 从核心语言方面和类概念的模塑方面对 JavaScript 对象模型进行扩展。
  • JavaScript 代码可以在无需任何修改的情况下与 TypeScript 一同工作,同时可以使用编译器将
  • TypeScript 代码转换为 JavaScript。
  • TypeScript 通过类型注解提供编译时的静态类型检查。
  • TypeScript 中的数据要求带有明确的类型,JavaScript不要求。
  • TypeScript 为函数提供了缺省参数值。
  • TypeScript 引入了 JavaScript 中没有的“类”概念。
  • TypeScript 中引入了模块的概念,可以把声明、数据、函数和类封装在模块中。

TypeScript的优势

1. 静态输入:静态类型化是一种功能,可以在开发人员编写脚本时检测错误。查找并修复错误是当今开发团队的迫切需求。有了这项功能,就会允许开发人员编写更健壮的代码并对其进行维护,以便使得代码质量更好、更清晰。

2. 大型的开发项目:有时为了改进开发项目,需要对代码库进行小的增量更改。这些小小的变化可能会产生严重的、意想不到的后果,因此有必要撤销这些变化。使用TypeScript工具来进行重构更变的容易、快捷。

3. 更好的协作:当发开大型项目时,会有许多开发人员,此时乱码和错误的机也会增加。类型安全是一种在编码期间检测错误的功能,而不是在编译项目时检测错误。这为开发团队创建了一个更高效的编码和调试过程。

4. 更强的生产力:干净的ECMAScript 6代码,自动完成和动态输入等因素有助于提高开发人员的工作效率。这些功能也有助于编译器创建优化的代码。

在React Native中开启TypeScript支持

在React Native中添加TypeScript的依赖:

npm install typescript react-native-typescript-transformer --save-dev

初始化TypeScript:

yarn tsc --init --pretty --jsx react

添加React和React Native的类型:

npm install @types/react @types/react-native --save-dev

在根目录下新建rn-cli.config.js,在文件中写入如下内容:

module.exports = {
  getTransformModulePath() {
    return require.resolve('react-native-typescript-transformer')
  },
  getSourceExts() {
    return ['ts', 'tsx']
  },
}

在*.d.ts中声明module的type

React Native支持通过*.d.ts文件声明某个模块。当某个模块的作者没有提供对应的类型时,就能通过这种方式声明类型。

例如对react-native-extended-stylesheet模块的声明:

/**
 * @declare for react-native-extended-stylesheet
 */
declare module 'react-native-extended-stylesheet' {
  function value(expr: any, prop?: string): any;
  function create(obj: Object): any;
  function build(rawGlobalVars: any): void;
}

将最新的文章发送到你的邮箱

展示评论