1. 巧用 typeof
一般我们情况下，我们都是先写类型接口，再去使用。
interface initA {
inita: number,
}
const initA: initA = { inita: 123 }
如何巧用 typeof,如下。typeof 可以自动识别类型，如果只有一个属性，可以减少代码量。也可以通过 typeof 去进行一些校验判断。
const initA = {
inita: 123,
initb: 'aaa'
}
type initA = typeof initA;
if (typeof initA.inita === 'number') {
console.log('inita 是一个number')
}
控制台输出的值为：
问题：TypeScript 是静态类型，所以在进行项目联调的时候，无法在运行时检验后端返回的值是否正确。
思路：当拿到后端值，进行 typeof 的检验看是否与我们约定好的值是否匹配。匹配才进行后续的 setState 的操作。如果，后端返回的值为复杂类型（对象数组，对象+字符串等）则可以考虑是否封装一组循环遍历值，进行比较。type resultConst = { id: number, name: string, } const result: resultConst = await Request({ url: '/getopportunityconst' }); // 请求获得的值 console.log(typeof result.id === 'number'); // 返回true
2. 巧用联合类型
如何写一个，Color 要么是 red 颜色，要么是 yellow 颜色。
不推荐 -->
interface Color {
red?: string,
yellow?: string,
}
推荐 -->
type Color = { red: string, } | { yellow: string, }
原因：interface Color 可以理解为在 Color 中既有 red 也有 yellow 两个非必须存在的属性。而 type Color 才是如题意。
3. 巧用查找类型
Person 为如下：
interface Person {
addr: {
city: string,
street: string,
num: number,
}
}
** 此时需要 addr 的类型时，你有什么写法？**
interface Address {
city: string,
street: string,
num: number,
}
interface Person {
addr: Address
}
但是这样把 Address 单独拎出来赋值，可行但是代码并不是最简洁的。
// Person["addr"] // This is Address.
interface Person1 {
addr1: Person["addr"],
}
有些场景如果后者会让代码更整洁、易读。
4. 巧用 keyof
官网解释，什么是 keyof。
interface Itest {
name: string,
age: number,
address: string,
}
type ant = keyof Itest;
查看 ant 会出来什么？type ant = "name" | "age" | "address"
keyof 与 Object.keys 略有相似，只不过 keyof 取 interface 的键。
假设有一个 object 如下所示，我们需要使用 typescript 实现一个 get 函数来获取它的属性值
const data = {
a: 3,
hello: 'world'
}
function get(o: object, name: string) {
return o[name]
}
如上这么写会有什么缺点呢？（这也是很多小伙伴问，ts 的优点是什么）
1、函数无法确认返回类型: ts 最大的优点是类型校验。
2、无法对 key 做约束： 可能会犯拼写的错误。
我们使用 keyof 来增强一下 get 函数的类型功能
function get<T extends object, K extends keyof T>(o: T, name: K): T[K] {
console.log(o[name]) // 3
return o[name]
}
get(data, 'a')
更升级版，突然让我想到 form表单传值是否也可以借鉴此方法
function get<T extends object, K extends keyof T>(o: T, name: K[]): T[K][] {
console.log(name.map(item => o[item])); // [3, "world"]
return name.map(item => o[item]);
}
get(data, [ 'a', 'hello'])
刚刚以上说的无法确认返回类型，很容易理解。那无法对 key 进行约束，让我们来看一下会出现怎样的情况。
更多 keyof 小技巧用法，官网给得很详细
https://www.tslang.cn/docs/handbook/advanced-types.html
5. for...in 和 for...of
迭代器和生成器并没有那么难理解
let list = ['hello', 'Danile', '1226'];
// for...in 输出的是key值
for (let i in list) {
console.log(i); // '0', '1', '2'
}
// for...of 输出的是value值
for (let i of list) {
console.log(i); // 'hello', 'Danile', '1226'
}
此 for...of 编译为 js 的代码如下
var list = ['hello', 'Danile', '1226'];
for (var i in list) {
console.log(i);
}
for (var _i = 0, list_1 = list; _i < list_1.length; _i++) {
var i = list_1[_i];
console.log(i);
}
