在 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 的依赖:

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

初始化 TypeScript:

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

添加 React 和 React Native 的类型:

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

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

1
2
3
4
5
6
7
8
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer')
},
getSourceExts() {
return ['ts', 'tsx']
},
}

*.d.ts 中声明 moduletype

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

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

1
2
3
4
5
6
7
8
/**
* @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;
}