【面试题】 3 个加强理解TypeScript 的面试问题_typescript 面试代码解析

运行时验证

假设候选人成功回答了第一个问题，这意味着大概率候选人对基础有了很好的理解。现在，需要变得更复杂一点，变得非常实际：假设有一个 API，它返回给我们一个 JSON 字符串，其中包含有关用户的信息。

问题是：如何验证用户对象，并确保它确实满足 User 类型？

type User = {
  name: string;
  age: number;
};

const data = `{"name":"Bob","age":30}`;
const user: User = JSON.parse(data);

console.log(`Username: ${user.name.toLowerCase()}`);
console.log(`Age: ${user.age.toFixed(0)}`);复制代码

答案基本上有两种方式：

首先，如果 User 类型很小，比如现在只有两个字段，这对我们来说没问题，那么我们可以编写一个简单的验证函数：

function isUser(obj: unknown): obj is User {
  return (
    typeof obj['name'] === 'string' && 
    typeof obj['age'] === 'number'
  );
}
复制代码

并像这样使用它：

const data = `{"name":"Bob","age":30}`;
const user = JSON.parse(data); // user type if any here

if (isUser(user)) {
    console.log(`Username: ${user.name.toLowerCase()}`);
    console.log(`Age: ${user.age.toFixed(0)}`);
}
复制代码

第二种变体，它更方便——使用你喜欢的任何库来使用模式验证：class-validator、zod、runtypes、joi 等：

import Joi from "joi";

const UserSchema = Joi.object({
    name: Joi.string(),
    age: Joi.number(),
});

const data = `{"name":"Bob","age":30}`;
const userData = JSON.parse(data);

try {
    const user = UserSchema.validate(userData);

    console.log(`Username: ${user.name.toLowerCase()}`);
    console.log(`Age: ${user.age.toFixed(0)}`);
} catch (e) {}
复制代码

这个问题不仅要检查有关数据验证的知识，还要检查候选人对技术堆栈的了解程度，可以通过哪些方式完成等。

在类型中使用递归

最后一个问题通常是实用的，它是关于如何编写递归类型的。在此示例中，需要问题的解决方案：假设正在编写一个函数 find() 来搜索数据库中的用户。问题是该类型 User 具有地址等属性，它也是一个对象。想以 find() 这种方式构建函数，这样可以通过 User 的嵌套属性进行搜索，并提供完整的类型支持：

functionfind<T>(criteria: ...): T[] {
    ...
}

type User = {
    id: number;
    name: string;
    address: {
        country: string;
        city: string;
        house: string;
        zipcode: string;
    };
};

// in this example im searching by country only, even if // address has other properties.constusers = find({
    address: { coutry: 'CN' }
});
复制代码

如何实现：创建另一个名为 DeepPartial 的类型，并在 find() 函数中使用它作为条件参数：

type DeepPartial<T> = {
    [P in keyof T]?: DeepPartial<T[P]>;
};

function find<T>(criteria: DeepPartial<T>): T[] {
    ...
}

type User = {
    id: number;
    name: string;
    address: {
        country: string;


#### css

1，盒模型
2，如何实现一个最大的正方形
3，一行水平居中，多行居左
4，水平垂直居中
5，两栏布局，左边固定，右边自适应，左右不重叠
6，如何实现左右等高布局
7，画三角形
8，link @import导入css
9，BFC理解


![](https://img-blog.csdnimg.cn/img_convert/1c65493ef49ec396f0bda2d1f3ad3c3b.webp?x-oss-process=image/format,png)

#### js

1，判断 js 类型的方式
2，ES5 和 ES6 分别几种方式声明变量
3，闭包的概念？优缺点？
4，浅拷贝和深拷贝
5，数组去重的方法
6，DOM 事件有哪些阶段？谈谈对事件代理的理解
7，js 执行机制、事件循环
8，介绍下 promise.all
9，async 和 await,
10，ES6 的 class 和构造函数的区别
11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？


![](https://img-blog.csdnimg.cn/img_convert/0dfe2e25dc011108eb95aed2caf9bd5b.webp?x-oss-process=image/format,png)

transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？


[外链图片转存中...(img-XD5qG3Us-1720114672063)]