近期遇上一道很不错的 TS 面试问题，分享一下。
这题有 3 个层级，大家一层层来说。
第一层要求是这种：
实现一个 zip 函数公式，对两个数组元素按序两组合拼，例如键入 [1,2,3], [4,5,6] 时，回到 [[1,4], [2,5],[3,6]]
这一层便是每一次各从两个数组取一个元素，合拼以后放进二维数组里，然后又解决下一个，递归算法开展这一步骤，直至二维数组为空就可以。
function zip(target, source) {
if (!target.length || !source.length) return [];
const [one, ...rest1] = target;
const [other, ...rest2] = source;
return [[one, other], ...zip(rest1, rest2)];
}结论是正确的：
第一层还是很简单的，随后再来看第二层规定：
给 zip 函数定义 ts 种类（二种书写）
函数的概念有两种方式：
先通过 function 声明函数：
function func() {}和申明匿名函数随后取值给自变量：
const func = () => {}而参数和传参的种类全是二维数组，仅仅实际种类不清楚，能写 unknown[]。
因此二种函数类型的概念就是这个样子：
也是直接 function 声明函数种类和 interface 声明函数种类随后加进变量类型上二种。
由于实际元素类型不清楚，但是用 unknown。
这儿可能会说 any 和 unknown 的差别：
any 和 unknown 都能够接受一切种类：
可是 any 还可以取值给一切种类，但 unknown 不好。
这儿就是用来接受多种类型， 因此 unknown 比any 比较合适一些，安全系数高。
这一层也是非常基本的 ts 词法，第三层就上了难度系数了：
用种类编程实现精准的种类提醒，例如主要参数传到 [1,2,3], [4,5,6]，那传参的种类要提醒出 [[1,4], [2,5],[3,6]]
这儿规定返回值类型是精准的，我们就应该依据参数种类来动态生成返回值类型。
大概就是这样：
申明2个类型参数 Target、Source，管束为 unknown[]，其实就是元素类型任意的数组类型。
这两个类型参数各是传到的两大参数种类。
传参根据 Zip 测算得到。
随后想要实现 Zip 最高级的种类：
传到的类型参数各是2个数组类型，大家同样需要从这当中提取出每一个原素合拼到一起。
获取原素能用匹配算法的形式：
并且这个种类就要这样界定：
type Zip<One extends unknown[], Other extends unknown[]> =
One extends [infer OneFirst,...infer Rest1]
? Other extends [infer OtherFirst, ...infer Rest2]
? [[OneFirst, OtherFirst], ...Zip<Rest1, Rest2>]
: []
: [];各自获取两个数组的第一个元素，结构成全新二维数组。再对剩下来的二维数组递归算法开展这种解决，直至二维数组为空。
那样就实现了我们想要的高端种类：
但是你把它当作传参加进函数公式上面出错：
由于声明函数的时候都会不清楚主要参数是什么，当然测算出不来 Zip<Target, Source> 数值，所以在这里会类型不匹配：
那怎么办？
能用函数重载处理：
ts 适用函数重载，能写好几个同名函数的种类的定义方法，最终写函数的完成，那样使用这些函数公式的时候就会依据参数种类来匹配函数类型。
大家使用了种类程序编写那个函数公式用这种方式写下不容易出错了。
我们使用下看一下：
咋传参的种类错误呢？
实际上此刻相匹配的函数类型是正确的，只不过是推导出的并不是字面量种类。
此刻能够加一个 as const。
可是再加上 as const 会推导出 readonly [1,2,3]
那样种类就不一致了，因此需在类型参数的声明上都再加上 readonly:
不过这样 Zip 函数的种类又不一致了。
难道说要将全部使用这种种类的地方就再加上 readonly 么？
无需，大家 readonly 的装饰除掉不就好了？
Typescript 有内置的高端种类 readonly：
能把检索种类的每一个检索都再加上 readonly 装饰：
但没有提供除掉 readonly 修饰的高端种类，大家能自己完成一下：
用投射类别的词法结构个检索种类，再加上个 -readonly 便是除掉 readonly 修饰的含意。
许多学生很有可能问完，数组类型都是检索种类么？
是，检索类型是汇聚好几个元素种类，因此目标、二维数组、class 全是。
因此我们把它用于二维数组上当然也可以的：
（准确的说叫数组，数组是元素个数固定二维数组）
那么我们只需要在传到 Zip 以前，用 Mutable 除掉 readonly 就行了：
再去试一下：
做好了！如今传参的种类准没错。
但还有一个情况，假如不是直接传到字面量，是推论出不来字面量类别的，此刻好像就不对了：
可我们不都是申明轻载种类了么？
假如推论出不来字面量种类，应当配对这个呀：
可事实上它相匹配的或是第一个：
此刻只要我们替换下2个函数类型顺序就行了：
这时候字面量参数状况仍然更是对的：
怎么回事？
由于重载函数的类型是从上向下先后配对，只需获取到一个就运用。
非字面量的现象，类型是 number[]，能配对 unknown[] 那个种类，因此那一个函数类型起效了。
而字面量的现象，推导出是指 readonly [1,2,3]，含有 readonly 因此不一致 unknown[]，再往下配对，就获取到了含有类型参数那个函数类型。
那样这两种情况就全运用了适宜的函数类型。
所有编码是这样子的：
type Zip<One extends unknown[], Other extends unknown[]> = One extends [
infer OneFirst,
...infer Rest1
]
? Other extends [infer OtherFirst, ...infer Rest2]
? [[OneFirst, OtherFirst], ...Zip<Rest1, Rest2>]
: []
: [];
type Mutable<Obj> = {
-readonly [Key in keyof Obj]: Obj[Key];
};
function zip(target: unknown[], source: unknown[]): unknown[];
function zip<Target extends readonly unknown[], Source extends readonly unknown[]>(
target: Target,
source: Source
): Zip<Mutable<Target>, Mutable<Source>>;
function zip(target: unknown[], source: unknown[]) {
if (!target.length || !source.length) return [];
const [one, ...rest1] = target;
const [other, ...rest2] = source;
return [[one, other], ...zip(rest1, rest2)];
}
const result = zip([1, 2, 3] as const, [4, 5, 6] as const);
const arr1 = [1, 2, 3];
const arr2 = [4, '5', 6];
const result2 = zip(arr1, arr2);ts playground 详细地址
汇总
今日我们做了一道综合性的 ts 面试问题，一共有三层：
第一层完成 js 的思路，用递归算法或是循环系统都可以做到。
第二层给函数公式再加上种类，用 function 申明种类和 interface 声明函数种类两种形式，参数和传参全是 unknown[]。
第三层要用种类编程实现精确的种类提醒，这一层必须取得参数种类，根据获取元素种类并结构出新数组类型回到。还要通过函数重载的方式去申明种类，而且需要注意轻载种类的声明次序。
as const 可以让字面量推导出字面量种类，却会含有 readonly 装饰，能够自己写投射种类来除掉这一装饰。
这其实是学习 ts 顺序，大家需先可以把 js 逻辑性表达出来，随后知道如何给函数公式、class 等加 ts 种类，以后学习类型程序编写，知道如何动态生成种类。
在其中种类编程是 ts 最艰难的一部分，都是最厉害的一部分。攻破了那一层，ts 就能说学得差不多了。
【相关信息：javascript学习教程
以上就是关于共享一道很不错的TS面试问题（含3层），看一下能答到第几层！的具体内容，大量欢迎关注AdminJS其他类似文章！