在前端开发中，我们通常需要进行数据类型校验，这也是一个非常基础的技能。而typescript通过静态类型检查和泛型的使用帮我们在这方面更容易实现。但在使用非typescript项目时，我们怎样方便地简化数据类型检查呢？这时候npm包ts-proptype-extractor就派上用场了。本文将介绍如何使用此工具，从而更方便地进行数据类型校验。
1. 简介
ts-proptype-extractor是一个能够在javascript代码中提取类型信息的npm包，针对非typescript项目提供类型推断的能力，让我们能够更容易地简化数据类型校验的代码。这个工具特别适用于react项目，使组件的prop校验变得更加容易。
2. 安装
使用npm或者yarn安装此包：
npm install ts-proptype-extractor yarn add ts-proptype-extractor
3. 使用
以下是一个简单的例子，假设有一个文件example.js，里面有一个名为User的类：
class User {
constructor(name, age, email) {
this.name = name;
this.age = age;
this.email = email;
}
}现在我们可以使用ts-proptype-extractor来提取User的类型信息：
-- -------------------- ---- -------
----- - --------- - - ---------------------------------
----- ------------- - -----------------
----- ----------------------------
---- ----------------------------
------ ----------------------------
---
-------------- - -
-----
-------------
--上面的代码就会获取User中的类型信息，并使用PropTypes来进行prop校验。不过需要注意的是，为了正确获取类中所有属性的类型，我们需要使用typescript的灵魂工具——类型扫描器（TypeScript Type Scanner）来扫描代码。
为此，我们需要新建一个tsconfig.json文件，并配置以下代码：
-- -------------------- ---- -------
-
------------------ -
---------- ----
------------------------ -----
------------------------- -----
--------- ------
--------- -----------
------ ------- -------
--------------- -----
------------------- -----
------------------- -------
------------------ -----
----------------------------------- -----
------ --------
------------ -----
-------------- ----
--
---------- -
--------------
-
-接着，我们在命令行运行以下代码：
tss src/**/*.js --emitDeclarationOnly
这会生成.d.ts文件，包括之前例子中的User类以及其它在目录src下的javascript文件中的类。
4. 示例
下面是一个更加完整的例子，展示如何在react组件中使用ts-proptype-extractor来进行prop校验。
假设我们有一个React组件，叫做UserList，它接受一个来自父组件的数组props - users：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- -------- --------------- -
----- - ----- - - ------
------ -
----
--------------- -- -
--- --------------
----------- ------------ - ------------
-----
---
-----
--
-现在我们可以利用ts-proptype-extractor来进行prop校验。首先，我们需要通过类型扫描器来获取所需类的类型信息：
tss src/**/*.js --emitDeclarationOnly
接着，我们新建一个UserListProps.js文件来定义UserList的prop：
const { PropTypes } = require('ts-proptype-extractor');
const { User } = require('./User');
const UserListProps = {
users: PropTypes.arrayOf(PropTypes.instanceOf(User)).isRequired,
};
module.exports = UserListProps;在UserListProps.js文件中，我们使用PropTypes.instanceOf(User)来定义users的类型，这也正是ts-proptype-extractor的神奇之处。这里的User就是我们在之前通过类型扫描器获取的类型。
最后，在UserList组件中引入UserListProps：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------
------ ------------- ---- ------------------
------ ------- -------- --------------- -
----- - ----- - - ------
------ -
----
--------------- -- -
--- --------------
----------- ------------ - ------------
-----
---
-----
--
-
------------------ - --------------4.1 注意事项
ts-proptype-extractor是基于类型扫描器工作的，所以我们需要在代码中使用JSDoc来明确变量类型，比如下面的例子：
/**
* @type {string}
*/
const name = 'John Doe';这能够帮助类型扫描器正确处理变量类型。
5. 结束语
通过使用ts-proptype-extractor，我们可以在非typescript的项目中更加方便、快捷地进行数据类型校验，更加容易地避免因类型错误而导致的bug。 希望本篇文章对您有所帮助。加油！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065b44c6eb7e50355dbe2b