当扩展路由 route 的 meta 属性时, typescript 无法推导出来属性的类型, 这里会报错 unkonw 无法赋值给 string 类型
const name = ref < string > ''
route.meta.name = name.value
{
meta: {
name: 'sdfsdf'
}
}在这里 router 里面的类型声明, 意思就是 meta 是一个索引是 string, number, symbol 的对象, 每一个属性的值都是 unknown
meta?: RouteMeta;
export declare interface RouteMeta extends Record<string | number | symbol, unknown> {
}解决:
可以通过扩展 RouteMeta 接口来输入 meta 字段：
import 'vue-router'
declare module 'vue-router' {
interface RouteMeta {
// 是可选的
isAdmin?: boolean
// 每个路由都必须声明
requiresAuth: boolean
}
}本质就是通过扩展 module vue-router, 达到扩展 RouteMeta 的目的 module 扩展 vue-router 文档
- 使用 defineProps 设置默认值
// 定义props 类型
interface propsType {
pageSize?: number,
total?: number,
currentPage?: number,
}
// 设置默认值
const props = withDefaults(defineProps<propsType>(), {
pageSize: 20,
total: 40,
currentPage: 1
})- 关于 vue ref 里面出现
never类型
如果不加断言会提示 number 类型赋值给 never 类型
const option = ref({
title: {
text: "Traffic Sources",
left: "center"
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: "vertical",
left: "left",
data: ["Direct", "Email", "Ad Networks", "Video Ads", "Search Engines"]
},
series: [
{
name: "Traffic Sources",
type: "pie",
radius: "55%",
center: ["50%", "60%"],
data: [] as { name: string, value: number }[],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
}
}
]
});
option.value.series[0]['data'] = [{ value: 335, name: "Direct" },
{ value: 310, name: "Email" },
{ value: 234, name: "Ad Networks" },
{ value: 135, name: "Video Ads" },
{ value: 1548, name: "Search Engines" }]- 关于 typeof , 作用就是把变量或者对象的类型取出来
const ojb = {
name: 'sfdsdf',
friend: ['sdfdsf']
}
type o = typeof ojb // 这里面 o 相当于 下面的c
type c = {
name: string
friend: string[]
}关于 vite 打包后白屏的问题, 需要配置下 base:'./' 相对路径
watch 监听一个对象的属性, 例如监听 props 里面的一个属性, 必须通过一个函数来返回这个值
watch(
() => props.value,
(newValue: string, value) => {
if (!hasChange.value && hasInit.value) {
nextTick(() =>
window.tinymce.get(tinymceId.value).setContent(newValue || '')
)
}
}
)今天把 tinymce 富文本实现了, 参考了 tinymce-vue 的代码 地址
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent