{"id":4214,"date":"2026-02-17T23:59:28","date_gmt":"2026-02-17T15:59:28","guid":{"rendered":"https:\/\/blog.odjbinail.cn\/?p=4214"},"modified":"2026-04-27T21:12:21","modified_gmt":"2026-04-27T13:12:21","slug":"typescript%e7%b3%bb%e7%bb%9f%e5%85%a5%e9%97%a8","status":"publish","type":"post","link":"https:\/\/blog.odjbinail.cn\/?p=4214","title":{"rendered":"TypeScript\u7cfb\u7edf\u5165\u95e8"},"content":{"rendered":"<p>\u82f1\u6587\u6587\u6863: <a href=\"https:\/\/www.typescriptlang.org\/docs\/handbook\/intro.html\">https:\/\/www.typescriptlang.org\/docs\/handbook\/intro.html<\/a><br \/>\n\u5b98\u65b9\u4e2d\u6587\u7f51\u7ad9: <a href=\"https:\/\/www.tslang.cn\/\">https:\/\/www.tslang.cn\/<\/a><\/p>\n<h3>TypeScript \u662f JavaScript \u5bf9\u5e94\u7684\u4e00\u4e2a\u8d85\u96c6\uff0c\u5b83\u91cc\u9762\u6709\u81ea\u5df1\u7684\u9759\u6001\u7c7b\u578b\uff0c\u540c\u65f6\u4e0d\u80fd\u5728\u6d4f\u89c8\u5668\u548c node \u73af\u5883\u4e0b\u76f4\u63a5\u8fd0\u884c\u7684\uff0c\u9700\u8981\u7ecf\u8fc7\u4e00\u7cfb\u5217\u7684\u7f16\u8bd1\uff0c \u7f16\u7a0b\uff0c\u666e\u901a\u7684 JavaScript \u4ee3\u7801\u4e4b\u540e\u624d\u80fd\u8fd0\u884c<\/h3>\n<pre class=\"prettyprint linenums\" ><code>demo.js:\n\/\/\u52a8\u6001\u7c7b\u578b\nlet a = 123;\na = &#039;123&#039;;\n\ndemo.ts:\n\/\/\u9759\u6001\u7c7b\u578b\nlet b: number = 123;\n\/\/ b = &#039;123&#039;;\/\/\u62a5\u9519\u4e0d\u80fd\u5c06\u7c7b\u578b\u201cstring\u201d\u5206\u914d\u7ed9\u7c7b\u578b\u201cnumber\u201d\u3002\nb = 456;<\/code><\/pre>\n<h2>ts \u597d\u5904<\/h2>\n<h3>\u597d\u5904\u4e00: \u5199\u4ee3\u7801\u65f6\u6709\u66f4\u597d\u7684\u9519\u8bef\u63d0\u793a<\/h3>\n<ul>\n<li>ts \u7684\u9759\u6001\u7c7b\u578b\u4f7f\u5f97\u6211\u4eec\u53ef\u4ee5\u5728\u7f16\u5199\u4ee3\u7801\u65f6, \u5c31\u80fd\u591f\u5feb\u901f\u7684\u53d1\u73b0\u4e00\u4e9b\u6f5c\u5728\u7684\u95ee\u9898<\/li>\n<\/ul>\n<p><img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2023\/08\/2023081111385588.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2023\/08\/2023081111385588.png\" alt=\"\" \/><\/p><\/noscript>\n<p>\u540c\u6837\u7684 js \u4ee3\u7801, \u53ea\u6709\u5728\u7ebf\u4e0a\u8fd0\u884c\u7684\u65f6\u5019\u624d\u4f1a\u53d1\u73b0\u9519\u8bef<\/p>\n<p><img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2023\/08\/2023081111412292.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2023\/08\/2023081111412292.png\" alt=\"\" \/><\/p><\/noscript>\n<h3>\u597d\u5904\u4e8c: \u5199 ts \u4ee3\u7801\u65f6, \u6709\u66f4\u53cb\u597d\u7684\u7f16\u8f91\u5668\u81ea\u52a8\u63d0\u793a<\/h3>\n<h3>\u597d\u5904\u4e09: \u4ee3\u7801\u8bed\u4e49\u66f4\u6e05\u6670\u6613\u61c2<\/h3>\n<ul>\n<li>\u901a\u8fc7\u9759\u6001\u7c7b\u578b\u7684\u5b9a\u4e49, \u53ef\u4ee5\u66f4\u597d\u7684\u9605\u8bfb ts \u4ee3\u7801<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>function tsDemo(data:{x:number,y:number}){}<\/code><\/pre>\n<h3>\u5b89\u88c5\u5de5\u5177 ts-node \u8fd0\u884c ts \u4ee3\u7801<\/h3>\n<ul>\n<li>npm install -g ts-node@8.4.1<\/li>\n<li>\u8fd0\u884c ts \u4ee3\u7801:  ts-node demo.ts \/\/dell<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>interface Point {\n  x: number;\n  y: number;\n}\n\nfunction tsDemo(data: Point) {\n  console.log(&quot;dell&quot;);\n  return Math.sqrt(data.x ** 2 + data.y ** 2);\n}\ntsDemo({ x: 1, y: 123 });<\/code><\/pre>\n<h1>TypeScript \u57fa\u7840\u8bed\u6cd5\u5165\u95e8<\/h1>\n<h2>\u9759\u6001\u7c7b\u578b\u7684\u6df1\u5ea6\u7406\u89e3<\/h2>\n<pre class=\"prettyprint linenums\" ><code>\/\/\u81ea\u5b9a\u4e49\u7684\u9759\u6001\u7c7b\u578b\ninterface Point {\n  x: number;\n  y: number;\n}\n\/\/point \u8fd9\u4e2a\u53d8\u91cf\u4e0a \u5177\u5907 Point \u7c7b\u578b\u7684\u6240\u6709\u5c5e\u6027\u548c\u65b9\u6cd5\nconst point: Point = {\n  x: 3,\n  y: 4,\n};<\/code><\/pre>\n<h2>\u57fa\u7840\u7c7b\u578b\u548c\u5bf9\u8c61\u7c7b\u578b<\/h2>\n<p>\u9759\u6001\u7c7b\u578b\u53ef\u4ee5\u8ba9\u6211\u4eec\u66f4\u76f4\u89c2\u7684\u5224\u65ad\u53d8\u91cf\u6216\u8005\u5bf9\u8c61\u5c5e\u6027\u7684\u5185\u5bb9\u662f\u4ec0\u4e48<\/p>\n<pre class=\"prettyprint linenums\" ><code>\/\/\u57fa\u7840\u7c7b\u578b null,undefined,symbol,boolean,void\nconst count: number = 123;\nconst teacherName: string = &quot;dj&quot;;\n\n\/\/\u5bf9\u8c61\u7c7b\u578b\nclass Person {}\nconst teacher: {\n  name: string;\n  age: number;\n} = {\n  name: &quot;dj&quot;,\n  age: 18,\n};\n\nconst numbers: number[] = [1, 2, 3];\nconst dj: Person = new Person();\nconst getTotal: () =&gt; number = () =&gt; {\n  return 123;\n};<\/code><\/pre>\n<h2>\u7c7b\u578b\u6ce8\u89e3\u548c\u7c7b\u578b\u63a8\u65ad<\/h2>\n<ul>\n<li>type annotation \u7c7b\u578b\u6ce8\u89e3,\u6211\u4eec\u6765\u544a\u8bc9 ts \u53d8\u91cf\u662f\u4ec0\u4e48\u7c7b\u578b<\/li>\n<li>type inference \u7c7b\u578b\u63a8\u65ad,ts \u4f1a\u81ea\u52a8\u7684\u53bb\u5c1d\u8bd5\u5206\u6790\u53d8\u91cf\u7684\u7c7b\u578b<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>\/\/\u5982\u679c ts \u80fd\u81ea\u52a8\u5206\u6790\u53d8\u91cf\u7c7b\u578b,\u6211\u4eec\u5c31\u4ec0\u4e48\u4e5f\u4e0d\u9700\u8981\u505a\u4e86\nconst firstNumber = 1;\nconst secondNumber = 2;\nconst total1 = firstNumber + secondNumber;\n\n\/\/\u5982\u679c ts \u65e0\u6cd5\u5206\u6790\u53d8\u91cf\u7c7b\u578b\u7684\u8bdd,\u6211\u4eec\u5c31\u9700\u8981\u4f7f\u7528\u7c7b\u578b\u6ce8\u89e3\nfunction getTo(firstNumber: number, secondNumber: number) {\n    return firstNumber + secondNumber;\n}\n\nconst total = getTo(1, 2)<\/code><\/pre>\n<h2>\u51fd\u6570\u76f8\u5173\u7c7b\u578b<\/h2>\n<pre class=\"prettyprint linenums\" ><code>function add(first: number, second: number): number {\n    return first + second;\n}\n\n\/\/\u51fd\u6570\u7684\u8fd4\u56de\u503c\u662f void\nfunction sayHello(): void {\n    console.log(&#039;hello&#039;)\n}\n\n\/\/never: \u6c38\u8fdc\u4e0d\u80fd\u6267\u884c\u5230\u6700\u540e\nfunction errorEmitter(): never {\n    throw new Error();\n    \/\/ console.log(123) \u4e0d\u80fd\u6267\u884c\n    \/\/ while (true){} \u540e\u9762\u7684\u4ee3\u7801\u4e5f\u6267\u884c\u4e0d\u5230\n}\n\n\/\/\u89e3\u6784\u8d4b\u503c\u7684\u7c7b\u578b\u6ce8\u89e3\u7684\u5199\u6cd5\nfunction add1({first, second}: { first: number, second: number }): number {\n    return first + second;\n}\n\nfunction getNumber({first}: { first: number }) {\n    return first;\n}\n\nconst total1 = add1({first: 1, second: 2})\nconst count = getNumber({first: 1})<\/code><\/pre>\n<h2>\u57fa\u7840\u8bed\u6cd5\u590d\u4e60<\/h2>\n<pre class=\"prettyprint linenums\" ><code>\/\/\u57fa\u7840\u7c7b\u578b, boolean,number,string,void,undefined,symbol,null\nlet count:number;\ncount=123;\n\n\/\/\u5bf9\u8c61\u7c7b\u578b, {}, Class, function, []\nconst func=(str:string)=&gt; {\n    return parseInt(str, 10)\n}\n\/\/: \u540e\u9762\u8ddf\u7740\u4e00\u822c\u662f\u7c7b\u578b,\u544a\u8bc9\u51fd\u6570:\u63a5\u6536\u4e00\u4e2a string \u7c7b\u578b\u7684\u53c2\u6570, \u8fd4\u56de number \u503c\n\/\/= \u540e\u9762\u8ddf\u7740\u662f\u51fd\u6570\u7684\u5177\u4f53\u5b9e\u73b0\nconst func1:(str:string)=&gt;number=(str)=&gt;{\n    return parseInt(str, 10)\n}\nconst date=new Date();\n\n\/\/\u5176\u4ed6\u7684 case\ninterface Person{\n    name:&#039;string&#039;\n}\nconst rawData=&#039;{&quot;name&quot;:&quot;dj&quot;}&#039;;\nconst newData:Person=JSON.parse(rawData);\n\nlet temp:number|string=123;\ntemp=&#039;456&#039;;<\/code><\/pre>\n<h2>\u6570\u7ec4\u548c\u5143\u7ec4<\/h2>\n<pre class=\"prettyprint linenums\" ><code>\/**\n * \u6570\u7ec4\n *\/\n\/\/\u6570\u7ec4\u5185\u5bb9\u53ef\u4ee5\u662f string\/number\nconst arr: (number | string)[] = [1, 2, 3]\n\/\/\u6570\u7ec4\u5185\u5bb9\u53ea\u80fd\u662f undefined\nconst undefinedArr: undefined[] = [undefined];\n\n\/\/\u5bf9\u8c61\u6570\u7ec4\u7c7b\u578b\u5982\u4f55\u8fdb\u884c\u7c7b\u578b\u6ce8\u89e3?\n\/\/\u7c7b\u578b\u522b\u540d: type alias\ntype User = { name: string, age: number }\n\nconst objectArr: User[] = [{\n    name: &#039;dj&#039;,\n    age: 22\n}]\n\nclass Teacher {\n    name: string;\n    age: number;\n}\n\n\/**\n * \u7c7b\u548c\u624b\u5199\u7684\u5bf9\u8c61\u53ef\u4ee5\u7a7f\u63d2\u7684\u5171\u540c\u53bb\u4f7f\u7528\n * \u4f20\u4e2a\u5bf9\u8c61\u8fdb\u53bb, \u867d\u7136\u4e0d\u662f teacher \u751f\u6210\u7684\u5b9e\u4f8b,\u4f46\u662f\u91cc\u9762\u4e5f\u5305\u542b name \u548c age \u5c5e\u6027,\n * \u6570\u636e\u7ed3\u6784\u548c teacher \u4fdd\u6301\u4e00\u81f4, \u4e5f\u662f\u53ef\u4ee5\u6ee1\u8db3 teacher \u8fd9\u4e2a\u7c7b\u7684\u8981\u6c42\n * typescript \u4e5f\u662f\u8ba4\u4e3a\u8fd9\u6837\u662f ok \u7684\n *\/\nconst objectArr1: Teacher[] = [\n    new Teacher(),\n    {\n    name: &#039;dj&#039;,\n    age: 22\n}]\n\/**\n * \u5143\u7ec4 tuple\n * \u5982\u679c\u6570\u7ec4\u957f\u5ea6\u4e00\u5b9a\n * \u53ef\u4ee5\u89c4\u5b9a\u6bcf\u4e00\u9879\u7684\u6570\u636e\u7c7b\u578b\n * \u5e94\u7528\u573a\u666f\n *\/\nconst teacherInfo:[string,string,number]=[&#039;dj&#039;,&#039;female&#039;,18]\n\/\/csv \u6587\u4ef6\nconst teacherList:[string,string,number][]=[\n    [&#039;del&#039;,&#039;male&#039;,19],\n    [&#039;2w&#039;,&#039;male&#039;,8],\n    [&#039;22&#039;,&#039;male&#039;,50]\n]<\/code><\/pre>\n<h2>Interface \u63a5\u53e3<\/h2>\n<pre class=\"prettyprint linenums\" ><code>\/**\n * \u6700\u5e38\u7528,interface \u548c type \u76f8\u7c7b\u4f3c,\u4f46\u5e76\u4e0d\u5b8c\u5168\u4e00\u81f4\n * \u63a5\u53e3\u5c31\u662f\u5728\u6211\u4eec\u5f00\u53d1\u8fc7\u7a0b\u4e2d,ts \u5e2e\u52a9\u6211\u4eec\u4f5c\u8bed\u6cd5\u63d0\u793a(\u6821\u9a8c)\u7684\u5de5\u5177\n * \u771f\u6b63 ts \u7f16\u8bd1 js \u7684\u65f6\u5019,ts \u4f1a\u628a\u4ee3\u7801\u4e2d\u63a5\u53e3\u7684\u5185\u5bb9,\u5305\u62ec\u7c7b\u578b\u7684\u5185\u5bb9\u5168\u90e8\u5254\u9664\u6389\n *\/\ninterface Person {\/\/\u53ea\u80fd\u4ee3\u8868\u4e00\u4e2a\u51fd\u6570\u6216\u8005\u5bf9\u8c61\n    name: string\n    \/\/ readonly name: string \/\/readonly \u53ea\u80fd\u8bfb,\u4e0d\u80fd\u5199\n    age?: number\/\/?\u4ee3\u8868:age \u53ef\u6709\u53ef\u65e0\n    [propName:string]:any;\/\/\u53ef\u80fd\u8fd8\u6709\u5176\u4ed6\u5c5e\u6027, \u4e0b\u65b9\u7684 sex \u5c31\u4e0d\u4f1a\u62a5\u9519\u4e86\n    say():string\n}\n\/\/\u63a5\u53e3\u53ef\u4ee5\u4e92\u76f8\u7ee7\u627f\ninterface Teacher extends Person{\n    \/\/\u5177\u5907 Person \u7684\u5c5e\u6027,\u8fd8\u8981\u6709 teach()\u65b9\u6cd5\n    teach():string;\n}\n\/\/\u53ef\u4ee5\u5b9a\u4e49\u4e00\u4e2a\u51fd\u6570\u7c7b\u578b,\u8fd8\u53ef\u4ee5\u5b9a\u4e49\u6570\u7ec4\u8fd9\u6837\u7684\u7d22\u5f15\u7c7b\u578b\ninterface SayHi{\n    (word:string):string\n}\n\n\/**\n * ts \u7684\u901a\u7528\u89c4\u8303,\u5982\u679c\u80fd\u7528\u63a5\u53e3\u53bb\u8868\u8ff0\u7c7b\u578b,\u5c31\u7528\u63a5\u53e3;\u5b9e\u5728\u4e0d\u884c\u624d\u7528\u7c7b\u578b\u522b\u540d\n *\/\ntype Person1 = string;\/\/\u7c7b\u578b\u522b\u540d: \u533a\u522b-&gt;\u8fd8\u53ef\u4ee5\u4ee3\u8868\u57fa\u7840\u7c7b\u578b\n\nconst getName = (person: Person) =&gt; {\n    console.log(person.name)\n}\nconst setName = (person: Person, name: string) =&gt; {\n    person.name = name;\n}\nconst person = {\n    name: &#039;dj&#039;,\n    sex:&#039;male&#039;,\n    say(){\n        return &#039;say hello&#039;\n    }\n}\ngetName(person)\n\/\/ getName({\/\/\u76f4\u63a5\u4f20\u5b57\u9762\u91cf\u8fdb\u53bb, ts \u4f1a\u5bf9\u5176\u8fdb\u884c\u5f3a\u6821\u9a8c\n\/\/     name: &#039;dj&#039;,\n\/\/     sex:&#039;male&#039; \/\/\u8981\u62a5\u9519\n\/\/ })\nsetName(person, &#039;dl&#039;)\n\n\/\/\u7c7b\u53bb\u5e94\u7528\u8fd9\u4e2a Person \u63a5\u53e3, \u8981\u6c42\u7c7b\u5fc5\u987b\u5177\u5907\u63a5\u53e3\u4e2d\u7684\u5c5e\u6027(name,say())\nclass User implements Person{\n    name: &#039;dj&#039;;\n    say(){\n        return &#039;hello&#039;\n    }\n}\n\nconst say:SayHi=(word:string)=&gt;{\n    return word\n}<\/code><\/pre>\n<h2>\u7c7b\u7684\u5b9a\u4e49\u4e0e\u7ee7\u627f<\/h2>\n<pre class=\"prettyprint linenums\" ><code>class Person {\n    name = &#039;dj&#039;;\n\n    getName() {\n        return this.name;\n    }\n}\n\nclass Teacher extends Person {\n    getTeacherName() {\n        return &#039;teacher&#039;;\n    }\n\n    \/\/\u5982\u679c\u5199 getName()\u4f1a\u628a\u7236\u7c7b\u7684\u8986\u76d6\u6389,super \u8c03\u7528\u7236\u7c7b\u7684\u65b9\u6cd5\n    getName() {\n        return super.getName() + &#039;-des&#039;\n    }\n}\n\nconst teacher = new Teacher()\nconsole.log(teacher.getName())\/\/dj\nconsole.log(teacher.getTeacherName())\/\/teacher<\/code><\/pre>\n<h2>\u7c7b\u4e2d\u7684\u8bbf\u95ee\u7c7b\u578b\u548c\u6784\u9020\u5668<\/h2>\n<pre class=\"prettyprint linenums\" ><code>\/** \u8bbf\u95ee\u7c7b\u578b\n * public \u5141\u8bb8\u6211\u5728\u7c7b\u7684\u5185\u5916\u88ab\u8c03\u7528\n * private \u5141\u8bb8\u5728\u7c7b\u5185\u88ab\u4f7f\u7528\n * protected \u5141\u8bb8\u5728\u7c7b\u5185\u53ca\u7ee7\u627f\u7684\u5b50\u7c7b\u4e2d\u4f7f\u7528\n *\/\nclass Person {\n    protected name: string;\n    public sayHi() {\n        console.log(&#039;hi&#039;)\n    }\n}\n\nclass Teacher extends Person {\n    public sayBye() {\n        this.sayHi();\n    }\n}\n\nconst person = new Person()\n\/\/ person.name=&#039;ds&#039;;\/\/\u62a5\u9519\n\/\/ console.log(person.name)\nperson.sayHi()\n\n\/**\n * constructor\n *\/\nclass Person1{\n    \/** \u4f20\u7edf\u5199\u6cd5\n     * public name:string;\n     * Person \u5728\u88ab\u5b9e\u4f8b\u5316\u7684\u65f6\u5019,constructor \u8fd9\u4e2a\u65b9\u6cd5\u4f1a\u88ab\u7acb\u5373\u81ea\u52a8\u6267\u884c\n     * constructor(name:string) {\n     *   this.name=name;\n     * }\n     *\/\n    \/\/\u7b80\u5316\u5199\u6cd5\n    constructor(public name:string) {}\n}\nconst person1=new Person1(&#039;dj&#039;)\nconsole.log(person1.name)\n\nclass Person3{\n    constructor(public name:string) {}\n}\nclass Teacher3 extends Person3{\n    constructor(public age:number) {\n        super(&#039;dj&#039;);\/\/\u8c03\u7236\u7c7b\u7684\u6784\u9020\u51fd\u6570\n    }\n}\nconst teacher3=new Teacher3(28)\nconsole.log(teacher3)<\/code><\/pre>\n<h2>\u9759\u6001\u5c5e\u6027\uff0cSetter \u548c Getter ???<\/h2>\n<pre class=\"prettyprint linenums\" ><code>class Person {\n    constructor(private _name: string) {\n    }\n\n    get name() {\n        return this._name + &#039;le&#039;;\n    }\n\n    set name(name: string) {\n        const realName = name.split(&#039; &#039;)[0];\n        this._name = realName\n    }\n}\n\nconst person = new Person(&#039;djj&#039;);\nconsole.log(person.name)\nperson.name = &#039;de le1&#039;;\nconsole.log(person.name)\n\n\/\/\u5355\u4f8b\u6a21\u5f0f:\u53ea\u80fd\u751f\u6210\u4e00\u4e2a\u5b9e\u4f8b\nclass Demo {\n    private static instance: Demo\n\n    private constructor(public name:string) {\n    }\n\n    static getInstance() {\n        if(!this.instance){\n            this.instance=new Demo(&#039;dejj&#039;)\n        }\n        return this.instance;\n    }\n}\n\/\/demo1 \u548c demo2 \u5c31\u7406\u8bba\u4e0a\u662f\u5b8c\u5168\u76f8\u7b49\u7684\u4e1c\u897f\u4e86\nconst demo1 = Demo.getInstance()\nconst demo2 = Demo.getInstance()\nconsole.log(demo1.name)<\/code><\/pre>\n<h2>\u62bd\u8c61\u7c7b<\/h2>\n<pre class=\"prettyprint linenums\" ><code>\/\/readonly: \u53ea\u80fd\u8bfb\u4e0d\u80fd\u6539\nclass Person {\n    public readonly name: string;\n    constructor(name: string) {\n        this.name = name\n    }\n}\nconst person = new Person(&#039;ded&#039;);\nconsole.log(person.name)\n\n\/\/\u62bd\u8c61\u7c7b, \u53ea\u80fd\u88ab\u7ee7\u627f, \u4e0d\u80fd\u76f4\u63a5\u88ab\u5b9e\u4f8b\u5316\nabstract class Geom {\n    width: number;\n    getType() {\n        return &#039;Geom&#039;;\n    }\n    abstract getArea(): number;\n}\nclass Circle extends Geom {\n    getArea() {\n        return 123;\n    }\n}\n\n\/\/\u63a5\u53e3\ninterface Person1{\n    name:string;\n}\ninterface Teacher extends Person1{\n    teacherAge:number\n}\ninterface Student extends Person1{\n    age:number\n}\nconst teacher={\n    name:&#039;dell&#039;,\n    teacherAge:33\n}\nconst student={\n    name:&#039;lee&#039;,\n    age:18\n}\nconst getUserInfo=(user:Person1)=&gt;{\n    console.log(user.name)\n}\ngetUserInfo(teacher)\ngetUserInfo(student)<\/code><\/pre>\n<h1>TypeScript \u8bed\u6cd5\u8fdb\u9636<\/h1>\n<ul>\n<li>tsc --init<\/li>\n<li>tsconfig.json \u4e2d  [ \u76f4\u63a5 tsc \u547d\u4ee4\u53ef\u4ee5\u4f7f\u7528 tsconfig.json \u7684\u914d\u7f6e] tsc-node \u4e5f\u53ef\u4ee5<\/li>\n<li>\u6587\u6863: <a href=\"https:\/\/www.tslang.cn\/docs\/handbook\/compiler-options.html\">https:\/\/www.tslang.cn\/docs\/handbook\/compiler-options.html<\/a><\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>{\n  \/\/  &quot;files&quot;: [&quot;.\/demo.ts&quot;],\/\/\u4e00\u6837\u7684\n  &quot;include&quot;: [&quot;.\/demo.ts&quot;],\/\/\u53ef\u4ee5\u6307\u5b9a\u7f16\u8bd1\u54ea\u4e2a\u6587\u4ef6\n  &quot;compilerOptions&quot;: {\n \/\/ &quot;incremental&quot;: true, \/\/\u589e\u91cf\u7f16\u8bd1,\u53ea\u7f16\u8bd1\u8fd9\u6b21\u65b0\u589e\u7684\u5185\u5bb9\n  &quot;removeComments&quot;: true, \/\/\u628a ts \u5bf9\u5e94\u7684\u6ce8\u91ca\u5728\u7f16\u8bd1\u4e2d\u6ce8\u91ca\u6389\n  \/\/    &quot;strict&quot;: true,\n  &quot;noImplicitAny&quot;: true,\/\/\u5fc5\u987b\u660e\u786e\u624b\u52a8\u6307\u5b9a anyfunction abc(name:any)\n  &quot;strictNullChecks&quot;: true,\/\/\u5f3a\u5236\u5bf9 null \u8fdb\u884c\u68c0\u9a8c\n  &quot;rootDir&quot;: &quot;.\/src&quot;,\/\/\u6307\u5b9a\u8f93\u5165\u6587\u4ef6\u5730\u5740\n  &quot;outDir&quot;: &quot;.\/build&quot;,\/\/\u6307\u5b9a\u751f\u6210\u6587\u4ef6\u7684\u4f4d\u7f6e\n  &quot;target&quot;: &quot;es6&quot;,\/\/\u53d8\u6210 es6 \u8bed\u6cd5\n  &quot;allowJs&quot;: true,\/\/\u662f\u5426\u5bf9 js \u6587\u4ef6\u8fdb\u884c\u7f16\u8bd1\n  &quot;checkJs&quot;: true, \/\/\u68c0\u6d4b js \u7684\u8bed\u6cd5\n  &quot;sourceMap&quot;: true,\/\/\u6253\u5305\u7684\u8fc7\u7a0b\u4e2d\u8f93\u51fa sourceMap\n  &quot;noUnusedLocals&quot;: true,\/\/\u68c0\u6d4b\u5b9a\u4e49\u4e86\u6ca1\u6709\u88ab\u4f7f\u7528\u7684,,\u4f8b\u5982 const teacher:string=null\n  &quot;noUnusedParameters&quot;: true,\/\/\u5bf9\u51fd\u6570\u7684\u53c2\u6570\u8fdb\u884c\u6821\u9a8c\n  }\n}<\/code><\/pre>\n<h2>\u8054\u5408\u7c7b\u578b\u548c\u7c7b\u578b\u4fdd\u62a4<\/h2>\n<pre class=\"prettyprint linenums\" ><code>interface Bird {\n    fly: boolean;\n    sing: () =&gt; {}\n}\n\ninterface Dog {\n    fly: boolean;\n    bark: () =&gt; {}\n}\n\n\/\/\u7c7b\u578b\u65ad\u8a00\u7684\u65b9\u5f0f,\u6839\u636e\u81ea\u8eab\u5bf9\u903b\u8f91\u7684\u7406\u89e3,\u53ef\u4ee5\u89c4\u907f\u6f5c\u5728\u7684\u95ee\u9898\nfunction trainAnimal(animal: Bird | Dog) {\n    if (animal.fly) {\/\/\u5f3a\u5236\n        (animal as Bird).sing()\n    } else {\n        (animal as Dog).bark()\n    }\n}\n\n\/\/in \u8bed\u6cd5\u6765\u505a\u7c7b\u578b\u4fdd\u62a4\nfunction trainAnimalSecond(animal: Bird | Dog) {\n    if (&#039;sing&#039; in animal) {\n        animal.sing();\n    } else {\n        animal.bark()\n    }\n}\n\n\/\/typeof \u8bed\u6cd5\u6765\u505a\u7c7b\u578b\u4fdd\u62a4\nfunction add(first: string | number, second: string | number) {\n    if (typeof first === &#039;string&#039; || typeof second === &#039;string&#039;) {\n        return `${first}${second}`;\n    }\n    return first + second;\n}\n\n\/\/\u4f7f\u7528 instanceof \u8bed\u6cd5\u6765\u505a\u7c7b\u578b\u4fdd\u62a4, \u5bf9\u6570\u636e\u7ed3\u6784\u7684\u5b9a\u4e49,\u53ea\u6709\u7c7b Class \u624d\u5177\u5907\u53ef\u4ee5\u88ab instanceof \u64cd\u4f5c\u7b26\u8c03\u7528\u7684\u8fd9\u79cd\u9ed8\u8ba4\u7684\u884c\u4e3a\nclass NumberObj {\n    count: number\n}\n\nfunction addSecond(first: object | NumberObj, second: object | NumberObj) {\n    if (first instanceof NumberObj &amp;&amp; second instanceof NumberObj) {\n        return first.count + second.count\n    }\n    return 0;\n}<\/code><\/pre>\n<h2>Enum \u679a\u4e3e\u7c7b\u578b<\/h2>\n<pre class=\"prettyprint linenums\" ><code>enum Status{\n    OFFLINE,\/\/0\n    ONLINE,\/\/1\n    DELETED\/\/2\n}\n\nconsole.log(Status.OFFLINE,Status[0])\/\/0 OFFLINE  \u4e0d\u5b58\u5728\u5219 undefined\n\nfunction getResult(status: number){\n    if(status===Status.OFFLINE){\n        return &#039;offline&#039;;\n    }else if(status===Status.ONLINE){\n        return &#039;online&#039;\n    }else if(status===Status.DELETED){\n        return &#039;deleted&#039;\n    }\n    return &#039;error&#039;\n}\n\nconst result = getResult(1);\nconsole.log(result)\/\/online<\/code><\/pre>\n<h2>\u51fd\u6570\u6cdb\u578b(\u96be\u70b9)<\/h2>\n<pre class=\"prettyprint linenums\" ><code>\/\/\u6cdb\u578b generic \u6cdb\u6307\u7684\u7c7b\u578b&lt;T,P&gt;\nfunction join&lt;T,P&gt;(first: T, second: P) {\n    return `${first}${second}`\n}\n\nfunction anotherJoin&lt;T&gt;(first: T, second: T):T {\n    return first;\n}\n\n\/\/T[] &lt;-&gt; Array&lt;T&gt;\nfunction map&lt;T&gt;(params:T[]){\n    return params\n}\n\n\/\/\u6307\u5b9a T \u662f string, \u5219 first \u548c second \u90fd\u5fc5\u987b\u662f string \u7c7b\u578b\u7684\njoin&lt;string,string&gt;(&#039;1&#039;, &#039;1&#039;)\njoin(1,&#039;1&#039;)\/\/\u7c7b\u578b\u63a8\u65ad\nmap&lt;string&gt;([&#039;123&#039;])<\/code><\/pre>\n<h2>\u7c7b\u4e2d\u7684\u6cdb\u578b\u4ee5\u53ca\u6cdb\u578b\u7c7b\u578b<\/h2>\n<pre class=\"prettyprint linenums\" ><code>\/\/1\nclass DataManager&lt;T&gt; {\n    constructor(private data: T[]) {\n    }\n\n    getItem(index: number): T {\n        return this.data[index]\n    }\n}\n\nconst data = new DataManager&lt;string&gt;([&#039;1&#039;])\ndata.getItem(0)\n\n\/\/2\ninterface Item {\n    name: string\n}\n\nclass DataManager1&lt;T extends Item&gt; {\n    constructor(private data: T[]) {\n    }\n\n    getItem(index: number): string {\n        return this.data[index].name\n    }\n}\n\nconst data1 = new DataManager1([\n    {\n        name: &#039;dsf&#039;\n    }\n])\n\n\/\/3: T \u8fd9\u4e2a\u6cdb\u578b\u53ea\u80fd\u662f string \u6216 number\nclass DataManager2&lt;T extends number | string&gt; {\n    constructor(private data: T[]) {\n    }\n\n    getItem(index: number): T {\n        return this.data[index]\n    }\n}\n\nconst data3 = new DataManager2&lt;string&gt;([])\n\n\/\/4, \u5982\u4f55\u4f7f\u7528\u6cdb\u578b\u4f5c\u4e3a\u4e00\u4e2a\u5177\u4f53\u7684\u7c7b\u578b\u6ce8\u89e3??\nfunction hello&lt;T&gt;(params: T) {\n    return params;\n}\n\nconst func: &lt;T&gt;(params: T) =&gt; T = hello<\/code><\/pre>\n<h2>\u547d\u540d\u7a7a\u95f4-namespace<\/h2>\n<ul>\n<li>npm init -y<\/li>\n<li>tsc -init<\/li>\n<li>\u8fd0\u884c\u7f16\u8bd1\u4ee3\u7801, tsc -w \u4f1a\u5904\u4e8e\u76d1\u542c\u6a21\u5f0f<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>\/\/index.html\n&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;en&quot;&gt;\n&lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot;&gt;\n    &lt;title&gt;Title&lt;\/title&gt;\n    &lt;script src=&quot;.\/dist\/page.js&quot;&gt;&lt;\/script&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;script&gt;\n    new Home.Page();\/\/\u90a3\u4e9b HeaderContentFooter \u662f\u5168\u5c40\u53d8\u91cf??\n&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<pre class=\"prettyprint linenums\" ><code>\/\/page.ts\nnamespace Home {\n    class Header {\n        constructor() {\n            const elem = document.createElement(&#039;div&#039;)\n            elem.innerText = &#039;this is header&#039;\n            document.body.appendChild(elem)\n        }\n    }\n    \/\/\u53ea\u6709 page \u662f\u5168\u5c40\u53d8\u91cf,\u66b4\u9732\u51fa\u53bb\n    export class Page {\n        constructor() {\n            new Header();\n        }\n    }\n\n}<\/code><\/pre>\n<ul>\n<li>\u5c01\u88c5\u7ec4\u4ef6\n<ul>\n<li>&quot;outFile&quot;: &quot;.\/dist\/page.js&quot;,<br \/>\n&quot;rootDir&quot;: &quot;.\/src&quot;,<br \/>\n&quot;outDir&quot;: &quot;.\/dist&quot;,<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>\/\/components.ts\n namespace Components {\n \/\/\u5728\u5b50\u547d\u540d\u7a7a\u95f4\u4e5f\u53ef\u4ee5\u5199\u5176\u4ed6\u7684\u53d8\u91cf,\u7c7b,\u63a5\u53e3,\u4efb\u4f55 ts \u652f\u6301\u7684\u8bed\u6cd5\n    export namespace SubComponents{\n        export class Test{}\n    }\n    export interface User{\n        name:string\n    }\n    export class Header {\n        constructor() {\n            const elem = document.createElement(&#039;div&#039;)\n            elem.innerText = &#039;this is header&#039;\n            document.body.appendChild(elem)\n        }\n    }\n}<\/code><\/pre>\n<pre class=\"prettyprint linenums\" ><code>\/\/page.ts\n\/\/&lt;reference path=&#039;.\/components.ts&#039;\/&gt;\nnamespace Home {\n    \/\/\u53ea\u6709 page \u662f\u5168\u5c40\u53d8\u91cf,\u66b4\u9732\u51fa\u53bb\n    export class Page {\n        user:Components.User={\n            name:&#039;ssfs&#039;\n        }\n        constructor() {\n            new Components.Header();\n            new Components.Content();\n            new Components.Footer();\n        }\n    }\n}<\/code><\/pre>\n<h2>import \u5bf9\u5e94\u7684\u6a21\u5757\u5316<\/h2>\n<ul>\n<li>amd \u89c4\u8303\u7684\u4ee3\u7801\u518d\u6d4f\u89c8\u5668\u4e2d\u8fd0\u884c\u4e0d\u8d77<\/li>\n<li>&quot;module&quot;: &quot;amd&quot;,<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>\/\/page.ts\nimport { Header,Content,Footer} from &#039;.\/components&#039;\nexport default class Page {\n    constructor() {\n        new Header();\n    }\n}<\/code><\/pre>\n<pre class=\"prettyprint linenums\" ><code>\/\/components.ts\nexport class Header {\n    constructor() {\n        const elem = document.createElement(&#039;div&#039;)\n        elem.innerText = &#039;this is header&#039;\n        document.body.appendChild(elem)\n    }\n}<\/code><\/pre>\n<pre class=\"prettyprint linenums\" ><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;en&quot;&gt;\n&lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot;&gt;\n    &lt;title&gt;Title&lt;\/title&gt;\n    &lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/require.js\/2.3.6\/require.js&quot;&gt;&lt;\/script&gt;\n    &lt;script src=&quot;.\/dist\/page.js&quot;&gt;&lt;\/script&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;script&gt;\n    require([&#039;page&#039;],function (page){\n        new page.default()\n    })\n&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<h2>\u4f7f\u7528 Parcel \u6253\u5305 TS \u4ee3\u7801<\/h2>\n<ul>\n<li>&quot;parcel&quot;: &quot;^2.0.0-alpha.3.2&quot;,<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>\/\/index.html\n&lt;head&gt;\n    &lt;script src=&quot;.\/page.ts&quot; type=&quot;text\/typescript&quot;&gt;&lt;\/script&gt;\n&lt;\/head&gt;\n\/\/package.json\n&quot;scripts&quot;: {\n    &quot;start&quot;: &quot;parcel .\/src\/index.html&quot;\n  }<\/code><\/pre>\n<h2>\u63cf\u8ff0\u6587\u4ef6\u4e2d\u7684\u5168\u5c40\u7c7b\u578b<\/h2>\n<ul>\n<li>npm i --save-dev @types\/jquery<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>\/\/index.html\n&lt;script src=&quot;https:\/\/cdn.bootcdn.net\/ajax\/libs\/jquery\/3.4.1\/jquery.js&quot;&gt;&lt;\/script&gt;<\/code><\/pre>\n<pre class=\"prettyprint linenums\" ><code>\/\/jquery.d.ts\n\/**\n * \u7c7b\u578b\u5b9a\u4e49\u6587\u4ef6\u91cc\u9762,\u53bb\u5bf9\u5168\u5c40\u7684\u51fd\u6570\u8fdb\u884c\u5b9a\u4e49\n * \u5e2e\u52a9 ts \u6587\u4ef6, \u7406\u89e3\u6211\u4eec\u5f15\u5165\u7684 js \u6587\u4ef6\u6216\u8005 js \u5e93\u91cc\u9762\u7684\u5185\u5bb9\n * \u56e0\u4e3a js \u5e93\u91cc\u9762\u6ca1\u6709 ts \u8981\u6c42\u7684\u7c7b\u578b\u7684\u6982\u5ff5\n *\/\n\/\/\u5b9a\u4e49\u5168\u5c40\u53d8\u91cf\ndeclare var $: (param: () =&gt; void) =&gt; void\/\/\u51fd\u6570,\u8fd4\u56de\u503c\u662f\u7a7a\n\n\/\/\u5b9a\u4e49\u5168\u5c40\u51fd\u6570\ninterface JqueryInstance {\n    html: (html: string) =&gt; JqueryInstance\n}\n\n\/\/\u51fd\u6570\u91cd\u8f7d\ndeclare function $(readyFunc: () =&gt; void): void;\ndeclare function $(selector: string): JqueryInstance\n\/\/(2)\u5982\u4f55\u5bf9\u5bf9\u8c61\/\u7c7b\u8fdb\u884c\u7c7b\u578b\u5b9a\u4e49,\u4ee5\u53ca\u547d\u540d\u7a7a\u95f4\u7684\u5d4c\u5957\ndeclare namespace $ {\n    namespace fn{\n       class init {}\n    }\n}\n\/\/(1)\u4f7f\u7528\u4e86 interface \u7684\u8bed\u6cd5,\u5b9e\u73b0\u51fd\u6570\u91cd\u8f7d\n\/\/ interface JQuery{\n\/\/     (readyFunc: () =&gt; void): void;\n\/\/     (selector: string):JqueryInstance\n\/\/ }\n\/\/ declare var $:JQuery<\/code><\/pre>\n<pre class=\"prettyprint linenums\" ><code>\/\/page.ts\n$(function (){\n    $(&#039;body&#039;).html(&#039;&lt;div&gt;123&lt;\/div&gt;&#039;)\n})\/\/123\nnew $.fn.init()\/\/(2)<\/code><\/pre>\n<h2>\u6a21\u5757\u4ee3\u7801\u7684\u7c7b\u578b\u63cf\u8ff0\u6587\u4ef6<\/h2>\n<ul>\n<li>npm install jquery --save<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>\/\/jquery.d.ts\n\/\/ES6 \u6a21\u5757\u5316\ndeclare module &#039;jquery&#039; {\n    interface JqueryInstance {\n        html: (html: string) =&gt; JqueryInstance\n    }\n\n    \/\/\u6df7\u5408\u7c7b\u578b\n    function $(readyFunc: () =&gt; void): void;\n    function $(selector: string): JqueryInstance\n    namespace $ {\n        namespace fn {\n            class init {\n            }\n        }\n    }\n    export =$\n}<\/code><\/pre>\n<pre class=\"prettyprint linenums\" ><code>\/\/page.ts\nimport $ from &#039;jquery&#039;\n$(function (){\n    $(&#039;body&#039;).html(&#039;&lt;div&gt;1dd23&lt;\/div&gt;&#039;)\n    new $.fn.init()\n})<\/code><\/pre>\n<h2>\u6cdb\u578b\u4e2d keyof \u8bed\u6cd5\u7684\u4f7f\u7528<\/h2>\n<pre class=\"prettyprint linenums\" ><code>\/\/page.ts\ninterface Person {\n    name: string;\n    age: number;\n    gender: string;\n}\n\n\/**\n * \u5982\u679c\u6709\u4e2a\u7c7b\u91cc\u6709\u4e2a\u5bf9\u8c61,\u60f3\u6839\u636e key \u6216 index \u53bb\u83b7\u5f97\u5bf9\u8c61\u7684\u67d0\u4e2a\u5185\u5bb9\n * \u53c8\u60f3\u63a8\u65ad\u51fa\u6b63\u786e\u7684\u8fd4\u56de\u5185\u5bb9\u7684\u7c7b\u578b\u2193\n *\/\n\/\/T extends &#039;name&#039;&lt;=&gt;type T=&#039;name&#039; -&gt; key:&#039;name&#039;\n\/\/Person[T] =&gt; Person[&#039;name&#039;]\nclass Teacher {\n    constructor(private info: Person) {\n    }\n    \/\/\u2191 \u5c31\u53ef\u4ee5\u7528\u8fd9\u79cd\n    getInfo&lt;T extends keyof Person&gt;(key: T) :Person[T]{\n        return this.info[key]\n    }\n}\n\nconst teacher = new Teacher({\n    name: &#039;del&#039;,\n    age: 18,\n    gender: &#039;male&#039;\n})\nconst test = teacher.getInfo(&#039;name&#039;)\nconsole.log(test)<\/code><\/pre>\n<h1>TypeScript \u9ad8\u7ea7\u8bed\u6cd5<\/h1>\n<h2>\u7c7b\u7684\u88c5\u9970\u5668<\/h2>\n<ul>\n<li>npm init -y<\/li>\n<li>tsc --init<\/li>\n<li>npm install ts-node -D<\/li>\n<li>npm install typescript --save<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code> &quot;experimentalDecorators&quot;: true,\n &quot;emitDecoratorMetadata&quot;: true,<\/code><\/pre>\n<ul>\n<li>simple_decorator.ts : \u8bed\u6cd5\u63d0\u793a\u5e76\u4e0d\u5b8c\u5584<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>\/**\n * \u7c7b\u7684\u88c5\u9970\u5668\n * \u88c5\u9970\u5668\u672c\u8eab\u662f\u4e00\u4e2a\u51fd\u6570\n * \u901a\u8fc7@\u7b26\u53f7\u6765\u4f7f\u7528\n * \u5728\u7c7b\u521b\u5efa\u597d\u7684\u65f6\u5019\u7acb\u5373\u5b9e\u73b0\n * \u7c7b\u88c5\u9970\u5668\u63a5\u6536\u7684\u53c2\u6570\u662f\u6784\u9020\u51fd\u6570\n * \u7528\u591a\u4e2a\u88c5\u9970\u5668\u65f6,\u4ece\u4e0b\u5230\u4e0a, \u4ece\u53f3\u5230\u5de6\u7684\u987a\u5e8f\u6267\u884c\n *\/\nfunction testDecorator(flag:boolean){\n    if(flag){\n        return  function (constructor:any){\n            constructor.prototype.getName=()=&gt;{\n                console.log(&#039;dj&#039;)\n            }\n        }\n    }else {\n        return function (constructor:any){}\n    }\n\n}\n\n@testDecorator(true)\nclass Test{}\nconst test=new Test();\n(test as any).getName()<\/code><\/pre>\n<ul>\n<li>index.ts : \u5982\u679c\u4f60\u589e\u52a0\u7684\u8fd9\u4e2a\u65b9\u6cd5 getName() \u5728\u539f\u6765\u7684\u7c7b class {}\u4e0a\u6ca1\u6709\u7684, \u5219\u9700\u8981\u901a\u8fc7\u8fd9\u79cd factory \u5de5\u5382\u51fd\u6570\u7684\u5f62\u5f0f, \u53bb\u5bf9\u539f\u6765\u7684\u7c7b\u505a\u4e00\u4e0b\u88c5\u9970\u5668\u7684\u4fee\u9970, \u7136\u540e\u751f\u6210\u4e00\u4e2a\u65b0\u7684\u7c7b\u7ed9\u5230 Test, \u518d\u53bb\u521b\u9020\u7c7b\u7684\u5b9e\u4f8b\u7684\u65f6\u5019, \u5c31\u80fd\u591f\u901a\u8fc7\u8bed\u6cd5\u63d0\u793a, \u4f7f\u7528\u65b0\u589e\u7684\u4e00\u4e9b\u7c7b\u7684\u65b9\u6cd5\u4e86, test.getName()<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>\/**\n * new (...args:any[])=&gt;any  \u6784\u9020\u51fd\u6570\n * T \u7c7b\u6216\u8005\u5305\u542b\u6784\u9020\u51fd\u6570\u7684\u4e00\u79cd\u4e1c\u897f\n *\/\nfunction testDecorator1() {\n  return function &lt;T extends new (...args: any[]) =&gt; any&gt;(constructor: T) {\n    return class extends constructor {\n      name = &#039;wbl&#039;;\n      getName() {\n        return this.name\n      }\n    }\n  }\n}\n\nconst Test1 = testDecorator1()(\n  class {\n    name: string;\n\n    constructor(name: string) {\n      this.name = name\n    }\n  })\n\nconst test = new Test1(&#039;de&#039;);\nconsole.log(test.getName())<\/code><\/pre>\n<h2>\u65b9\u6cd5\u88c5\u9970\u5668<\/h2>\n<pre class=\"prettyprint linenums\" ><code>\/**\n * \u666e\u901a\u65b9\u6cd5,target \u5bf9\u5e94\u7684\u662f\u7c7b\u7684 prototype\n * \u9759\u6001\u65b9\u6cd5, target \u5bf9\u5e94\u7684\u662f\u7c7b\u7684\u6784\u9020\u51fd\u6570\n *\/\nfunction getNameDecorator(target: any, key: string,descriptor:PropertyDescriptor) {\n  \/\/ console.log(target, key)\n  \/\/false \u4e0d\u53ef\u88ab\u91cd\u5199\n  \/\/ descriptor.writable=true\n  descriptor.value=function (){\n    return &#039;descriptor&#039;\n  }\n}\n\nclass Test {\n  name: string;\n\n  constructor(name: string) {\n    this.name = name\n  }\n\n  @getNameDecorator\n  getName() {\n    return this.name\n  }\n\n  \/\/ static getName(){\n  \/\/   return &#039;123&#039;\/\/[class Test] getName\n  \/\/ }\n}\n\nconst test = new Test(&#039;de&#039;);\n\/\/ test.getName=()=&gt;{\/\/\u88ab\u91cd\u5199\n\/\/   return &#039;123&#039;\n\/\/ }\nconsole.log(test.getName())<\/code><\/pre>\n<h2>\u8bbf\u95ee\u5668\u7684\u88c5\u9970\u5668<\/h2>\n<pre class=\"prettyprint linenums\" ><code>function visitDecorator(target: any, key: string,descriptor:PropertyDescriptor) {\n  descriptor.writable=true\n}\n\nclass Test {\n  private _name: string;\n\n  constructor(name: string) {\n    this._name = name\n  }\n\n  get name() {\n    return this._name\n  }\n  @visitDecorator \/\/get \u548c set \u4e0d\u80fd\u540c\u65f6\u7528\n  set name(name:string){\n    this._name=name;\n  }\n}\n\nconst test = new Test(&#039;dedd&#039;);\ntest.name=&#039;123123123&#039;\nconsole.log(test.name)<\/code><\/pre>\n<h2>\u5c5e\u6027\u7684\u88c5\u9970\u5668<\/h2>\n<pre class=\"prettyprint linenums\" ><code>\/\/ function nameDecorator(target: any, key: string):any {\n\/\/   \/\/false: name \u5c31\u4e0d\u80fd\u4fee\u6539\n\/\/   const descriptor:PropertyDescriptor={\n\/\/     writable:true\n\/\/   }\n\/\/   return descriptor\n\/\/ }\n\/\/\u4fee\u6539\u7684\u5e76\u4e0d\u662f\u5b9e\u4f8b\u4e0a\u7684 name, \u800c\u662f\u539f\u578b\u4e0a\u7684 name\nfunction nameDecorator(target: any, key: string):any {\n  target[key]=&#039;789789&#039;\n}\n\/\/name \u653e\u5728\u5b9e\u4f8b\u4e0a\nclass Test {\n  @nameDecorator\n  name=&#039;djjjj&#039;\n}\n\nconst test = new Test();\n\/\/ test.name=&#039;1234546&#039;\/\/\u53ef\u4ee5\u88ab\u4fee\u6539\nconsole.log((test as any).__proto__.name)<\/code><\/pre>\n<h2>\u53c2\u6570\u88c5\u9970\u5668<\/h2>\n<pre class=\"prettyprint linenums\" ><code>\/**\n *\n * @param target \u539f\u578b\n * @param method \u65b9\u6cd5\u540d\n * @param paramIndex \u53c2\u6570\u6240\u5728\u7684\u4f4d\u7f6e\n *\/\nfunction paramDecorator(target: any, method: string,paramIndex:number) {\n  console.log(target,method,paramIndex)\n}\n\n\/\/name \u653e\u5728\u5b9e\u4f8b\u4e0a\nclass Test {\n getInfo(@paramDecorator name:string,age:number){\n   console.log(name,age)\n }\n}\n\nconst test = new Test();\ntest.getInfo(&#039;dj&#039;,32)\n\/\/{} getInfo 0\n\/\/ dj 32<\/code><\/pre>\n<h2>\u88c5\u9970\u5668\u5b9e\u9645\u4f7f\u7528\u7684\u5c0f\u4f8b\u5b50<\/h2>\n<pre class=\"prettyprint linenums\" ><code>const userInfo: any = undefined\n\/\/\u6355\u83b7\u5f02\u5e38\nfunction catchError(msg:string){\n  return  function (target: any, key: string, descriptor: PropertyDescriptor) {\n    const fn = descriptor.value\n    descriptor.value = function () {\n      try {\n        fn();\n      } catch (e) {\n        console.log(msg)\n      }\n    }\n  }\n}\n\nclass Test {\n  @catchError(&#039;userInfo.name \u4e0d\u5b58\u5728&#039;)\n  getName() {\n    return userInfo.name\n  }\n  @catchError(&#039;userInfo.age \u4e0d\u5b58\u5728&#039;)\n  getAge() {\n      return userInfo.age\n  }\n}\n\nconst test = new Test()\ntest.getName()\ntest.getAge()<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\u82f1\u6587\u6587\u6863: https:\/\/www.typescriptlang.org\/docs\/handbook\/intr [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-4214","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/4214","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4214"}],"version-history":[{"count":87,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/4214\/revisions"}],"predecessor-version":[{"id":5408,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/4214\/revisions\/5408"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4214"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4214"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4214"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}