[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"categories":3,"article-17":51,"comments-17":110},[4,10,16,22,28,34,40,46],{"_id":5,"id":6,"created_at":7,"updated_at":7,"name":8,"description":8,"cover":9},"6a294c7a9fbda20eb7c62dd5",1,"2022-12-08T13:59:08.000Z","域.业务领域","\u002Fblog\u002Flighthouse.jpeg",{"_id":11,"id":12,"created_at":13,"updated_at":14,"name":15,"description":15,"cover":9},"6a294c7a9fbda20eb7c62dd6",2,"2022-12-08T13:59:56.000Z","2022-12-08T14:02:20.000Z","术.解决方案",{"_id":17,"id":18,"created_at":19,"updated_at":20,"name":21,"description":21,"cover":9},"6a294c7a9fbda20eb7c62dd7",3,"2022-12-08T14:00:22.000Z","2022-12-08T14:02:17.000Z","技.技术研究",{"_id":23,"id":24,"created_at":25,"updated_at":26,"name":27,"description":27,"cover":9},"6a294c7a9fbda20eb7c62dd8",4,"2022-12-08T14:00:33.000Z","2022-12-08T14:02:14.000Z","阵.技术应用",{"_id":29,"id":30,"created_at":31,"updated_at":32,"name":33,"description":33,"cover":9},"6a294c7a9fbda20eb7c62dd9",5,"2022-12-08T14:01:04.000Z","2022-12-08T14:02:12.000Z","法.手段方法 ",{"_id":35,"id":36,"created_at":37,"updated_at":38,"name":39,"description":39,"cover":9},"6a294c7a9fbda20eb7c62dda",6,"2022-12-08T14:01:15.000Z","2022-12-08T14:02:09.000Z","理.理论学习",{"_id":41,"id":42,"created_at":43,"updated_at":44,"name":45,"description":45,"cover":9},"6a294c7a9fbda20eb7c62ddb",7,"2022-12-08T14:01:24.000Z","2022-12-08T14:02:06.000Z","器.工具使用",{"_id":47,"id":48,"created_at":49,"updated_at":49,"name":50,"description":50,"cover":9},"6a294c7a9fbda20eb7c62ddc",8,"2022-12-08T14:01:53.000Z","杂.杂七杂八",{"_id":52,"id":53,"created_at":54,"updated_at":55,"title":56,"content":57,"description":58,"cover":59,"created_date":60,"category_id":18,"tag_ids":61,"author_ids":62,"public":6,"status":6,"star":6,"like":63,"views":64,"category":65,"tags":66,"authors":79,"related":86},"6a294c7a9fbda20eb7c62e11",17,"2022-12-25T12:23:51.000Z","2026-06-13T09:51:57.976Z","Typescript 快速入门","## Typescript\n\n#### 什么是 Typescript\n> Typescript 是 Javascript 的超集。\n\nTypescript 为 Javascript 增加类型能力，避免 JS 弱类型下产生的各种有意无意的问题\n\n\n#### 为什么使用 Typescript\n* 降低代码出错的风险\n* 提高了代码的可读性\n* 代码自动补全\n\n#### 缺点\n增加学习成本\n\n#### 基础类型\n```ts\nlet isDone: boolean = false\n\nlet age: number = 20\nlet binaryNumber: number = 0b1111\n\nlet firstName: string = 'viking'\nlet message: string = `Hello, ${firstName}, age is ${age}`\n\n\u002F\u002F undefined null 是任何类型的子类型\nlet u: undefined = undefined\nlet n: null = null\nlet num: number = undefined\n```\n\n#### any类型和联合类型\n```ts\nlet notSure: any\nnotSure = 'maybe it is a string'\nnotSure = true\nnotSure.myName\nnotSure.getName()\n\nlet numberOrString: number | string = 234\nnumberOrstring = 'abc'\n```\n\n#### Array 和 Tuple(元祖)\n```ts\nlet arrOfNumbers: number[] = [1, 2, 3, 4]\narrOfNumbers.push(5)\n\nfunction test() {\n  console.log(arguments)\n}\n\nlet user: [string, number] = ['viking', 1]\nuser = ['molly', 2, true]\n```\n\n#### Interface 接口\n* 对对象的形状进行描述\n* 对类进行抽象\n\n```ts\ninterface Person {\n  readonly id: number;\n  name: string;\n  age?: number;\n}\nlet viking: Person = {\n  id: 1234, \u002F\u002F 只读，不可在修改\n  name: 'viking',\n}\n```\n\n#### 函数和类型推断\n```ts\nconst add = function(x: number, y: number, z: number = 10, d?: number): number {\n  if (typeof z === 'number') {\n    return x + y + z\n  } else {\n    return x + y\n  }\n}\nconst add2: (x: number, y: number, z: number, d?: number) => number = add\nadd2(2, 3, 5)\n```\n\n#### 枚举（Enum）\n```ts\nenum Direction {\n  Up = 'UP',\n  Down = 'DOWN',\n  Left = 'Left',\n  Right = 'RIGHT',\n}\nconst value = 'UP'\nif (value === Direction.Up) {\n  console.log('go up!')\n}\n\n\u002F\u002F 常量枚举\nconst enum Direction {\n  Up = 'UP',\n  Down = 'DOWN',\n  Left = 'Left',\n  Right = 'RIGHT',\n}\n```\n\n#### 泛型\n```ts\nfunction echo\u003CT>(arg: T): T {\n  return arg\n}\nconst result = echo('str')\n\nfunction swap\u003CT, U>(tuple: [T, U]): [U, T] {\n  return [tuple[1], tuple[0]]\n}\nconst result2 = swap(['string', 123])\n\nfunction echoWithArr\u003CT>(arg: T[]): T[] {\n  console.log(arg.length)\n  return arg\n}\nconst arrs = echoWithArr([1, 2, 3])\n\ninterface IWithLength {\n  length: number\n}\nfunction echoWithLength\u003CT extends IWithLength>(arg: T): T {\n  console.log(arg.length)\n  return arg\n}\nconst str = echoWithLength('str')\nconst obj = echoWithLength({ length: 10, width: 10 })\nconst arr2 = echoWithLength([1, 2, 3])\n```\n\n#### 泛型（类和接口）\n```ts\nclass Queue\u003CT> {\n  private data = [];\n  push(item: T) {\n    return this.data.push(item)\n  }\n  pop(): T {\n    return this.data.shift()\n  }\n}\nconst queue = new Queue\u003Cnumber>()\nqueue.push(1)\nconsole.log(queue.pop().toFixed())\nconsole.log(queue.pop().toFixed())\n\nconst queue2 = new Queue\u003Cstring>()\nqueue2.push('str')\nconsole.log(queue2.pop().length)\n\n\ninterface KeyPair\u003CT, U> {\n  key: T;\n  value: U;\n}\nlet kp1: KeyPair\u003Cnumber, string> = { key: 123, value: 'str' }\nlet kp2: keyPair\u003Cstring, number> = { key: 'test', value: 123 }\n\nlet arr: number[] = [1, 2, 3]\nlet arrTwo: Array\u003Cnumber> = [1, 2, 3]\n\n\ninterface IPlus\u003CT> {\n  (a: T, b: T) : T\n}\nfunction plus(a: number, b: number): number {\n  return a + b;\n}\nfunction connect(a: string, b: string): string {\n  return a + b\n}\nconst a: IPlus\u003Cnumber> = plus\nconst b: IPlus\u003Cstring> = connect\n```\n\n#### 类型别名\n```ts\ntype PlusType = (x: number, y: number) => number\nfunction sum(x: number, y: number): number {\n  return x + y\n}\nconst sum2: PlusType = sum\n\ntype NameResolver = () => string\ntype NameOrResolver = string | NameResolver\nfunction getName(n: NameOrResolver): string {\n  if (typeof n === 'string') {\n    return n\n  } else {\n    return n()\n  }\n}\n```\n\n#### 类型断言\n```ts\n\u002F\u002F 第一种\nfunction getLength(input: string | number) : number {\n  const str = input as String\n  if (str.length) {\n    return str.length\n  } else {\n    const number = input as Number\n    return number.toString().length\n  }\n}\n\u002F\u002F 第二种\nfunction getLength(input: string | number) : number {\n  if((\u003Cstring>input)) {\n    return (\u003Cstring>input).length\n  } else {\n    return input.toString().length\n  }\n}\n```\n\n#### 声明文件\n> https:\u002F\u002Ftypescriptlang.org\u002Fdt\u002Fsearch\n\n```ts\n\u002F\u002F axios.d.ts\n\u002F\u002F 它里面没有任何的实际代码，只有类型声明\n\u002F\u002F 只有类型 - 比如 interface, function 或者 class 等等\n\ninterface IAxios {\n  (url: string, method: string) : string;\n  get: (url: string) => string;\n  post: (url: string, data: any) => string;\n}\ndeclare const axios: IAxios\n\nexport default axios\n```\n\n#### 内置类型\n```ts\ninterface IPerson {\n  name: string\n  age: number\n}\nlet viking: IPerson = { name: 'viking', age: 20 }\n\u002F\u002F Partial 把接口内所有参数变为可选\ntype IPartial = Partial\u003CIPerson>\nlet viking2: IPartial = { name: 'viking' }\n\u002F\u002F Omit 忽略接口内某个参数\ntype IOmit = Omit\u003CIPerson, 'name'>\nlet viking3: IOmit = { age: 20 }\n```\n\n#### 配置文件(tsconfig.json)\n```json\n{\n  \"files\": [\"test.ts\", \"test.d.ts\"],\n  \"compilerOptions\": {\n    \"outDir\": \".\u002Foutput\",\n    \"module\": \"ESNext\",\n    \"target\": \"ES5\",\n    \"declaration\": true\n  }\n}\n```","Typescript 快速食用指南","\u002FFiLpf0uKN-F6iOMF7W7Ffs2mZtfk","2019-12-27T14:04:00.000Z",[6,12,42],[6],0,104,{"_id":17,"id":18,"created_at":19,"updated_at":20,"name":21,"description":21,"cover":9},[67,71,75],{"_id":68,"id":6,"created_at":69,"updated_at":69,"name":70},"6a294c7a9fbda20eb7c62de1","2022-12-08T14:04:04.000Z","工具方法",{"_id":72,"id":12,"created_at":73,"updated_at":73,"name":74},"6a294c7a9fbda20eb7c62de2","2022-12-08T14:04:09.000Z","工具收录",{"_id":76,"id":42,"created_at":77,"updated_at":77,"name":78},"6a294c7a9fbda20eb7c62de7","2022-12-08T14:05:07.000Z","学习记录",[80],{"name":81,"avatar":82,"email":83,"description":84,"role":85,"id":6},"Gavin","\u002Fblog\u002FWechatIMG133.jpeg","zzlwte@gmail.com","写代码的,也撸铁。白天搬 JavaScript 砖,晚上举铁,偶尔在这里写写技术沉淀和生活随想。",32,[87,91,95,99,103,107],{"id":6,"title":88,"cover":89,"created_date":90},"Docker","\u002Fblog\u002Fimg\u002F%E6%88%AA%E5%B1%8F2020-03-08%E4%B8%8B%E5%8D%889.34.21.png","2022-12-08T22:19:02.000Z",{"id":30,"title":92,"cover":93,"created_date":94},"记录 oh-my-zsh 问题","","2021-06-30T16:00:00.000Z",{"id":96,"title":97,"cover":93,"created_date":98},10,"vim 窗口管理","2020-12-14T16:00:00.000Z",{"id":100,"title":101,"cover":93,"created_date":102},11,"Vim 问题集合","2020-10-20T00:00:00.000Z",{"id":104,"title":105,"cover":93,"created_date":106},9,"Vim 前端插件整理","2020-10-13T00:00:00.000Z",{"id":24,"title":108,"cover":93,"created_date":109},"Mac 下安装 HomeBrew","2019-10-13T16:00:00.000Z",[]]