[{"data":1,"prerenderedAt":287},["ShallowReactive",2],{"content:\u002Fposts\u002F2024\u002Fts-class":3,"surround:\u002Fposts\u002F2024\u002Fts-class":276},{"id":4,"title":5,"body":6,"canonical":256,"categories":257,"date":259,"description":256,"draft":260,"extension":261,"image":262,"meta":263,"navigation":264,"path":265,"permalink":256,"readingTime":266,"recommend":256,"references":256,"seo":271,"sitemap":272,"stem":273,"tags":274,"type":256,"updated":259,"__hash__":275},"content\u002Fposts\u002F2024\u002Fts-class.md","TypeScript 类",{"type":7,"value":8,"toc":242},"minimark",[9,13,17,28,32,35,41,47,51,54,60,63,69,73,76,82,96,102,105,108,114,117,123,137,141,144,150,154,157,160,166,169,177,180,186,190,196,199,205,208,221,227,230,236,239],[10,11,12],"h2",{"id":12},"对参数进行约束",[14,15,16],"p",{},"定义一个普通的类，约束其接收的参数的类型",[18,19,25],"pre",{"className":20,"code":22,"language":23,"meta":24},[21],"language-ts","class User {\n    name: string\n    age: number\n    constructor(name: string, age: number) {\n        this.name = name\n        this.age = age\n    }\n}\n\nconst user1 = new User(\"Whbbit\", 25)\nconst user2 = new User(\"wxw\", 25)\n\n\u002F\u002F 限制users数组的值只能是User类示例化的对象\nconst users: User[] = [user1, user2]\n","ts","",[26,27,22],"code",{"__ignoreMap":24},[10,29,31],{"id":30},"public-修饰符","public 修饰符",[14,33,34],{},"使用 public 修饰符表示这个函数，变量可以在函数外进行访问。默认为 public",[36,37,38],"blockquote",{},[14,39,40],{},"在 js 中默认就可以在外部进行访问",[18,42,45],{"className":43,"code":44,"language":23,"meta":24},[21],"class User {\n    public name: string\n    public age: number\n    constructor(name: string, age: number) {\n        this.name = name\n        this.age = age\n    }\n\n    public getName() {\n        return `name: ${this.name}, age: ${this.age}`\n    }\n}\nconst user1 = new User(\"whbbit\", 25)\nuser1.name = \"wxw\"\nconsole.log(user1.name)\nconsole.log(user1.getName())\n",[26,46,44],{"__ignoreMap":24},[10,48,50],{"id":49},"protected-修饰符","protected 修饰符",[14,52,53],{},"使用 protected 后，只能在类中调用。可以对方法和属性进行约束。",[18,55,58],{"className":56,"code":57,"language":23,"meta":24},[21],"class User {\n    protected name: string\n    protected age: number\n    constructor(name: string, age: number) {\n        this.name = name\n        this.age = age\n    }\n\n    protected show() {\n        console.log(\"show\")\n    }\n\n    public getName() {\n        return `name: ${this.name}, age: ${this.age}`\n    }\n}\nconst user1 = new User(\"whbbit\", 25)\nuser1.name = \"wxw\" \u002F\u002F ts 报错\nconsole.log(user1.name) \u002F\u002F ts 报错\nuser1.show() \u002F\u002F ts 报错\n\nconsole.log(user1.getName()) \u002F\u002F 正常运行\n",[26,59,57],{"__ignoreMap":24},[14,61,62],{},"在父类中声明的受保护的方法或属性，在子类中可以调用。但在类外部不可调用",[18,64,67],{"className":65,"code":66,"language":23,"meta":24},[21],"class Person {\n    protected name: string\n    protected age: number\n    protected show() {\n        console.log(\"show\")\n    }\n}\nclass User extends Person {\n    constructor(name: string, age: number) {\n        super()\n        this.name = name\n        this.age = age\n    }\n\n    public getInfo() {\n        return this.show()\n    }\n}\nconst user1 = new User(\"wxw\", 25)\nuser1.getInfo()\n",[26,68,66],{"__ignoreMap":24},[10,70,72],{"id":71},"private-私有属性","private 私有属性",[14,74,75],{},"在子类或类外部都不可访问。在父类中定义的私有方法子类不可使用，不可覆盖",[18,77,80],{"className":78,"code":79,"language":23,"meta":24},[21],"class Person {\n    protected name: string;\n    public age: number;\n    private site: string;\n    protected show() {\n        console.log(\"show\", `site is ${this.site}`);\n    }\n}\n\nclass User extends Person {\n    constructor(name: string, age: number) {\n        super();\n        this.name = name;\n        this.age = age;\n    }\n\n    getSite() {\n        console.log(this.site);\n    }\n\n    public getInfo() {\n        return this.show();\n    }\n}\nconst user1 = new User(\"wxw\", 25);\nuser1.getInfo();\nconsole.log(user1.site);\n",[26,81,79],{"__ignoreMap":24},[14,83,84,85,88,89,92,93],{},"在父类中定义的受保护的方法，在子类中可以使用，可以覆盖，但是权限只能降低为 ",[26,86,87],{"code":87},"public"," 或维持 ",[26,90,91],{"code":91},"protected","。不能将其更改为",[26,94,95],{"code":95},"private",[18,97,100],{"className":98,"code":99,"language":23,"meta":24},[21],"class Person {\n    protected name: string;\n    public age: number;\n    private site: string;\n    protected show() {\n        console.log(\"show\", `site is ${this.site}`);\n    }\n}\n\nclass User extends Person {\n    constructor(name: string, age: number) {\n        super();\n        this.name = name;\n        this.age = age;\n    }\n\n    getSite() {\n        console.log(this.site);\n    }\n\n    private show() {\n        console.log('这里是子类覆盖掉的shou方法')\n    }\n\n    public getInfo() {\n        return this.show();\n    }\n}\nconst user1 = new User(\"wxw\", 25);\nuser1.show()\n",[26,101,99],{"__ignoreMap":24},[10,103,104],{"id":104},"readonly",[14,106,107],{},"限定属性不能进行修改",[18,109,112],{"className":110,"code":111,"language":23,"meta":24},[21],"class Axios {\n    readonly site: string = \"https:\u002F\u002Fwww.weilog.me\u002Fapi\"\n    constructor() {}\n\n    public get(url: string) {\n        console.log(`请求地址是${url}`)\n        return []\n    }\n}\n\nconst instance = new Axios()\nconsole.log(instance.site)\ninstance.site = \"https:\u002F\u002Fapi.com\" \u002F\u002F 报错：Cannot assign to 'site' because it is a read-only property\n",[26,113,111],{"__ignoreMap":24},[14,115,116],{},"但是在构造函数初始化时可以更改",[18,118,121],{"className":119,"code":120,"language":23,"meta":24},[21],"class Axios {\n    readonly site: string = \"https:\u002F\u002Fwww.weilog.me\u002Fapi\"\n    constructor(site?: string) {\n        this.site = site || this.site\n    }\n\n    public get(url: string) {\n        console.log(`请求地址是${this.site}\u002F${url}`)\n        return []\n    }\n}\n\nconst instance = new Axios()\ninstance.get(\"article\") \u002F\u002F \"请求地址是https:\u002F\u002Fwww.weilog.me\u002Fapi\u002Farticle\"\n\nconst instance1 = new Axios(\"https:\u002F\u002Fwww.weilog.me\u002Fdocs\")\ninstance1.get(\"article\") \u002F\u002F \"请求地址是https:\u002F\u002Fwww.weilog.me\u002Fdocs\u002Farticle\"\n",[26,122,120],{"__ignoreMap":24},[36,124,125],{},[14,126,127,128,130,131,133,134,136],{},"readonly 前可以添加 ",[26,129,87],{"code":87},"、",[26,132,91],{"code":91},"、 ",[26,135,95],{"code":95},"等修饰符",[10,138,140],{"id":139},"constructor-构造函数","constructor 构造函数",[14,142,143],{},"在构造函数中接收的参数前书写修饰符，ts 会自动帮我们进行初始化操作",[18,145,148],{"className":146,"code":147,"language":23,"meta":24},[21],"class User {\n    constructor(public name: string, public age: string) {}\n    \u002F\u002F 等同于\n    \u002F\u002F public name: string\n    \u002F\u002F public  age: number\n    \u002F\u002F constructor( name: string, age: number) {\n    \u002F\u002F this.name = name\n    \u002F\u002F this.age = age\n    \u002F\u002F }\n}\n",[26,149,147],{"__ignoreMap":24},[10,151,153],{"id":152},"static-静态属性方法","static 静态属性\u002F方法",[14,155,156],{},"static 静态属性\u002F方法只能通过构造函数调用。",[14,158,159],{},"使用 static 修饰属性",[18,161,164],{"className":162,"code":163,"language":23,"meta":24},[21],"class Axios {\n    static site: string = \"weilog.me\"\n    constructor() {}\n}\nconst instance = new Axios()\nconsole.log(Axios.site)\nconsole.log(instance.site) \u002F\u002F 报错\n",[26,165,163],{"__ignoreMap":24},[14,167,168],{},"上面代码编译为 js 后的代码",[18,170,175],{"className":171,"code":173,"language":174,"meta":24},[172],"language-js","\"use strict\"\nclass Axios {\n    \u002F\u002F eslint-disable-next-line no-useless-constructor\n    constructor() {}\n}\nAxios.site = \"weilog.me\"\nconst instance = new Axios()\nconsole.log(Axios.site)\nconsole.log(instance.site) \u002F\u002F 报错\n","js",[26,176,173],{"__ignoreMap":24},[14,178,179],{},"static 也可以修饰方法",[18,181,184],{"className":182,"code":183,"language":23,"meta":24},[21],"class Axios {\n    static site: string = \"weilog.me\"\n    constructor() {}\n    public static getSite() {\n        return Axios.site\n    }\n}\nconst instance = new Axios()\nconsole.log(Axios.getSite())\n",[26,185,183],{"__ignoreMap":24},[10,187,189],{"id":188},"get-set","get \u002F set",[18,191,194],{"className":192,"code":193,"language":23,"meta":24},[21],"class User {\n    constructor(private _name: string) {}\n\n    public get name(): string {\n        return this._name\n    }\n\n    public set name(name: string) {\n        this._name = name\n    }\n}\nconst user = new User(\"wxw\")\nconsole.log(user.name)\nconsole.log((user.name = \"whbbit\"))\nconsole.log(user.name)\n",[26,195,193],{"__ignoreMap":24},[14,197,198],{},"使用访问器 get\u002Fset 可以在设置或获取时进行处理",[18,200,203],{"className":201,"code":202,"language":23,"meta":24},[21],"interface articleType { title: string }\nclass Articles {\n    constructor(private _lists: articleType[] = []) {}\n\n    get articles(): articleType[] {\n        return this._lists.map((article) => {\n            article.title = article.title + \"www.weilog.me\"\n            return article\n        })\n    }\n\n    set articles(articles: articleType[]) {\n        this._lists = articles\n    }\n}\nconst list = new Articles()\nlist.articles = [{ title: \"ts中的类\" }, { title: \"ts断言\" }]\nconsole.log(list.articles)\n",[26,204,202],{"__ignoreMap":24},[10,206,207],{"id":207},"单例模式实现",[209,210,211,215,218],"ol",{},[212,213,214],"li",{},"将构造函数设置为私有",[212,216,217],{},"定义一个静态方法用来生成实例",[212,219,220],{},"定义一个静态属性，在静态方法中判断是否已经初始化，未初始化就进行初始化，已经初始化直接返回这个生成的实例",[18,222,225],{"className":223,"code":224,"language":23,"meta":24},[21],"class Axios {\n    private static instance: Axios | null = null\n    private constructor() {\n        console.log(\"构造函数方法\")\n    }\n\n    static make(): Axios {\n        if (Axios.instance === null) {\n            Axios.instance = new Axios()\n        }\n        return Axios.instance\n    }\n}\nconst instance = Axios.make()\nconsole.log(instance)\n",[26,226,224],{"__ignoreMap":24},[10,228,229],{"id":229},"抽象类",[18,231,234],{"className":232,"code":233,"language":23,"meta":24},[21],"\u002F\u002F 抽象类\nabstract class Animal {\n    constructor(public name: string) {}\n    abstract getName(): string\n    setName(name: string) {\n        this.name = name\n    }\n}\n\n\u002F\u002F 派生类\nclass Cat extends Animal {\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\")\n",[26,235,233],{"__ignoreMap":24},[14,237,238],{},"抽象类无法被实例化",[14,240,241],{},"派生类中需要实现抽象类中定义的方法",{"title":24,"searchDepth":243,"depth":243,"links":244},4,[245,247,248,249,250,251,252,253,254,255],{"id":12,"depth":246,"text":12},2,{"id":30,"depth":246,"text":31},{"id":49,"depth":246,"text":50},{"id":71,"depth":246,"text":72},{"id":104,"depth":246,"text":104},{"id":139,"depth":246,"text":140},{"id":152,"depth":246,"text":153},{"id":188,"depth":246,"text":189},{"id":207,"depth":246,"text":207},{"id":229,"depth":246,"text":229},null,[258],"代码","2024-03-17 00:23:37",false,"md","https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002F679adb4c34f00-78.webp",{},true,"\u002Fposts\u002F2024\u002Fts-class",{"text":267,"minutes":268,"time":269,"words":270},"7 min read",6.03,361800,1206,{"title":5,"description":256},{"loc":265},"posts\u002F2024\u002Fts-class",[],"-5_rZgaH4X-dm2R567hBEFumducEE7DIRD3_pJnfQ3M",[277,282],{"title":278,"path":279,"stem":280,"date":281,"type":256,"children":-1},"TypeScript 泛型","\u002Fposts\u002F2024\u002Fts-generics","posts\u002F2024\u002Fts-generics","2024-03-17 00:18:11",{"title":283,"path":284,"stem":285,"date":286,"type":256,"children":-1},"TypeScript 元组","\u002Fposts\u002F2024\u002Fts-tuple","posts\u002F2024\u002Fts-tuple","2024-03-17 00:26:43",1789642592385]