[{"data":1,"prerenderedAt":164},["ShallowReactive",2],{"content:\u002Fposts\u002F2024\u002Fts-as":3,"surround:\u002Fposts\u002F2024\u002Fts-as":153},{"id":4,"title":5,"body":6,"canonical":133,"categories":134,"date":136,"description":133,"draft":137,"extension":138,"image":139,"meta":140,"navigation":141,"path":142,"permalink":133,"readingTime":143,"recommend":133,"references":133,"seo":148,"sitemap":149,"stem":150,"tags":151,"type":133,"updated":136,"__hash__":152},"content\u002Fposts\u002F2024\u002Fts-as.md","TypeScript 断言",{"type":7,"value":8,"toc":126},"minimark",[9,18,29,34,40,43,49,52,58,64,67,73,76,82,89,95,98,104,107,113,117,120],[10,11,12,13,17],"p",{},"断言就是",[14,15,16],"strong",{},"我说了算","。",[19,20,26],"pre",{"className":21,"code":23,"language":24,"meta":25},[22],"language-ts","\u002F\u002F 这里的element 默认类型是HTMLElement | null ，这里我们可以直接说明这个element一定存在并且为一个div标签\nconst element = document.getElementById(\"el\") as HTMLDivElement\n","ts","",[27,28,23],"code",{"__ignoreMap":25},[30,31,33],"h2",{"id":32},"as-const-断言","as const 断言",[19,35,38],{"className":36,"code":37,"language":24,"meta":25},[22],"let a: string = \"whbbit\"\na = \"weilog.me\"\n\nconst b = \"whbbit\" \u002F\u002F 按照js语法，b的值不能被改变\n\nconst c = \"whbbit\" as const \u002F\u002F c的值可以改变，但是只能改变为'whbbit'\n\u002F\u002F 写法等同于 let c: 'whbbit' = 'whbbit'\n",[27,39,37],{"__ignoreMap":25},[10,41,42],{},"数组使用 as const 时，相当于声明一个元组。",[19,44,47],{"className":45,"code":46,"language":24,"meta":25},[22],"const arr = [\"whbbit\", 25] as const\n\u002F\u002F 等同于 const arr: ['whbbit', 25] = [\"whbbit\", 25]\n\nconst a: string = \"whbbit\"\nconst b: number = 25\nconst arr1 = [a, b] as const\n\u002F\u002F 等同于 const arr: [string, number] = [a, b]\n",[27,48,46],{"__ignoreMap":25},[10,50,51],{},"对象使用 as const 时",[19,53,56],{"className":54,"code":55,"language":24,"meta":25},[22],"const age: number = 20\nconst c = true as const\nconst obj = {\n    name: \"whbbit\",\n    age,\n    c,\n} as const\n\u002F\u002F 类型为 {readonly name: 'whbbit', readonly age: number, readonly c: true}\n",[27,57,55],{"__ignoreMap":25},[59,60,61],"blockquote",{},[10,62,63],{},"数组或对象使用 as const 时，如果内容是引入别处的变量时，就使用该变量的类型，如果是常量时，就使用该常量的值",[10,65,66],{},"as const 在解构中使用的便利性",[19,68,71],{"className":69,"code":70,"language":24,"meta":25},[22],"function func() {\n    const a = \"whbbit\"\n    const b = 25\n    return { a, b } as const\n}\nconst { a, b } = func()\n\u002F\u002F 这时ts可以准确的推断a的类型是string，b的类型是number。\n\u002F\u002F 不使用as const 时，a和b的类型都是 string | number\nconsole.log(a, b)\n",[27,72,70],{"__ignoreMap":25},[30,74,75],{"id":75},"非空断言",[19,77,80],{"className":78,"code":79,"language":24,"meta":25},[22],"const el = document.querySelector(\"#app\")\n\u002F\u002F 类型为 HTMLElement | null\n",[27,81,79],{"__ignoreMap":25},[10,83,84,85,88],{},"当我们知道 id = app 的元素是一个 div 元素时，我们想让其类型明确为",[27,86,87],{"code":87},"HTMLDivElement"," 以获得更好的类型提示",[19,90,93],{"className":91,"code":92,"language":24,"meta":25},[22],"const el: HTMLDivElement = document.querySelector(\"#app\")\n\u002F\u002F 这时会报错 Type 'HTMLDivElement | null' is not assignable to type 'HTMLDivElement'. Type 'null' is not assignable to type 'HTMLDivElement'.\n",[27,94,92],{"__ignoreMap":25},[10,96,97],{},"当我们清楚的知道这个元素一定不为空时，就可以使用非空断言",[19,99,102],{"className":100,"code":101,"language":24,"meta":25},[22],"const el: HTMLDivElement = document.querySelector(\"#app\")!\n",[27,103,101],{"__ignoreMap":25},[10,105,106],{},"或者我们也可以直接为其断言",[19,108,111],{"className":109,"code":110,"language":24,"meta":25},[22],"const el = document.querySelector(\"#app\") as HTMLDivElement\n",[27,112,110],{"__ignoreMap":25},[30,114,116],{"id":115},"dom-类型推断","DOM 类型推断",[10,118,119],{},"我们可以断言 DOM 类型， 事件类型等",[19,121,124],{"className":122,"code":123,"language":24,"meta":25},[22],"const el = document.querySelector(\"#app\") as HTMLDivElement\n\nel.addEventListener(\"click\", (e: Event) => {\n    console.log(e.target)\n})\n",[27,125,123],{"__ignoreMap":25},{"title":25,"searchDepth":127,"depth":127,"links":128},4,[129,131,132],{"id":32,"depth":130,"text":33},2,{"id":75,"depth":130,"text":75},{"id":115,"depth":130,"text":116},null,[135],"代码","2024-03-17 00:14:35",false,"md","https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002F679adb4c34f00-78.webp",{},true,"\u002Fposts\u002F2024\u002Fts-as",{"text":144,"minutes":145,"time":146,"words":147},"3 min read",2.54,152400,508,{"title":5,"description":133},{"loc":142},"posts\u002F2024\u002Fts-as",[],"7MXiJdz77M3R3204ETKBWxEOhyHBMMFeseWBg2pCoDg",[154,159],{"title":155,"path":156,"stem":157,"date":158,"type":133,"children":-1},"TypeScript 基本数据类型","\u002Fposts\u002F2024\u002Fts-basic-type","posts\u002F2024\u002Fts-basic-type","2024-03-16 23:59:14",{"title":160,"path":161,"stem":162,"date":163,"type":133,"children":-1},"TypeScript 泛型","\u002Fposts\u002F2024\u002Fts-generics","posts\u002F2024\u002Fts-generics","2024-03-17 00:18:11",1789642592410]