6. 查找类型
interface Person { addr: { city: string, street: string, num: number, } }
当需要使用 addr 的类型时，除了把类型提出来
interface Address { city: string, street: string, num: number, } interface Person { addr: Address, }
还可以
Person["addr"] // This is Address. 比如： const addr: Person["addr"] = { city: 'string', street: 'string', num: 2 }
有些场合后者会让代码更整洁、易读。
7. 查找类型 + 泛型 + keyof
泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。
interface API { '/user': { name: string }, '/menu': { foods: string[] } } const get = <URL extends keyof API>(url: URL): Promise<API[URL]> => { return fetch(url).then(res => res.json()); } get(''); get('/menu').then(user => user.foods);
8. 类型断言
Vue 组件里面经常会用到 ref 来获取子组件的属性或者方法，但是往往都推断不出来有啥属性与方法，还会报错。
子组件：
<script lang="ts"> import { Options, Vue } from "vue-class-component"; @Options({ props: { msg: String, }, }) export default class HelloWorld extends Vue { msg!: string; } </script>
父组件：
<template> <div class="home"> <HelloWorld ref="helloRef" msg="Welcome to Your Vue.js + TypeScript App" /> </div> </template> <script lang="ts"> import { Options, Vue } from "vue-class-component"; import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src @Options({ components: { HelloWorld, }, }) export default class Home extends Vue { print() { const helloRef = this.$refs.helloRef; console.log("helloRef.msg: ", helloRef.msg); } mounted() { this.print(); } } </script>
因为 this.$refs.helloRef 是未知的类型，会报错误提示：
做个类型断言即可：
print() { // const helloRef = this.$refs.helloRef; const helloRef = this.$refs.helloRef as any; console.log("helloRef.msg: ", helloRef.msg); // helloRef.msg: Welcome to Your Vue.js + TypeScript App }
但是类型断言为 any 时是不好的，如果知道具体的类型，写具体的类型才好，不然引入 TypeScript 冒似没什么意义了。
9. 显式泛型
$('button') 是个 DOM 元素选择器，可是返回值的类型是运行时才能确定的，除了返回 any ，还可以
function $<T extends HTMLElement>(id: string): T { return (document.getElementById(id)) as T; } // 不确定 input 的类型 // const input = $('input'); // Tell me what element it is. const input = $<HTMLInputElement>('input'); console.log('input.value: ', input.value);
函数泛型不一定非得自动推导出类型，有时候显式指定类型就好。
10. DeepReadonly
被 readonly 标记的属性只能在声明时或类的构造函数中赋值。
之后将不可改（即只读属性），否则会抛出 TS2540 错误。
与 ES6 中的 const 很相似，但 readonly 只能用在类（TS 里也可以是接口）中的属性上，相当于一个只有 getter 没有 setter 的属性的语法糖。
下面实现一个深度声明 readonly 的类型：
type DeepReadonly<T> = { readonly [P in keyof T]: DeepReadonly<T[P]>; } const a = { foo: { bar: 22 } } const b = a as DeepReadonly<typeof a> b.foo.bar = 33 // Cannot assign to 'bar' because it is a read-only property.ts(2540)
