TypeScript项目引用webdriverio类型报错及第三方npm包类型引入咨询

具体场景（WebdriverIO 类型报错修复） #

修复步骤 #

• 你导入类型的成员名填写错误，WebDriverLogTypes 实际是 @wdio/types 包中 WebDriver 命名空间下的 LogLevels 类型，正确导入方式如下：

// 仅导入类型，不会引入运行时代码
import type { Options } from '@wdio/types'

• 不要手动硬写wdioConfig的结构，直接从webdriverio官方提供的RemoteOptions类型中Pick你需要开放的字段，避免后续官方类型升级后出现不兼容问题。

修复后的完整类型代码 #

import type { Options } from '@wdio/types'

type TestUserConfig = {
  // 从官方RemoteOptions中挑选你要开放给用户配置的字段
  wdioConfig: Pick<Options.Remote, 'path'|'automationProtocol'|'logLevel'|'waitforTimeout'|'capabilities'> & {
    // 这里可以固定你不想让用户修改的字段
    path: '/wd/hub',
    automationProtocol: 'webdriver',
    capabilities: {
      browserName: 'chrome'
    }
  },
  domain: string,
  userLogin: string,
  userPassword: string,
  googleAuthSecret: string,
  expectedRole: string,
}

export type { TestUserConfig }

修改完成后logLevel会自动继承官方的联合类型，不会再报类型不兼容的错误。

通用问题最佳实践 #

1. 优先复用第三方包自带的类型
   如果第三方包本身是TS编写的，或者自带了类型声明文件（package.json中存在types/typings字段），直接从包中导入你需要的类型来约束参数即可，不要手动编写重复的类型定义，避免出现类型不一致的问题。导入类型时优先使用import type语法，避免将类型编译进运行时代码。
   示例：

// 从第三方包导入需要的类型
import type { Foo } from 'third-package'
import otherModule from 'third-package'

// 用导入的类型约束你的参数
function callOtherModule(arg: Foo) {
  otherModule(arg)
}

2. 第三方包无自带类型时使用@types包
   很多没有自带类型的JS包，社区已经维护了对应的类型声明，存放在@types/[包名]的npm包中。你只需要安装对应的类型包即可，TS会自动读取这些类型声明。
   安装示例（以lodash为例）：

npm install -D @types/lodash

安装完成后就可以正常导入lodash的相关类型使用，TS也会对调用做自动校验。

3. 无官方/社区类型时自行编写声明文件
   如果既没有自带类型也没有对应的@types包，可以在项目中创建.d.ts类型声明文件，自己定义用到的包的类型：

// global.d.ts
declare module 'third-package' {
  type Foo = 'foo'
  export default function otherModule(arg: Foo): void
}

编写完成后TS会自动加载该声明，即可实现调用校验。

内容的提问来源于stack exchange，提问作者d.k