ts从单独的ts⽂件中导出interface
// utils.ts
export interface Configs {
command: string
output: string
}
export interface Device {
id: number
device_type: string
device_ip: string
device_address: string
device_backup_time: string
device_brand: string
device_hostname: string
device_serial_number: string
device_configs?: Configs[]
}
export class IDevice implements Device {
//定义 interface Device 的默认实现类,⽤于设置默认值
id: number = 1
device_type: string = ''
device_ip: string = ''
device_address: string = ''
device_backup_time: string = ''
device_brand: string = ''
device_hostname: string = ''
device_serial_number: string = ''
device_configs?: Configs[]
}
在其他.vue⽂件中导⼊interface
// detail.vue
import { ref, reactive } from 'vue'
import { IDevice, Device } from './utils'
/
/ 正确⽤法
const d = reactive<Device>(new IDevice())
d.device_address = 'xxxxxxxxxx'
// 但是以下⽤法vue3还不⽀持，已经提issue，期待解决
// defineProps不⽀持使⽤外部导⼊的类型，会报错：
// Internal server error: [@vue/compiler-sfc] type argument passed  to defineProps() must be a literal type, or a reference to an
// interface or literal type.
const s = withDefaults(defineProps<Device>(), {
device_address: 'ddddddddd',
})
解决办法：
在ts中我们还可以直接通过类型声明定义props或emits，直接在defineProps⽅法泛型传⼊类型就声明，defineEmits也是同理，下⾯⽤项⽬中的⼀个例⼦<script setup>
const props = defineProps<{
handle: "add" | "update"
parentId: number | null
flag: boolean
isDir: boolean
}>()
</script>
或者
如果props需要使⽤默认值就得⽤withDefaultsapi，下⾯是官⽅的例⼦interface Props {
msg?: string
reactive声明类型
labels?: string[]
}
const props = withDefaults(defineProps<Props>(), {
msg: 'hello',
labels: () => ['one', 'two']
})

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。