vue3中使用typescript小结

ref

const msg = ref<string>('')
const nme = ref<string | null>(null)
const isDone = ref<boolean>(false)
// 普通的button
const button = ref<HTMLButtonElement | null>(document.querySelector('button'))
// const button: HTMLButtonElement | null = document.querySelector('button')
// tableBody
const tableBody: HTMLTableElement | null = document.querySelector('#table-body')

const list = ref<Array<string>>(['apple', 'pear'])
const statusOptions = ref<Array<Object>>([
  {
    label: '启用',
    value: '0'
  },
  {
    label: '停用',
    value: '1'
  }
])

接口interface

interface DogType {
    id: string
    url: string
    height: number
    width: number
    test?: boolean
}

class Dog implements DogType {
    id: string
    url: string
    height: number
    width: number

    constructor(id: string, url: string, height: number, width: number) {
        this.id = id
        this.url = url
        this.height = height
        this.width = width
    }
}

类 class

class ShowImage {
    public static addData(data: DogType): void {
        const dog: Dog = new Dog(data.id, data.url, data.height, data.width)
        const tableRow: HTMLTableRowElement = document.createElement('tr')
        tableRow.innerHTML = `
            <td>${cat.id}</td>
            <td><img src="${cat.url}" /></td>
            <td>${cat.height.toString()}</td>
            <td>${cat.width.toString()}</td>
            <td>${cat.url}</td>
            <td><a href="#">X</a></td>
        `
        tableBody?.appendChild(tableRow)
    }
    public static deleteData(deleteButton: HTMLAnchorElement): void {
        const td = deleteButton.parentElement as HTMLTableCellElement
        const tr = td.parentElement as HTMLTableRowElement
        tr.remove();
    }
}

promise

async function getJSON<T>(url: string): Promise<T> {
    const response: Response = await fetch(url)
    const data: Promise<T> = await response.json()
    return data
}

async function getData(): Promise<void> {
    try {
        const dataJson: CatType[] = await getJSON<CatType[]>(url)
        const dataJson: CatType = json[0]
        ShowImage.addData(data)
    }
    catch (error: Error | unknown) {
        let message = ref<string>()
        if (error instanceof Error) {
            message = error.message
        } else {
            message = String(error)
        }
        console.log(error)
    }
}

button?.addEventListener<'click'>('click', getData);

tableBody?.addEventListener<'click'>('click', (e: MouseEvent) => {
    ShowImage.deleteData(<HTMLAnchorElement>e.target);
});

reactive

interface Info {
	name: string
	age: number
	address: string
	sex: string
	phone?: string
}

const infoRef = reactive<Info>({
	name: 'hello',
	age: 20,
	address: 'Beijing',
	sex: '男',
	phone: '123'
})

组件实例

import Dialog from '@/components/Dialog/index.vue'
// typescript内置的 InstanceType + typeof
// 定义组件的实例
const dialogRef = ref<InstanceType<typeof Dialog | null>>(null)

defineProps

interface Props {
	name: string
	age: number
	phone?: string
}

defineProps<Props>()

interface Emits {
  handleValChange: (val: string) => ()
  handleValUpdate: (val: string) => ()
}
const emits = defineEmits<Emits>()

ref 获取dom节点

// 初始节点可能是 null，所以要补全 null 类型
const ele  = ref<HTMLDivElement | null>(null)
<div ref="ele"></div>