Настройка TypeScript в Quasar

Для начала проекта на Quasar с TypeScript необходимо использовать официальный CLI. Команда quasar create <имя-проекта> предлагает выбор между JavaScript и TypeScript. При выборе TypeScript автоматически создаются конфигурации для:

  • tsconfig.json – основной файл настроек компилятора TypeScript.
  • Файлы .ts вместо .js для компонентов и сервисов.
  • Подключение типов для Vue и Quasar (@types/node, @types/jest, vue-tsc).

Пример команды:

quasar create my-app
# Выбираем TypeScript при выборе опций

После установки структура проекта будет включать директории src/boot, src/components, src/pages, где все новые файлы рекомендуют создавать с расширением .ts или .vue с <script lang="ts">.

Настройка tsconfig.json

Файл tsconfig.json содержит ключевые настройки компиляции:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.vue", "src/**/*.d.ts"],
  "exclude": ["node_modules"]
}

Ключевые моменты:

  • "strict": true активирует полный набор проверок типов.
  • "paths" позволяет использовать алиасы типа @/components/MyComponent.vue.
  • "jsx": "preserve" важен для корректной работы с Vue JSX.

Для проектов с Quasar рекомендуется добавить отдельный файл shims-vue.d.ts:

declare module "*.vue" {
  import { DefineComponent } from "vue";
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

Он обеспечивает корректное распознавание .vue файлов TypeScript.

Boot-файлы с TypeScript

Boot-файлы — это точка входа для инициализации плагинов и глобальных настроек. Для TypeScript их создают с расширением .ts:

import { boot } from 'quasar/wrappers';
import axios from 'axios';

export default boot(({ app }) => {
  app.config.globalProperties.$axios = axios;
});

При необходимости добавить типизацию:

import { App } from 'vue';
declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $axios: typeof axios;
  }
}

Это позволяет использовать this.$axios внутри компонентов с полной поддержкой TypeScript.

Компоненты с TypeScript

В .vue файлах используется синтаксис <script lang="ts">:

<template>
  <q-btn @click="increment" label="Нажми меня"/>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const count = ref<number>(0);

    const increment = () => {
      count.value++;
    };

    return { count, increment };
  }
});
</script>

Особенности использования Quasar с TypeScript:

  • Компоненты Quasar имеют встроенные типы, например QBtn уже типизирован.
  • ref и reactive корректно работают с типами TypeScript.
  • Использование defineComponent обеспечивает автодополнение и строгую проверку типов.

Vue Router и TypeScript

Для проектов с Quasar, использующих Vue Router, настройка типов важна:

import { RouteRecordRaw, createRouter, createWebHistory } from 'vue-router';
import Home from '../pages/Home.vue';

const routes: RouteRecordRaw[] = [
  { path: '/', component: Home }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

Ключевые моменты:

  • Тип RouteRecordRaw позволяет получать автодополнение при добавлении маршрутов.
  • Компоненты .vue корректно типизируются благодаря shims-vue.d.ts.

Vuex/Pinia и TypeScript

Для управления состоянием рекомендуется использовать Pinia с полным типизированием:

import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0 as number
  }),
  actions: {
    increment() {
      this.count++;
    }
  }
});

Преимущества TypeScript:

  • Строгая проверка типов состояния и действий.
  • Автодополнение при использовании store.count и store.increment() в компонентах.

ESLint и TypeScript

Quasar поддерживает ESLint для TypeScript через плагины:

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

Пример .eslintrc.js:

module.exports = {
  parser: '@typescript-eslint/parser',
  extends: [
    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended'
  ],
  rules: {
    '@typescript-eslint/no-unused-vars': ['error']
  }
};

Это позволяет поддерживать единый стиль кода и ловить ошибки на этапе разработки.

Интеграция с Quasar CLI

Quasar CLI автоматически поддерживает TypeScript:

  • quasar dev – компиляция и запуск с проверкой типов.
  • quasar build – сборка с учетом TypeScript.
  • quasar inspect – позволяет проверить итоговую конфигурацию Webpack для TypeScript.

Рекомендация: включить флаг strict и использовать vue-tsc --noEmit для проверки всех типов без компиляции.

Резюме по настройке

  • Все новые файлы создаются с расширением .ts или <script lang="ts">.
  • tsconfig.json и shims-vue.d.ts — обязательные файлы для корректной работы TypeScript.
  • Boot-файлы, компоненты, маршруты и хранилище состояния полностью типизируются.
  • ESLint и Quasar CLI поддерживают строгую проверку типов на этапе разработки и сборки.

Эта настройка обеспечивает безопасную разработку с автодополнением и проверкой типов на каждом уровне приложения Quasar.

Оглавление