使用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: '张三'
}
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类型检查
单行忽略(添加到特定行的行前来忽略这一行的错误)
跳过对某些文件的检查(添加到该文件的首行起作用)
也可以是当前script不需要ts校检
对某些文件进行检查