在JavaScript文件中导入TypeScript类时如何保留类型信息？

核心原因 #

你启用了TypeScript对JS文件的类型检查，但编译后的JS文件本身不带类型信息，且原TS文件的混合导出方式导致自动生成的类型声明存在歧义，所以编辑器无法识别Person实例的name属性。

解决步骤 #

1. 生成类型声明文件
   在tsconfig.json中启用declaration选项，让TypeScript编译时自动生成对应的.d.ts类型声明文件：

   {
     "compilerOptions": {
       "declaration": true,
       // 其他编译配置（如target、outDir等）
     }
   }
   

   编译后，会在TS文件同级目录（或指定的outDir目录）生成Person.d.ts，文件内包含Person类的完整类型定义。

2. 统一TS文件的导出方式
   避免同时使用module.exports和export default，这会导致类型声明混乱，选择单一导出方式：

   • ES模块导出（推荐）：

     export default class Person {
       name: string
       
       constructor(name: string) {
         this.name = name
       }
     }
     

   • CommonJS导出：

     class Person {
       name: string
       
       constructor(name: string) {
         this.name = name
       }
     }
     
     export = Person;
     

3. 在JS文件中用JSDoc引入类型
   即使是JS文件，也可以通过JSDoc注释引用TS生成的类型，让编辑器识别类型信息：

   • CommonJS导入场景：

     /** @type {import('./Person').default} */
     const Person = require("./Person")
     
     const person = new Person("Joe")
     console.log(person.name)
     

   • ES模块导入场景：

     /** @type {import('./Person').default} */
     import Person from "./Person";
     
     const person = new Person("Joe")
     console.log(person.name)
     

4. 确保编辑器识别类型文件
   检查tsconfig.json的include配置，确保包含TS源文件、生成的.d.ts文件以及需要检查的JS文件：

   {
     "include": ["**/*.ts", "**/*.d.ts", "**/*.js"]
   }
   

内容的提问来源于stack exchange，提问作者JameEnder