Vue3 + <настройка скрипта> + руководство Typescript

Vue.js
Vue3 + <настройка скрипта> + руководство Typescript

предисловие

Я считаю, что вы, читающие эту статью, должны интересоваться новыми технологиями и иметьvue3Мне нравится предоставленная настройка скрипта, но она все еще совершенствуется, поэтому есть еще много ям, на которые нужно наступить, и документация на данный момент не завершена.В этой статье в основном перечислено использование Vue3 + Vite + настройка скрипта в Typescript, я надеюсь, что это может помочь. Вы счастливы использовать его.

имя компонента имя

Именование компонентов упрощает поиск компонентов в инструменте отладки devtool.

Способ 1: Напишите еще один тег скрипта

<script lang="ts">
export default { name: 'MyComponent' };
</script>
<script setup lang="ts">
// 组件内容
</script>

Способ 2: именование файла vue

Например: MyComponent.vue

data( ref / reactive / computed )

<script setup lang="ts">
import { computed, reactive, ref } from '@vue/runtime-core';
type User = { name: string; password: string };

// ref
const msg = ref(''); //  会默认约束成 string 类型
const msg2 = ref<string>(''); //  可以通过范型约束类型
const user = ref({} as User); // 自定义类型强制转化 通过 user.value. 访问

// reactive
const obj = reactive({});
const user2 = reactive<User>({name: '', password: ''});
const user3 = reactive({} as User); // 自定义类型强制转化

// computed
const str3 = computed(() => ''); // 会默认约束成 string 类型
const user5 = computed<User>(() => {
  return { name: '', password: '' };
});
</script>

props

определить типы машинописных текстов, используя defineProps и как PropType

<script setup lang="ts">
import { defineProps } from '@vue/runtime-core';
// 特别注意：接口类型需要使用 import type 否则编译出错
import type { PropType } from '@vue/runtime-core'; 
type User = { name: string; password: string };

const props = defineProps({
  str: {
    type: String as PropType<string>,
    // string 首字母小写为 typescript 对应 js 中的基础类型
    default: ''
  },
  user: {
    type: Object as PropType<User>,
    default() {
      return {};
    },
  },
});

</script>

Template Refs

<template>
    <div ref="divRef"></div>
    <div :ref="(el) => setItemRef"></div>
</template>

<script setup lang="ts">
import { ref, useContext } from '@vue/runtime-core';

// const divRef = ref<HTMLElement>({} as HTMLElement); // 新版本已支持如下写法
const divRef = ref({} as HTMLElement);
const itemRefs = ref([] as Array<HTMLElement>);
function setItemRef(el: HTMLElement) {
  if (el) {
    itemRefs.value.push(el);
  }
}
</script>

Компонент Компонентизация

Методы компонента могут быть лучше подсказаны с помощью Typescript.

<!-- components/Dialog.vue -->
<template>...</template>
<script setup lang="ts">
import { useContext } from '@vue/runtime-core';

function open() {
  console.log('open dialog');
}
function close() {
  console.log('close dialog');
}
// 需要手动 expose 需要暴露给外部的方法
useContext().expose({
  open,
  close,
});
</script>

// src/components/dialog.d.ts 添加额外接口信息
export interface IDialog {
  open: Function;
  close: Function;
}

<template>
  <Dialog ref="dialogRef"></Dialog>
</template>

<script setup lang="ts">
// @ts-ignore
import Dialog from '@/components/Dialog.vue'; // 引入组件
import type { IDialog } from '@/components/dialog'; // 引入类型信息
import { ref } from '@vue/reactivity';

const dialogRef = ref({} as IDialog); // 将组件绑定接口信息
dialogRef.value.open(); // 这样在输入dialogRef.value. 时就会提示出已暴露的方法了
</script>

component_demo.gif

Суммировать

Хотя при использовании скриптовой настройки часто не остается и следа, такой способ написания действительно очень лаконичен, и будущее многообещающе. Я надеюсь улучшить его как можно скорее, и я надеюсь, что эта статья поможет вам пройти мимо~

Категории