TypeScript调用atom-select-list的SelectListView类报构造函数错误

I'm working on an Atom package written in TypeScript, and I'm trying to use the native JavaScript class SelectListView from the atom-select-list dependency. I added a declaration file for this third-party package and imported it like this:

/// <reference path="../types/atom-select-list.d.ts"/>
import {SelectListView} from 'atom-select-list';

After compilation, this becomes:

const atom_select_list_1 = require("atom-select-list");

However, I'm hitting this runtime error:

~\atom-indent-detective\dist\selector.js:11
Hide Stack Trace
TypeError: atom_select_list_1.SelectListView is not a constructor
at Object.selector_show (~\atom-indent-detective\dist\selector.js:11:26)
at HTMLElement.indentDetectiveChooseIndent (../lib/indent-detective.ts:1:12)
at CommandRegistry.handleCommandEvent (~\atom-nightly\app-1.46.0-nightly8\resources\app\static<embedded>:11:349292)
at CommandRegistry.dispatch (~\atom-nightly\app-1.46.0-nightly8\resources\app\static<embedded>:11:347767)
at HTMLSpanElement.view.onclick (~\atom-indent-detective\dist\status.js:24:34)

The error points to this line in my TypeScript code:

indentListView = new SelectListView(...)

Which compiles to:

indentListView = new atom_select_list_1.SelectListView({...})

Here's my tsconfig.json configuration:

{
 "compilerOptions": {
 //// Linting Options - Uncomment options to get more features (usually more restrictive)
 // "strict": true, // includes all of the following and more
 "strictNullChecks": true,
 // "forceConsistentCasingInFileNames": true,
 "noUnusedLocals": true,
 "noUnusedParameters": true,
 "noImplicitReturns": true,
 "noImplicitAny": true,
 // "noImplicitThis": true,
 "noFallthroughCasesInSwitch": true,
 "allowJs": true,
 //// Compilation options
 "declaration": true,
 "emitDecoratorMetadata": true,
 "esModuleInterop": true,
 "experimentalDecorators": true,
 "incremental": true,
 "inlineSourceMap": true,
 // "preserveConstEnums": true,
 // "sourceMap": true,
 "preserveSymlinks": true,
 "removeComments": true,
 // "jsx": "react",
 // "jsxFactory": "etch.dom",
 "lib": [
 "ES2018",
 "dom"
 ],
 "target": "ES2018",
 "module": "commonjs",
 "moduleResolution": "node",
 // "noLib": false,
 // "importHelpers": true, // if true you should add tslib to deps
 // "skipLibCheck": false,
 "outDir": "../dist"
 },
 "compileOnSave": true
}

And my Babel config in package.json:

"babel": {
 "presets": ["@babel/typescript"],
 "plugins": [
 "@babel/proposal-class-properties",
 "@babel/proposal-object-rest-spread",
 "@babel/plugin-transform-runtime"
 ],
 "ignore": ["node_modules", "src/test"]
}

Troubleshooting & Solutions #

This error almost always stems from a mismatch between how atom-select-list exports its SelectListView class and how you're trying to import it in TypeScript. Let's walk through the most likely fixes:

1. Adjust Your Import Syntax #

Many Atom packages use CommonJS-style default exports instead of named exports. Try switching to a default import:

/// <reference path="../types/atom-select-list.d.ts"/>
import SelectListView from 'atom-select-list';

If that doesn't work, you can also try directly using CommonJS require syntax to bypass any TypeScript import translation quirks:

// If the class is the default export
const SelectListView = require('atom-select-list').default;

// Or if it's exported directly as the module itself
const SelectListView = require('atom-select-list');

2. Fix Your Declaration File #

Your atom-select-list.d.ts might not correctly reflect the package's actual export structure. To fix this:

1. Check the main entry file of atom-select-list (usually in node_modules/atom-select-list/index.js) to see how it exports the class.
   • If you see module.exports = SelectListView, it's a default export.
   • If you see module.exports.SelectListView = SelectListView, it's a named export.
2. Update your declaration file to match:
   • For default exports:

     declare module 'atom-select-list' {
       export default class SelectListView {
         constructor(options: { /* Define your option types here */ });
         // Add methods/properties as needed
       }
     }
     

   • For named exports:

     declare module 'atom-select-list' {
       export class SelectListView {
         constructor(options: { /* Define your option types here */ });
         // Add methods/properties as needed
       }
     }
     

3. Verify Module Configuration #

You already have esModuleInterop: true in your tsconfig.json (which enables allowSyntheticDefaultImports automatically), which helps TypeScript handle CommonJS modules smoothly. Double-check that your Babel configuration isn't conflicting with TypeScript's module output: since you're compiling to CommonJS with TypeScript, ensure Babel isn't reprocessing modules into a different format.

After making any changes, recompile your package with tsc (or your build command) and restart Atom to test if the error is resolved.

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