{"id":88884,"date":"2019-07-25T19:23:38","date_gmt":"2019-07-25T11:23:38","guid":{"rendered":"http:\/\/4563.org\/?p=88884"},"modified":"2019-07-25T19:23:38","modified_gmt":"2019-07-25T11:23:38","slug":"%e8%af%b7%e9%97%ae-typescript-%e7%b1%bb%e5%9e%8b%e5%a3%b0%e6%98%8e%e9%97%ae%e9%a2%98%ef%bc%9f","status":"publish","type":"post","link":"http:\/\/4563.org\/?p=88884","title":{"rendered":"\u8bf7\u95ee typescript \u7c7b\u578b\u58f0\u660e\u95ee\u9898\uff1f"},"content":{"rendered":"
\n
\n
\n

\u8bf7\u95ee typescript \u7c7b\u578b\u58f0\u660e\u95ee\u9898\uff1f <\/h1>\n

<\/p>\n

\n
\u8cc7\u6df1\u5927\u4f6c : xiaoming1992 <\/span> <\/i> 47<\/span> <\/div>\n
<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n
<\/p>\n
type TA = \"typeA\" type TB = \"typeB\" type TC = \"typeC\"  type HA = (arg: number) => void; type HB = (arg: string) => void; type HC = (arg: boolean) => void;  \/\/ \u76ee\u7684\u662f\u4e3a\u4e86\u5b9e\u73b0\u4e0b\u9762\u8fd9\u6837\u7c7b\u4f3c\u7684\u91cd\u8f7d \/\/ \u4f46\u662f\u611f\u89c9\u91cd\u8f7d\u6709\u4e9b\u9ebb\u70e6\uff0c\u4e07\u4e00\u7c7b\u578b\u591a\u4e86\uff0c\u5f97\u5199\u4e00\u5806\uff0c\u5f88\u70e6 \/\/ \u6709\u4ec0\u4e48\u529e\u6cd5\u901a\u8fc7\u6cdb\u578b\u6765\u8868\u8fbe\u5417\uff1f function func(type: TA, handler: HA): void; function func(type: TB, handler: HB): void; function func(type: TC, handler: HC): void; <\/code><\/pre>\n<\/p><\/div>\n
 \u5927\u4f6c\u6709\u8a71\u8aaa<\/b> (16<\/span>)        <\/div>\n
 <\/div>\n<\/p><\/div>\n<\/p><\/div>\n
    \n
  • \n
    \n
    \n
     \u8cc7\u6df1\u5927\u4f6c : wisebeer <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 \u7528 any                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u4e3b<\/span> \u8cc7\u6df1\u5927\u4f6c : xiaoming1992 <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 @wisebeer \u5927\u4f6c\uff01\u5927\u4f6c\uff01[\u62b1\u62f3]                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u8cc7\u6df1\u5927\u4f6c : des <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 \u6cdb\u578b                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u8cc7\u6df1\u5927\u4f6c : EridanusSora <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 type H<T> = (arg: T) => void;<\/p>\n
    function funcA(type: TA, handler: H<string>): void;
    function funcB(type: TB, handler: H<number>): void;
    function funcC(type: TC, handler: H<boolean>): void;                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u8cc7\u6df1\u5927\u4f6c : codelegant <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 TA \uff5c TB \uff5c TC \u4e0e HA \uff5c HB \uff5c HC \u4e4b\u524d\u53ef\u4ee5\u901a\u8fc7\u64cd\u4f5c\u5173\u8054\u8d77\u6765\u5417\uff1f\u5982\u679c\u4e0d\u884c\uff0c\u5c31\u65e0\u6cd5\u4f7f\u7528\u6cdb\u578b\u3002\u6cdb\u578b\u5c31\u662f\u7528\u53d8\u91cf\u6355\u83b7\u7c7b\u578b\u7684\u58f0\u660e\uff0c\u7136\u540e\u91cd\u7528\u3002                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u8cc7\u6df1\u5927\u4f6c : wi <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 interface TMap {
     “a”: (a: number) => any
     “b”: (b: number | string) => any
     “c”: (c: Date) => any
    }<\/p>\n
    function fn2<T extends keyof TMap, F extends TMap[T]>(a: T, fn: F) {<\/p>\n
    }                                                            <\/p><\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u8cc7\u6df1\u5927\u4f6c : wi <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 function fn3<T extends keyof TMap>(a: T, fn: TMap[T]) {<\/p>\n
    }
    \u8fd9\u4e2a\u4e5f\u53ef\u4ee5                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u4e3b<\/span> \u8cc7\u6df1\u5927\u4f6c : xiaoming1992 <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 @EridanusSora \u6211\u5c31\u662f\u4e0d\u60f3\u7528\u91cd\u8f7d\u554a…<\/p>\n
    @wi \u771f\u00b7\u5927\u4f6c\uff01\u6211\u4e00\u76f4\u5728\u60f3\u524d\u9762\u7684 T \u600e\u4e48\u9650\u5b9a\uff0c\u5927\u4f6c\u4e00\u4e2a extends \u5c31\u89e3\u51b3\u4e86\uff0c\u611f\u8c22\uff01                                                            <\/p><\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u8cc7\u6df1\u5927\u4f6c : a132811 <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 @wi \u8bf7\u95ee\u8fd9\u91cc\u600e\u4e48\u9519\u4e86\u554a\uff1f<\/p>\n
    “`
    $ cat a.ts
     interface TMap {
     “a”: (a: number) => any
     “b”: (b: number | string) => any
     “c”: (c: Date) => any
     }<\/p>\n
     function fn2<T extends keyof TMap, F extends TMap[T]>(a: T, fn: F) {
     console.log(a, fn(1))<\/p>\n
     }<\/p>\n
     fn2(“a”,(a:number)=>a)
    \u279c ts$ git:(master) \u2717
    $ tsc a.ts
    a.ts:8:27 – error TS2345: Argument of type ‘1’ is not assignable to parameter of type ‘number & Date’.
     Type ‘1’ is not assignable to type ‘Date’.<\/p>\n
    8 console.log(a, fn(1))<\/p>\n
    “`                                                            <\/p><\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u4e3b<\/span> \u8cc7\u6df1\u5927\u4f6c : xiaoming1992 <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 @a132811 \u4f60\u8fd9\u4e2a fn(1)\uff0cTMap[“c”]\u662f\u4e0d\u80fd\u63a5\u53d7 1 \u8fd9\u4e2a\u53c2\u6570\u7684\u554a\u3002\u4f60\u662f abc \u770b\u61f5\u4e86\u5427\uff0c\u628a fn2 \u91cc\u9762\u7684\u53c2\u6570 a \u6539\u6210 w \u6216\u8005\u5176\u4ed6\u4ec0\u4e48\u7b26\u53f7\u5c31\u6e05\u695a\u4e00\u70b9\u4e86                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u8cc7\u6df1\u5927\u4f6c : a132811 <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 @xiaoming1992 \u4f60\u6ca1\u6709\u770b\u61f5\u4e86\uff0c\u6211\u786e\u5b9e\u662f\u4e0d\u660e\u767d\u3002
    \u6211\u7684\u4ee3\u7801\u91cc\u9762 fn \u7684\u7c7b\u578b\u5c31\u662f TMap[“a”]\u5427\uff0c\u4e5f\u5c31\u662f(a: number) => any \u5427<\/p>\n
    fn(1) \u4e2d 1 \u4e0e a:number \u5e94\u8be5\u80fd\u5339\u914d\u7c7b\u578b\u624d\u5bf9\u5440                                                            <\/p><\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u8cc7\u6df1\u5927\u4f6c : a132811 <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 \u4f60\u6ca1\u6709\u770b\u61f5\u4e86-\u3009\u6211\u6ca1\u6709\u770b\u61f5                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u4e3b<\/span> \u8cc7\u6df1\u5927\u4f6c : xiaoming1992 <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 @a132811 TMap[“a”]\u786e\u5b9e\u6ca1\u95ee\u9898\uff0c\u53ef\u662f TMap[“c”]\u662f\u6709\u95ee\u9898\u7684\u554a\u3002\u4f60\u5728\u5b9a\u4e49 fn2 \u7684\u65f6\u5019\uff0cconsole.log(a, fn(1))\uff0c\u4e0d\u80fd fn(1)\uff0c\u56e0\u4e3a fn \u53ef\u80fd\u53ea\u80fd\u63a5\u53d7 Date\uff0c\u4f60\u628a\u51fd\u6570\u7684\u5f62\u53c2\u5168\u90e8\u6539\u6210 w\uff0c\u5c31\u80fd\u53d1\u73b0\u81ea\u5df1\u54ea\u91cc\u7684\u95ee\u9898\u4e86                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u4e3b<\/span> \u8cc7\u6df1\u5927\u4f6c : xiaoming1992 <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 interface TMap {
    “a”: (w: number) => any
    “b”: (w: number | string) => any
    “c”: (w: Date) => any
    }<\/p>\n
    function fn2<T extends keyof TMap, F extends TMap[T]>(w: T, fn: F) {
    \/\/ \u8fd9\u513f\u9519\u4e86\uff0c\u4e0d\u80fd\u76f4\u63a5\u8c03\u7528 fn(1)
    \/\/ \u5f53 w == “c”\u65f6\uff0cfn \u4e0d\u80fd\u63a5\u53d7 1 \u4f5c\u4e3a\u53c2\u6570
    console.log(w, fn(1))
    }<\/p>\n
    \/\/ \u4f60\u770b\u770b\uff0c\u5982\u679c\u4e0a\u9762\u6267\u884c fn(1)
    \/\/ \u90a3\u4f60\u8fd9\u4e48\u8c03\u7528\u662f\u4e0d\u662f\u5c31 errer \u4e86\uff1f
    fn2(“c”, (w: Date) => w.getDate()) <\/p>\n
    \/\/ \u624b\u673a\u6253\u5b57\u597d\u7d2f…                                                            <\/p><\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u8cc7\u6df1\u5927\u4f6c : a132811 <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 @xiaoming1992 \u611f\u8c22\uff01
    \u6211\u624d\u60f3\u660e\u767d\uff0c\u6211\u60f3\u6210\u4e86\u628a fn:F \u60f3\u6210\u4e86\u6267\u884c\u65f6 `fn2(“a”, (n:number)=>n)` \u624d\u786e\u5b9a\u7c7b\u578b \u4e3a number<\/p>\n
    \u5176\u5b9e\u7f16\u8bd1 typescript \u65f6, fn:F \u7684\u7c7b\u578b\u5c31\u786e\u5b9a\u5fc5\u987b\u63a5\u53d7: number|string|Date\uff0c\u5c11\u4e00\u4e2a\u90fd\u4e0d\u884c<\/p>\n
    ps:\u7a0b\u5e8f\u5458\u4e0d\u8981\u71ac\u591c\uff0c\u71ac\u591c\u592a\u591a\u4e86\uff0c\u8111\u5b50\u8981\u574f                                                            <\/p><\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u4e3b<\/span> \u8cc7\u6df1\u5927\u4f6c : xiaoming1992 <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 @a132811 \u71ac\u591c\u72d7\u67af\u8fa3                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n","protected":false},"excerpt":{"rendered":"
    \u8bf7\u95ee typescript \u7c7b\u578b\u58f0…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[],"tags":[],"_links":{"self":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts\/88884"}],"collection":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=88884"}],"version-history":[{"count":0,"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts\/88884\/revisions"}],"wp:attachment":[{"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=88884"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=88884"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=88884"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}