热搜:前端 nest neovim nvim

TS的工具类型

lxf2023-06-16 03:17:31

Partial

部分类型

interface User{
   id: string;
   name: string;
}
const user:Partial<User> ={
    // 此时就可以不传id
   name: 'ming'
}

Required

必填类型

interface User{
   id?: string;
   name: string;
}
const user:Required<User> ={
   // 此时就会因为缺少id报错
   // ts报错:Property 'id' is missing in type '{ name: string; }' but required in type 'Required<User>'.(2741)
   name: 'ming'
}

Readonly

只读类型

interface User{
   id?: string;
   name: string;
}
const user:Readonly<User> ={
   name: 'ming'
}
user.name = 'ggg'  // 因为是只读,所以不能修改
// ts报错:Cannot assign to 'name' because it is a read-only property.(2540)

Exclude

排除类型

type Dir = "东" | "南" | "西" | "北"
type Dir2 = Exclude<Dir, '北'>
// 此时 type Dir2 = "东" | "南" | "西"

Extract

提取类型

type Dir = "东" | "南" | "西" | "北"
type Dir3 = Extract<Dir, '东' | '西'>
// 此时 type Dir3 = "东" | "西"

Pick

提取key类型

interface User{
   id: string;
   name: string;
   age:number;
}
type user1 = Pick<User,'id'|'name'>
// 此时 type user1 = {id:string; name:string}

Omit

排除key类型

interface User{
   id: string;
   name: string;
   age:number;
}
type user1 = Omit<User,'id'|'name'>
// 此时 type user1 = {age:number}

ReturnType

返回值类型

function f(a:number, b:number){
   return 'a+b'
}
type A = ReturnType<typeof f>
本网站是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。 在本网站中,您可以学习到最新的前端开发技术,了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例,让您可以快速掌握前端开发的核心技术和流程。 本网站还提供一系列实用的工具和插件,帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化,可以帮助您节省时间和精力,提升开发效率。 除此之外,本网站还拥有一个活跃的社区,您可以在社区中与其他前端开发者交流技术、分享经验、解决问题。我们相信,社区的力量可以帮助您更好地成长和进步。 在本网站中,您可以找到您需要的一切前端开发资源,让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭,一起探索前端开发的无限可能!