3.1 Vue.js и TypeScript
Vue.js и Svelte — это еще два популярных фреймворка для разработки пользовательских интерфейсов. В этой лекции вы научитесь использовать TypeScript с этими фреймворками, чтобы улучшить качество и производительность вашего кода.
Vue.js — это отличный фреймворк для создания пользовательских интерфейсов, который легко интегрируется с другими библиотеками и проектами. TypeScript можно использовать с Vue.js для улучшения типизации и автодополнения.
Установка и настройка Vue.js с TypeScript
1. Создание нового проекта с Vue CLI
Vue CLI позволяет быстро создать новый проект с поддержкой TypeScript.
npm install -g @vue/cli
vue create my-vue-ts-app
При создании проекта выберите мануальную настройку (Manual), затем выберите TypeScript.
2. Структура проекта
После создания проекта структура будет включать файлы конфигурации TypeScript:
my-vue-ts-app/
├── node_modules/
├── public/
├── src/
│ ├── assets/
│ ├── components/
│ │ └── HelloWorld.vue
│ ├── views/
│ │ └── Home.vue
│ ├── App.vue
│ ├── main.ts
├── tsconfig.json
├── package.json
└── README.md
3. Пример компонента с TypeScript
src/components/HelloWorld.vue:
<!-- Шаблон компонента, отвечающий за визуальное представление -->
<template>
<div class="hello">
<!-- Интерполяция свойства msg для отображения текста в заголовке -->
<h1>{{ msg }}</h1>
</div>
</template>
<script lang="ts">
// Импорт необходимых функций и типов из Vue
import { defineComponent, PropType } from 'vue';
// Специальная функция Vue, которая используется
// для определения и создания компонентов
export default defineComponent({
name: 'HelloWorld',
// Определение входных параметров (props) компонента
props: {
// Свойство msg, тип данных — строка
msg: {
// Явно указываем тип свойства как строку
type: String as PropType<string>,
// Свойство обязательно для передачи
required: true
}
}
});
</script>
/* Стили, применяемые только к данному компоненту */
<style scoped>
h1 {
color: #42b983;
}
</style>
В этом примере компонент HelloWorld типизирован с использованием TypeScript. Пропс msg определен как обязательный строковый тип.
4. Типизация данных и методов
src/views/Home.vue:
<!-- Шаблон компонента, отвечающий за визуальное представление -->
<template>
<div class="hello">
<!-- Интерполяция свойства msg для отображения текста в заголовке -->
<h1>{{ msg }}</h1>
</div>
</template>
<script lang="ts">
// Импорт необходимых функций и типов из Vue
import { defineComponent, PropType } from 'vue';
// Специальная функция Vue, которая используется
// для определения и создания компонентов
export default defineComponent({
name: 'HelloWorld', // Имя компонента
// Определение входных параметров (props) компонента
props: {
// Свойство msg, тип данных — строка
msg: {
// Явно указываем тип свойства как строку
type: String as PropType<string>,
// Свойство обязательно для передачи
required: true
}
}
});
</script>
/* Стили, применяемые только к данному компоненту */
<style scoped>
h1 {
color: #42b983;
}
</style>
В этом примере мы используем TypeScript для типизации данных и методов компонента.
3.2 Svelte и TypeScript
Svelte — это компилятор, который преобразует декларативные компоненты в высокоэффективный императивный JavaScript. Использование TypeScript с Svelte помогает улучшить качество кода и автодополнение.
Установка и настройка Svelte с TypeScript
1. Создание нового проекта с шаблоном Svelte
Для создания нового проекта Svelte с поддержкой TypeScript используйте шаблон Svelte:
npx degit sveltejs/template my-svelte-ts-app
cd my-svelte-ts-app
2. Добавление TypeScript
Установите необходимые зависимости для TypeScript:
npm install --save-dev typescript svelte-preprocess @tsconfig/svelte @types/node
Создайте файл tsconfig.json в корне проекта.
Пример tsconfig.json:
{
"extends": "@tsconfig/svelte/tsconfig.json",
"include": ["src/**/*"],
"exclude": ["node_modules/*", "__sapper__/*", "public/*"]
}
3. Настройка Svelte для использования TypeScript
Обновите конфигурацию Svelte для поддержки TypeScript. Создайте файл svelte.config.js.
Пример svelte.config.js:
// Импортируем пакет для предобработки Svelte файлов
const sveltePreprocess = require('svelte-preprocess');
// Экспортируем конфигурацию, которая включает
// предобработку файлов Svelte
module.exports = {
preprocess: sveltePreprocess()
};
Переименуйте src/main.js в src/main.ts и обновите его.
Пример src/main.ts:
// Импортируем главный компонент приложения
import App from './App.svelte';
const app = new App({
// Создаем экземпляр приложения и указываем, что компонент будет монтироваться в тело документа
target: document.body
});
// Экспортируем экземпляр приложения для дальнейшего использования
export default app;
4. Пример компонента с TypeScript
src/App.svelte:
<!-- Шаблон компонента, отвечающий за визуальное представление -->
<main>
<!-- Отображаем заголовок, используя интерполяцию переменной name -->
<h1>Hello {name}!</h1>
</main>
/* Стили, применяемые только к данному компоненту */
<style>
main {
text-align: center;
padding: 1em;
max-width: 240px;
margin: 0 auto;
}
h1 {
color: #ff3e00;
}
</style>
В этом примере компонент App использует TypeScript для типизации переменной name.
5. Типизация данных и методов
src/components/Counter.svelte:
<script lang="ts">
// Импортируем функцию для создания событий
import { createEventDispatcher } from 'svelte';
// Создаем диспетчер событий для передачи данных из компонента
const dispatch = createEventDispatcher();
let count: number = 0;
function increment(): void {
count += 1;
dispatch('countChanged', { count });
}
</script>
<button on:click={increment}>
<!-- Отображаем кнопку, текст которой включает текущее значение переменной count -->
Count is {count}
</button>
3.3 Интеграция с экосистемой
Использование TypeScript с Vue.js и Svelte позволяет интегрироваться с различными инструментами и библиотеками, улучшая разработку и поддержку проектов.
Интеграция с Vuex в Vue.js
Vuex — это библиотека для управления состоянием в приложениях Vue.js. Использование TypeScript с Vuex позволяет улучшить типизацию и автодополнение.
Пример использования Vuex с TypeScript:
1. Установка Vuex
npm install vuex@next --save
npm install @types/vuex --save-dev
2. Создание хранилища (store):
src/store/index.ts:
import { createStore } from 'vuex';
interface State {
count: number;
}
const state: State = {
count: 0
};
export const store = createStore({
state,
mutations: {
increment(state) {
state.count += 1;
}
}
});
3. Использование хранилища в компоненте:
src/components/Counter.vue:
<template>
<div>
<p>{{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script lang="ts">
import { defineComponent, computed } from 'vue';
import { useStore } from 'vuex';
export default defineComponent({
name: 'Counter',
setup() {
const store = useStore();
const count = computed(() => store.state.count);
function increment() {
store.commit('increment');
}
return {
count,
increment
};
}
});
</script>
<style scoped>
button {
margin-top: 10px;
}
</style>
3.4 Интеграция с Sapper в Svelte
Sapper — это фреймворк для создания веб-приложений с использованием Svelte. Он поддерживает TypeScript из коробки.
Примеры использования Sapper с TypeScript
1. Создание проекта с Sapper:
npx degit "sveltejs/sapper-template#rollup" my-sapper-ts-app
cd my-sapper-ts-app
2. Добавление TypeScript:
npm install --save-dev typescript @tsconfig/svelte @types/node
Создайте файл tsconfig.json:
{
"extends": "@tsconfig/svelte/tsconfig.json",
"include": ["src/**/*"],
"exclude": ["node_modules/*", "__sapper__/*", "static/*"]
}
3. Настройка Rollup для TypeScript:
rollup.config.js:
import svelte from 'rollup-plugin-svelte';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import typescript from '@rollup/plugin-typescript';
import sveltePreprocess from 'svelte-preprocess';
export default {
client: {
input: 'src/client.ts',
output: {
format: 'iife',
name: 'app',
file: 'public/build/bundle.js'
},
plugins: [
svelte({
preprocess: sveltePreprocess(),
dev: !production,
css: css => {
css.write('public/build/bundle.css');
}
}),
resolve({
browser: true,
dedupe: ['svelte']
}),
commonjs(),
typescript({ sourceMap: !production })
]
},
server: {
input: 'src/server.ts',
output: {
format: 'cjs',
file: 'server.js'
},
plugins: [
svelte({
preprocess: sveltePreprocess(),
generate: 'ssr',
dev: !production
}),
resolve({
dedupe: ['svelte']
}),
commonjs(),
typescript({ sourceMap: !production })
],
external: Object.keys(pkg.dependencies).concat(require('module').builtinModules)
}
};
Вот краткое описание ключевых свойств конфигурации Sapper:
1. Импортируемые модули:
- rollup-plugin-svelte: Плагин для обработки файлов Svelte.
- @rollup/plugin-commonjs: Плагин для преобразования CommonJS модулей в ES6.
- @rollup/plugin-node-resolve: Плагин для поиска модулей в node_modules.
- @rollup/plugin-typescript: Плагин для поддержки TypeScript.
- svelte-preprocess: Плагин для предобработки Svelte файлов с поддержкой различных синтаксисов.
2. Конфигурация клиентской части (client):
- input: Точка входа для клиентского приложения (src/client.ts).
- output: Настройки выходного файла.
- format: Формат сборки — iife (Immediately Invoked Function Expression) для работы в браузерах.
- name: Имя глобальной переменной приложения (app).
- file: Путь к выходному файлу — public/build/bundle.js.
- plugins: Массив плагинов для обработки клиентского кода:
- svelte: Обрабатывает Svelte компоненты с предобработкой и возможностью записи CSS в файл (public/build/bundle.css).
- resolve: Позволяет использовать модули из node_modules, исключая дубликаты Svelte.
- commonjs: Позволяет использовать CommonJS модули.
- typescript: Поддержка TypeScript с включением source maps в режиме разработки.
3. Конфигурация серверной части (server):
- input: Точка входа для серверного приложения (src/server.ts).
- output: Настройки выходного файла для сервера.
- format: Формат сборки — cjs (CommonJS).
- file: Путь к выходному файлу — server.js.
- plugins: Плагины, аналогичные клиентской части, с некоторыми изменениями:
- generate: 'ssr': Указывает на генерацию для серверного рендеринга.
- external: Зависимости, которые не должны быть включены в бандл сервера, основанные на pkg.dependencies и встроенных модулях Node.js.
Эта конфигурация настраивает сборку как клиентской, так и серверной частей приложения, обеспечивая поддержку Svelte, TypeScript и CommonJS модулей.
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ