【TypeScript】ts项目中引用第三方依赖包类型定义技巧

简言

在日常开发ts项目中，有时候使用第三方依赖包时，经常会碰到类型定义的时候。
记录下我的类型定义技巧。

第三方类型定义

下载vscode插件

若使用vscode，可以下载一个和（Auto Import - ES6, TS, JSX, TSX）类似的自动导入插件。

ts属性爆红处理

在使用第三方的组件时，传递的属性ts类型不对将会爆红，例如：

我们可以把属性移上去片刻将会出现提示信息，例如：

有时候会提示没有安装第三方依赖对应的@types包，安装就好。
大部分是类型不匹配，我们可以 ctrl + 左键，跳转查看属性定义详情，找到它原本的类型定义。

有大概三种情况：

• 有导出 — 然后分析右侧的类型定义是否导出，有导出的可以直接拿来用。
• 没导出的具体类型定义—需要你复制ts类型定义到本地ts声明。
• 没导出的范围类型定义— 有的只是笼统的范围定义，不是具体的类型定义，需要找到对应的具体定义。

像上述图片的属于第三种，没有导出的范围类型定义，意思是@react-navigation/drawer依赖包中Screen组件的component需要 **ScreenComponentType<ParamListBase, “AppTab”>**定义，ScreenComponentType需要替换成具体的DrawerScreenProps。
最后定义为：

结语

此技巧只适合第三方依赖别人已经定义好了的情况。
没定义好的，自己根据提示定义。