Блог

Я только начал использовать Typescript для интерфейсного веб-проекта. Моя цель — использовать ООП-подход. Итак, мое соглашение — это один класс для каждого файла (названный по классу, который он содержит).

Рассмотрим этот пример:

 //Car.ts
export default class Car {
    public startEngine (): void {
        console.log('vroom!');        
    }
}
  

 //RaceCar.ts
import Car from './Car';

export default class RaceCar extends Car {
    public startEngine (): void {
        console.log('!!VROOOOOMM!!');        
    }
}
  

 //index.ts 
import RaceCar from './RaceCar';
import Car from './RaceCar';

const car:Car = new RaceCar();

car.startEngine();
  

Этот код работает нормально, но у меня есть 2 вопроса:

• Когда я использую соглашение «один класс на файл» (с экспортом по умолчанию), это действительно раздражает при написании import Car from './Car'; . Есть ли короткий способ сделать это? Как макрос или что-то в этомроде? Я пробовал, import './Car'; но, конечно, это не импортирует Car символ…
• Еще одна неприятная вещь — импортировать Car и RaceCar в index.ts. Есть ли способ импортировать только гоночный автомобиль, который уже знает класс Race?

Другими словами, я ищу способ сделать что-то вроде включения C .

Когда я использую соглашение «один класс на файл» (с экспортом по умолчанию), действительно раздражает писать import Car из ‘./Car’;. Есть ли короткий способ сделать это? Как макрос или что-то в этомроде? Я пробовал импортировать ‘./Car’; но, конечно, это не импортирует символ Car…

Чтобы использовать Car, код должен будет сказать import Car from './Car' . Этот синтаксис в основном означает «запустите код в ./Car и назначьте его экспорт по умолчанию для Car «. import './Car' это законно, но это означает «запустите код в ./Car, но мне не нужно использовать то, что он экспортирует».

Тем не менее, различные IDE могут помочь вам автоматически заполнить импорт. Например, я использую Visual Studio Code, и если я использую Car где-то в своем коде без его импорта или определения, я получаю красное подчеркивание и могу затем нажать ctrl-пробел, чтобы автоматически импортировать его в большинстве случаев.

Еще одна неприятная вещь — импортировать Car и RaceCar в index.ts. Есть ли способ импортировать только гоночный автомобиль, который уже знает класс Race?

Если вам нужно напрямую ссылаться на какие-либо объекты, экспортируемые файлом Car, то вам нужно будет импортировать его. В вашем примере вы используете Car в качестве типа. Если вам это нужно, то вам нужно это импортировать. Тем не менее, в вашей ситуации я бы, вероятно, просто использовал RaceCar в качестве типа, поскольку это то, что вы все равно обновляете.

 import RaceCar from './RaceCar';

const car: RaceCar = new RaceCar();
car.startEngine();
  

TypeScript использует синтаксис ES6:

Согласно https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

Импортируйте весь модуль только для побочных эффектов, ничего не импортируя. Это запускает глобальный код модуля, но фактически не импортирует никаких значений.

 import '/modules/my-module.js';
  

Вам нужно импортировать символ, который вы хотите использовать:

 import myDefault from '/modules/my-module.js'; // myDefault is the default exported symbol in the module.
  

Следовательно, нет. Вам всегда нужно импортировать символ, который вы хотите использовать явно, и только из тех мест кода, где вам нужно их использовать.