[{"data":1,"prerenderedAt":255},["ShallowReactive",2],{"content:\u002Fposts\u002F2024\u002Fts-interface-and-type":3,"surround:\u002Fposts\u002F2024\u002Fts-interface-and-type":244},{"id":4,"title":5,"body":6,"canonical":224,"categories":225,"date":227,"description":224,"draft":228,"extension":229,"image":230,"meta":231,"navigation":232,"path":233,"permalink":224,"readingTime":234,"recommend":224,"references":224,"seo":239,"sitemap":240,"stem":241,"tags":242,"type":224,"updated":227,"__hash__":243},"content\u002Fposts\u002F2024\u002Fts-interface-and-type.md","TypeScript interface和type",{"type":7,"value":8,"toc":205},"minimark",[9,13,20,25,35,45,49,52,60,66,70,76,80,86,90,96,100,106,110,116,120,126,130,133,139,145,148,151,157,167,173,177,199],[10,11,12],"h2",{"id":12},"interface",[14,15,16],"blockquote",{},[17,18,19],"p",{},"和 abstract 抽象类想比 interface 中不能有具体代码实现。",[21,22,24],"h3",{"id":23},"类中实现-interface","类中实现 interface",[17,26,27,28,31,32],{},"在类中要实现 ",[29,30,12],"code",{"code":12},"，需要使用 ",[29,33,34],{"code":34},"implements \u003Cinterface name>",[36,37,43],"pre",{"className":38,"code":40,"language":41,"meta":42},[39],"language-ts","interface IAnimal {\n    name: string\n    getName: () => void\n}\nabstract class Animal {\n    constructor(public name: string) {}\n    setName(name: string) {\n        this.name = name\n    }\n}\n\nclass Cat extends Animal implements IAnimal {\n    constructor(public name: string) {\n        super(name)\n    }\n\n    public getName(): string {\n        return this.name\n    }\n}\n\nconst cat = new Cat(\"cat\")\ncat.setName(\"dog\")\nconsole.log(cat.getName())\n","ts","",[29,44,40],{"__ignoreMap":42},[21,46,48],{"id":47},"interface-对对象的约束","interface 对对象的约束",[17,50,51],{},"interface 对对象的约束，作用和 type 类似",[14,53,54],{},[17,55,56,59],{},[29,57,58],{"code":58},"[key: string]: any;"," 表示对象的键需要是字符串类型，值的累心不做约束",[36,61,64],{"className":62,"code":63,"language":41,"meta":42},[39],"interface IUser {\n    name: string\n    age: number\n    site?: string\n    info: () => string\n    [key: string]: any\n}\n\nconst user: IUser = {\n    name: \"wxw\",\n    age: 25,\n    sex: \"男\",\n    info() {\n        return `${this.name} ${this.age}`\n    },\n}\n",[29,65,63],{"__ignoreMap":42},[21,67,69],{"id":68},"在函数中使用-interface","在函数中使用 interface",[36,71,74],{"className":72,"code":73,"language":41,"meta":42},[39],"interface IUser {\n    name: string\n    age: number\n}\nfunction setUser(user: IUser) {\n    return user\n}\nsetUser({ name: \"wxw\", age: 25 })\n",[29,75,73],{"__ignoreMap":42},[21,77,79],{"id":78},"interface-对函数的约束","interface 对函数的约束",[36,81,84],{"className":82,"code":83,"language":41,"meta":42},[39],"interface IGetUser {\n    (name: string): string\n}\nconst getUser: IGetUser = (name: string) => {\n    return name\n}\nconsole.log(getUser(\"W\"))\n",[29,85,83],{"__ignoreMap":42},[21,87,89],{"id":88},"在类中使用-interface","在类中使用 interface",[36,91,94],{"className":92,"code":93,"language":41,"meta":42},[39],"interface IUser {\n    name: string\n    age: number\n}\nclass User {\n    _info: IUser\n    constructor(user: IUser) {\n        this._info = user\n    }\n\n    get info() {\n        return this._info\n    }\n}\nconst user = new User({ name: \"whbbit\", age: 25 })\nconsole.log(user.info)\n",[29,95,93],{"__ignoreMap":42},[21,97,99],{"id":98},"数组中使用-interface","数组中使用 interface",[36,101,104],{"className":102,"code":103,"language":41,"meta":42},[39],"interface IUser {\n    name: string\n    age: number\n}\n\nconst user1 = { name: \"whbbit\", age: 25 }\nconst user2 = { name: \"wxw\", age: 25 }\n\nconst users: IUser[] = [user1, user2]\n",[29,105,103],{"__ignoreMap":42},[21,107,109],{"id":108},"interface-结合-enum","interface 结合 enum",[36,111,114],{"className":112,"code":113,"language":41,"meta":42},[39],"enum SexType {\n    BOY,\n    GIRL,\n}\ninterface IUser {\n    name: string\n    age: number\n    sex: SexType\n}\nconst user1 = { name: \"whbbit\", age: 25, sex: SexType.BOY }\nconst user2 = { name: \"wxw\", age: 25, sex: SexType.GIRL }\n\nconst users: IUser[] = [user1, user2]\n",[29,115,113],{"__ignoreMap":42},[21,117,119],{"id":118},"interface-的继承","interface 的继承",[36,121,124],{"className":122,"code":123,"language":41,"meta":42},[39],"interface IVoice {\n    voice: () => void\n}\ninterface IAnimal extends IVoice {\n    name: string\n    getName: () => void\n}\n\n\u002F\u002F 相当于\n\u002F\u002F interface IAnimal {\n\u002F\u002F   name: string;\n\u002F\u002F   getName(): void;\n\u002F\u002F   voice(): void;\n\u002F\u002F }\n",[29,125,123],{"__ignoreMap":42},[21,127,129],{"id":128},"interface-声明合并","interface 声明合并",[17,131,132],{},"写一个同名 interface 就会实现 interface 的合并。",[17,134,135],{},[136,137,138],"strong",{},"后面的 interface 和前面的 interface 中不能有同名参数",[36,140,143],{"className":141,"code":142,"language":41,"meta":42},[39],"interface IAnimal {\n    name: string\n    getName: () => string\n}\ninterface IAnimal {\n    voice: () => string\n}\n\nconst cat: IAnimal = {\n    getName() {\n        return this.name\n    },\n    name: \"cat\",\n    voice() {\n        return \"miao~\"\n    },\n}\n\nconsole.log(cat.getName())\nconsole.log(cat.voice())\n",[29,144,142],{"__ignoreMap":42},[10,146,147],{"id":147},"type",[17,149,150],{},"大多数情况下 type 和 interfere 使用相同",[36,152,155],{"className":153,"code":154,"language":41,"meta":42},[39],"interface TUser { name: string, age: 25 }\n\nfunction getUser(user: TUser): TUser {\n    return user\n}\n\nconst user: TUser = {\n    name: \"wxw\",\n    age: 25,\n}\n\nconsole.log(getUser(user))\n",[29,156,154],{"__ignoreMap":42},[17,158,159,160,163,164],{},"type 可以作为",[136,161,162],{},"基本类型的别名","使用，也可以申明",[136,165,166],{},"联合类型",[36,168,171],{"className":169,"code":170,"language":41,"meta":42},[39],"type IsAdmin = boolean\ntype Sex = \"boy\" | \"girl\"\n",[29,172,170],{"__ignoreMap":42},[21,174,176],{"id":175},"type-和-interface-的区别","type 和 interface 的区别",[178,179,180,184],"ol",{},[181,182,183],"li",{},"interface 同名会合并，type 同名会报错",[181,185,186,187,190,191],{},"interface 可以继承，type 使用 ",[29,188,189],{"code":189},"&"," 合并",[14,192,193],{},[17,194,195,196,198],{},"type 可以使用 ",[29,197,189],{"code":189}," 合并 interface 类型",[36,200,203],{"className":201,"code":202,"language":41,"meta":42},[39],"interface TName { name: string }\ninterface TAge { age: number }\ninterface IMember { member: boolean }\n\ntype TUser = TName & TAge & IMember;\n",[29,204,202],{"__ignoreMap":42},{"title":42,"searchDepth":206,"depth":206,"links":207},4,[208,221],{"id":12,"depth":209,"text":12,"children":210},2,[211,213,214,215,216,217,218,219,220],{"id":23,"depth":212,"text":24},3,{"id":47,"depth":212,"text":48},{"id":68,"depth":212,"text":69},{"id":78,"depth":212,"text":79},{"id":88,"depth":212,"text":89},{"id":98,"depth":212,"text":99},{"id":108,"depth":212,"text":109},{"id":118,"depth":212,"text":119},{"id":128,"depth":212,"text":129},{"id":147,"depth":209,"text":147,"children":222},[223],{"id":175,"depth":212,"text":176},null,[226],"代码","2024-03-17 00:27:25",false,"md","https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002F67a221939a175-78.webp",{},true,"\u002Fposts\u002F2024\u002Fts-interface-and-type",{"text":235,"minutes":236,"time":237,"words":238},"3 min read",2.96,177600,592,{"title":5,"description":224},{"loc":233},"posts\u002F2024\u002Fts-interface-and-type",[],"QCsAwKMaa4bOJOTwlCjaH8KXSsXldAPQ93v3J6ej7nU",[245,250],{"title":246,"path":247,"stem":248,"date":249,"type":224,"children":-1},"TypeScript 元组","\u002Fposts\u002F2024\u002Fts-tuple","posts\u002F2024\u002Fts-tuple","2024-03-17 00:26:43",{"title":251,"path":252,"stem":253,"date":254,"type":224,"children":-1},"TypeScript 装饰器","\u002Fposts\u002F2024\u002Fts-decorators","posts\u002F2024\u002Fts-decorators","2024-03-17 00:27:44",1789642592210]