Как использовать typescript в шаблоне Vue 2?

Чтобы использовать TypeScript в шаблоне Vue.js 2, вам понадобится несколько дополнительных шагов. Вот подробное объяснение того, как это сделать.

1. Установка необходимых пакетов
Первым шагом является установка пакетов, необходимых для работы с TypeScript внутри проекта Vue.js. Выполните следующую команду в командной строке, чтобы установить все необходимые зависимости:

npm install --save-dev typescript ts-loader

2. Создание файла конфигурации TypeScript
Далее вам нужно создать файл конфигурации TypeScript. Создайте файл с именем tsconfig.json в корневом каталоге вашего проекта и добавьте следующее содержимое в этот файл:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "jsx": "preserve",
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}

Здесь также можно настроить компилятор TypeScript по своему усмотрению. Однако важно указать, что "jsx": "preserve" использовано для сохранения шаблона Vue без преобразования его в createElement вызовы.

3. Настройка Webpack
Для использования TypeScript в шаблоне Vue.js, вам необходимо настроить Webpack. Откройте файл конфигурации Webpack (обычно webpack.config.js) и выполните следующие изменения:

module.exports = {
  // ...

  resolve: {
    extensions: ['.ts', '.js', '.vue', '.json'],
    alias: {
      '@': __dirname + '/src',
    },
  },

  module: {
    rules: [
      // ...
      {
        test: /.tsx?$/,
        exclude: /node_modules/,
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/.vue$/],
        },
      },
    ],
  },

  // ...
};

Здесь мы добавляем .ts в расширения, которые Webpack должен распознавать, а также настраиваем псевдоним "@", чтобы указать на каталог src.

4. Использование TypeScript в компонентах
Теперь вы можете использовать TypeScript в компонентах Vue. Создайте компонент с расширением .vue и добавьте следующую структуру:

<template>
  <div>
    {{ message }}
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';

@Component
export default class MyComponent extends Vue {
  message: string = 'Hello, World!';
}
</script>

Здесь мы используем декоратор @Component из пакета vue-property-decorator, который позволяет нам использовать декораторы в компонентах Vue с помощью TypeScript. В этом примере мы определяем свойство message с типом string и инициализируем его значением 'Hello, World!'.

5. Запуск компиляции и разработка
Теперь, когда все настроено, вы можете запустить сборку вашего проекта, выполнив команду:

npm run build

Или, если вы используете среду разработки, такую как Vue CLI, запустите команду:

npm run serve

В обоих случаях TypeScript будет компилироваться и включаться в итоговый бандл вашего приложения.

Вот и все! Теперь вы можете использовать TypeScript в шаблоне Vue 2, чтобы добиться более строгой типизации ваших компонентов и лучшей разработки.