typescript 很大程度上提升了项目的可维护性和程序员的开发体验，关于 ts的各种骚操作也层出不穷，例如 TypeScript 类型体操天花板，用类型运算写一个 Lisp 解释器、用 TypeScript 类型运算实现一个中国象棋程序，ts的知识量还是很大的，本文仅立足于实际开发场景，根据本人日常开发经验，介绍一些广大一线搬砖工们能够用得上、看得懂的简单技巧，可看做是typescript在实际项目中的运用续篇

is

刚学 ts的时候，我是不理解 is有啥用的，直到我遇到了一个问题

function fn(v: number) {
  return [1, 2, v > 10 ? 10 : undefined, 3].filter(v => typeof v === 'number')
}

对于上述函数 fn，我可以很确定其返回值类型是 number[]，但 ts自动推导却是 (number | undefined)[]，这显然不对，函数已经把 undefined 过滤掉了，固然可以通过 as number[] 这种手段来强制返回一个 number[]，但用强总感觉不是那个味，然后我搜了下，发现 is可以解决这个问题

function fn(v: number) {
  return [1, 2, v > 10 ? v : undefined, 3].filter((v): v is number => typeof v === 'number')
}

还有一种实际开发中经常遇到的场景也能用到 is

function fn(flag: boolean, v: TA | TB) {
  return flag ? v.a : v.b
}

函数的参数是一个联合类型，我明确知道 flag 是 true 的话，那么 v必然是 TA类型，否则就是 TB类型，但是 ts不知道啊，可以用 as TA的方式让 ts乖乖接受，但最好是用 is

const isA = (f: boolean, v: TA | TB): v is TA => f

function fn(flag: boolean, v: TA | TB) {
  return isA(flag, v) ? v.a : v.b
}

_

vue3的 setup方法，有两个参数，第一个是 props，第二个参数是一个对象，里面有 emit等方法，有些组件只用到 emit 向外传递事件，props仅用于渲染UI，那么可能会有如下代码

export default defineComponent({
  setup(props, { emit }) {
    emit('change')
  }
})

setup这个方法里没有使用到 props，但为了使用第二个参数的 emit，所以不得不把 props也声明出来，那么你声明了却没有使用，ts会给你报一个 warn