Vue3+TS

使用ref获取dom节点是类型限制

import { ref } from "vue";
import LookApplyForm from "./components/LookApplyForm.vue";
const applyFormRef = ref<InstanceType<typeof LookApplyForm>>();
                                      
<LookApplyForm ref="applyFormRef" />

ref定义基础数据类型的ts限制

const num = ref<number>()

reactive定义引用数据的ts类型限制

interface State{
    curBtn: string;
    list: {task: string; _id: string | number; status: string}[];
    status?: boolean;
    o: JackpotItem | null;
}
const state = reactive<State>({
    list: [],
    curBtn: "all",
    status: true,
    o: null
})

定义数组中存放对象的ts类型限制

interface JackpotItem{
    title: string;
    id: number
}
const jackpot:JackpotItem[] =[
    {id:1, title: '任务一'},
    {id:2, title: '任务二'},
    {id:3, title: '任务三'}
]

Record限制引用数据类型

let json:{name: string,age?: number, [prop:string]: string | number | undefined}={
    name: '张三'
}

//Record
let json:Record<string, string | number >={
    a: '李四',
    b: 123
}

//类型别名
type Json = {
	name: string,
	age?: number,
    [prop:string]: string | number | undefined
}

//接口
interface Json{
    name:string;
    age?;number;
    [prop:string]: string | number | undefined
}

联合类型

type Child = Json & {childName: string}
let json:Child = {
    name: '张三',
    childName: '李四'
}

函数类型限制

function twoSum(a:number, b:number):number{
    return a + b;
}

//类型别名
type TwoSum = (a:number, b:number) => number;
const twoSum:TwoSum = (a, b) => {
    return a + b;
}

//接口
interface TwoSum{
    (a: number, b: number):number
}
const twoSum:TwoSum = (a, b) => {
    return a + b;
}

泛型

定义引用数据

//类型别名
type Json<T> = {
    foo:T
}

//接口
interface Json<T>{
    foo: T
}

//使用时传入实参
let json:Json<string> = {
    foo: 'sss'
}

定义函数

function twoSum<T, S>(a:T,b:S){
    
}

twoSum<number, number>(1, 2)

store状态机中的ts类型限制

动态绑定style

interface SureFormItemStyly {
  color: string;
  fontWeight: string;
  lineHeight: string;
  fontSize: string;
  margin: string
}
const sureFormItemStyly = {
  color: "rgba(0, 0, 0, 0.65)",
  fontWeight: "400",
  lineHeight: "22px",
  fontSize: "14px",
  margin: "10px 0",
} as (CSSProperties | SureFormItemStyly);

忽略ts类型检查

单行忽略(添加到特定行的行前来忽略这一行的错误)

//@ts-ignore

跳过对某些文件的检查(添加到该文件的首行起作用)

也可以是当前script不需要ts校检

// @ts-nocheck

对某些文件进行检查

// @ts-check