Vue и TypeScript: настройка и best practices

1npm create vue@latest my-app
2# Выберите TypeScript

1{
2  "compilerOptions": {
3    "target": "ES2020",
4    "module": "ESNext",
5    "strict": true,
6    "jsx": "preserve",
7    "moduleResolution": "bundler",
8    "paths": {
9      "@/*": ["./src/*"]
10    }
11  }
12}

1<script setup lang="ts">
2interface Props {
3  title: string;
4  count?: number;
5  items: string[];
6}
7
8const props = defineProps<Props>();
9</script>

1<script setup lang="ts">
2interface Props {
3  title: string;
4  count?: number;
5  items?: string[];
6}
7
8const props = withDefaults(defineProps<Props>(), {
9  count: 0,
10  items: () => [],
11});
12</script>

1<script setup lang="ts">
2const props = defineProps({
3  title: {
4    type: String,
5    required: true,
6  },
7  count: {
8    type: Number,
9    default: 0,
10  },
11});
12</script>

1<script setup lang="ts">
2const emit = defineEmits<{
3  (e: 'update', value: string): void;
4  (e: 'delete', id: number): void;
5}>();
6
7function handleUpdate(value: string) {
8  emit('update', value);
9}
10</script>

1<script setup lang="ts">
2const emit = defineEmits<{
3  update: [value: string];
4  delete: [id: number];
5}>();
6</script>

1<script setup lang="ts">
2interface SlotProps {
3  item: string;
4  index: number;
5}
6
7defineSlots<{
8  default(props: {}): any;
9  item(props: SlotProps): any;
10}>();
11</script>

1<script setup lang="ts">
2const model = defineModel<string>();
3</script>

1const count = ref<number>(0);
2const user = ref<User | null>(null);

1interface State {
2  count: number;
3  items: string[];
4}
5
6const state = reactive<State>({
7  count: 0,
8  items: [],
9});

1const fullName = computed<string>(() =>
2  `${firstName.value} ${lastName.value}`
3);

1export function useLocalStorage<T>(key: string, initialValue: T) {
2  const storedValue = ref<T>(initialValue);
3
4  const setValue = (value: T) => {
5    storedValue.value = value;
6    localStorage.setItem(key, JSON.stringify(value));
7  };
8
9  return { value: storedValue, setValue };
10}
11
12// Использование
13const { value: theme, setValue: setTheme } = useLocalStorage<string>('theme', 'light');

1import { defineStore } from 'pinia';
2
3interface UserState {
4  name: string;
5  email: string;
6}
7
8export const useUserStore = defineStore('user', {
9  state: (): UserState => ({
10    name: '',
11    email: '',
12  }),
13  getters: {
14    fullName: (state) => `${state.name} ${state.email}`,
15  },
16  actions: {
17    async fetchUser(id: number) {
18      const user = await api.getUser(id);
19      this.name = user.name;
20      this.email = user.email;
21    },
22  },
23});

1export const useUserStore = defineStore('user', () => {
2  const name = ref('');
3  const email = ref('');
4
5  const fullName = computed(() => `${name.value} ${email.value}`);
6
7  async function fetchUser(id: number) {
8    const user = await api.getUser(id);
9    name.value = user.name;
10    email.value = user.email;
11  }
12
13  return { name, email, fullName, fetchUser };
14});

1declare module 'vue-router' {
2  interface RouteMeta {
3    requiresAuth?: boolean;
4    title?: string;
5  }
6}

1<script setup lang="ts">
2const route = useRoute<'/users/:id'>();
3const userId = route.params.id; // типизировано
4</script>

1interface User {
2  id: number;
3  name: string;
4  email: string;
5}
6
7type UserUpdate = Partial<User>;
8type UserCreate = Omit<User, 'id'>;
9type UserName = Pick<User, 'id' | 'name'>;

1interface Props<T> {
2  items: T[];
3  renderItem: (item: T) => string;
4}
5
6function renderList<T extends { id: number }>(props: Props<T>) {
7  return props.items.map(props.renderItem);
8}