对于阅读本文的其他人，请尝试将.js文件重命名为.ts

编辑：您还可以将“allowJs”：true添加到tsconfig文件中。

基于Retsam的回答，您还可以在Declarations.d.ts文件中使用通配符（*）。例如，如果您试图导入一个文件，例如.css或.webp文件，可以在文件类型声明的开头放置一个*。看起来像这样⤵︎

declare module '*.webp';

现在，您可以导入所需的所有.web文件，而不会出现任何linting错误。

不幸的是，包编写者是否对声明文件感到困扰，我们无法控制。我倾向于创建一个像index.d.ts这样的文件，其中包含各种包中所有缺失的声明文件：

索引.d.ts：

declare module 'v-tooltip';
declare module 'parse5';
declare module 'emoji-mart-vue-fast';

并在tsconfig.js中引用它：

"include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx",
    "index.d.ts" // this
  ]

这就是我工作的方式。

在我的例子中，我使用了一个没有定义类型的库：react mobile datepicker

a.在/src中创建文件夹。在我的例子中，我使用了以下路径：/src/typengs/。

b.创建.dts文件。例如：/src/typerings/react-mobile-datepicker.dts

c.我使用以下代码扩展其财产并使其类型安全：

declare module 'react-mobile-datepicker' {
  class DatePicker extends React.Component<DatePickerProps, any> {}

  interface DatePickerProps {
    isPopup?: boolean;
    theme?: string;
    dateConfig?: DatePickerConfig;
  }

  export interface DatePickerConfig {
    prop1: number;
    pro2: string;
  }
  export default DatePicker;
}

d.按照通常使用第三方库的方式导入类型。

import DatePicker, { DatePickerConfig, DatePickerConfigDate } from 'react-mobile-datepicker';

e.更改tsconfig.json并添加以下代码：

{
  "compilerOptions": {
    //...other properties
    "typeRoots": [
      "src/typings",
      "node_modules/@types"
    ]
  }}

链接到我用作来源的文章：

https://templecoding.com/blog/2016/03/31/creating-typescript-typings-for-existing-react-components

https://www.credera.com/insights/typescript-adding-custom-type-definitions-for-existing-libraries

对于安装自己的npm包的情况

如果您使用的是第三方软件包，请参阅下面的答案。

从package.json中的“main”：“dist/index.js”中删除.js。

"main": "dist/index",

还可以根据TypeScript文档在package.json中添加打字员：

"main": "dist/index",
"typings": "dist/index",

文件夹dist是TS编译器存储模块文件的位置。

这对我有用。

// modules.d.ts 
declare module 'my-module';

// tsconfig.json 
{
  ...
  "include": [
    ...
    "src", "modules.d.ts"
  ]
}

// Import
import * as MyModule from 'my-module'
...
const theModule = MyModule()
...