Как я могу получить доступ к имени класса, если я использую import * в JavaScript?

#javascript #es6-modules

#javascript #es6-модули

Вопрос:

Внутри заголовка index.html :

 <script src="main.js" type="module"></script>
 

user.js файл:

 export default class User {

    constructor(name, age){
        this.name = name;
        this.age = age;
    }

}

export function printName(user) {
    console.log(`User's name is ${user.name}`);
}

export function printAge(user){
    console.log(`User is ${user.age} years old`);
}
 

Это main.js сработало бы:

 import User, { printName, printAge } from '/user.js'
const user = new User('Bob', 11);
console.log(user)
printName(user)
 

Но это не сработает, поскольку он не распознает экспортированный класс

 // name User if I use `import *` to import everything:
import * as MyUser from '/user.js'
const user = new MyUser.User('Bob', 11);
console.log(user)
printName(user)
 

Это ошибка, которую я получаю: Uncaught TypeError: MyUser.User is not a constructor

Комментарии:

1. Ответ Берги, конечно, правильный, но для максимальной гибкости я рекомендую вам изменить его на export class MyUser {...} , а затем позже export default MyUser . Тогда ваш именованный импорт будет работать так, как вы его написали.

Ответ №1:

Вы экспортировали класс по умолчанию, поэтому он будет доступен как MyUser.default в объекте пространства имен.

Если вы хотите получить к нему доступ как .User , не используйте экспорт по умолчанию. Я бы рекомендовал это для любого модуля, который экспортирует несколько привязок (с четким основным). Если важно, чтобы пользователь мог писать import User from … вместо import { User } from … , вы также можете экспортировать класс под несколькими именами:

 export class User {…}
export { User as default }