TypeScript 4.1 新特性之字符串模板类型
据说TypeScript 4.1 快要发布了,作为前端的你还学得动吗?老爷子 Anders Hejlsberg 将在4.1版本中加入了一项重大更新,那就是对「字符串模板类型」 的支持。不知道大家有什么感想,反正我看到这个更新是特别兴奋,曾几何时,只要一遇到字符串拼接相关的类型,TypeScript 就束手无策了,比如:
Vuex 中加了 namespace 以后,dispatch 一个 mutation type 会带上前缀 dispatch('cart/add')。
lodash 的 get 方法,可以对一个对象进行 get(obj, 'a.b.c') 这样的读取。
现在 4.1 加入的这个新功能让这一切都拥有了可能。
新增关键字
为了这个功能,老爷子在 TS 中新增了 uppercase, lowercase, capitalize, uncapitalize 这些关键字,用于对模板粒度字符串变量进行处理。
type Cases<T extends string> = `${uppercase T} ${lowercase T} ${capitalize T} ${uncapitalize T}`;
type T11 = Cases<'bar'>; // 'BAR bar Bar bar'
其实很简单,就是提供了几个处理方法:大写、小写,首字母大写,首字母小写。
配合 infer
特别强大的一点是,模板字符串可以通过 infer 关键字,实现类似于正则匹配提取的功能:
type MatchPair<S extends string> = S extends `[${infer A},${infer B}]` ? [A, B] : unknown;
type T20 = MatchPair<'[1,2]'>; // ['1', '2']
type T21 = MatchPair<'[foo,bar]'>; // ['foo', 'bar']
实战运用 实现 Vuex namespace 推断:
type VuexOptions<M, N> = {
namespace?: N,
mutations: M,
}
type Action<M, N> = N extends string ? `${N}/${keyof M & string}` : keyof M
type Store<M, N> = {
dispatch(action: Action<M, N>): void
}
declare function Vuex<M, N>(options: VuexOptions<M, N>): Store<M, N>
const store = Vuex({
namespace: "cart" as const,
mutations: {
add() { },
remove() { }
}
})
store.dispatch("cart/add")
store.dispatch("cart/remove")
实现 lodash get 函数:
type PropType<T, Path extends string> =
string extends Path ? unknown :
Path extends keyof T ? T[Path] :
Path extends `${infer K}.${infer R}` ? K extends keyof T ? PropType<T[K], R> : unknown :
unknown;
declare function get<T, P extends string>(obj: T, path: P): PropType<T, P>;
const obj = { a: { b: {c: 42, d: 'hello' }}};
const value = get(obj, "a.b.c")