面试题 TypeScript 前端面试题 由浅到深

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了面试题 TypeScript 前端面试题 由浅到深相关的知识,希望对你有一定的参考价值。


【面试题】

给大家推荐一个实用面试题库

1、前端面试题库 (面试必备)            推荐:★★★★★

地址:前端面试题库

基本类型介绍

1.Boolean,Number,String

声明:类型 = 类型对应变量

let flag:boolean = true
let age: number = 21;
let name: string = "shixin";
复制代码

类型收敛——字面量类型

const flag: true = true;
const age: 21 = 21;
const name: shixin = shixin;
复制代码

2.undefined,null

在 TypeScript 中,null 与 undefined 类型都是有具体意义的类型。所以在默认情况下会被视作其他类型的子类型。

const data1: null = null;
const data2: undefined = undefined;
const data3: number = null; // Thats OK
const data4: string = null; // Thats OK
复制代码

tsconfig ​​strictNullChecks​​ 配置项,会严格校验undefined和null。在该配置开启的环境下。undefined和null将不为其他类型的子类型


"extends": "./tsconfig",
"compilerOptions":
"strictNullChecks": true


复制代码
const data5: string = null; // error
复制代码

3.联合类型

联合类型就是一个数组的可用的集合

let numOrStr :string|number = 1;
numOrStr = a
// ok
复制代码

4.Array

在 TypeScript 中有两种方式来声明一个数组类型:

根据项目规范二选一(如果没有这个规范可以随便写)

const arr1: string[] = []; // 可以向数组内添加string类型的值
const arr2: Array<string> = [];
复制代码

类型收敛——元组

场景1 基本类型元组定义

或许我们想定义一个数组来描述三家公司的名称(只有那三家,没有第四家,也不会只有两家),公司名是string,长度是3。但是我们声明string[]就是有问题的,因为他不够收敛。这个时候我们就可以使用元组了。

形式 [typeofmember1, typeofmember2,typeofmember3]

元组声明:[string,string,string]

const companyArr: [string,string,string] = [公司n1, 公司n2, 公司n3];
复制代码

场景2 字面量类型元组定义

或许我们想定义一个数组来描述三家优秀公司的名称(NIO,小鹏,理想) 元组声明:[NIO,小鹏,理想]

const companyArr1: [NIO,小鹏,理想] = [NIO,小鹏,理想];
复制代码

在这种情况下,对数组合法边界内的索引访问(即companyArr1[0],companyArr1[1],companyArr1[2])将能够安全的返回我们理想中的哪三颗韭菜。

场景3 元组类型的 Rest 使用

或许我们想定义一个数组来定义一个人前三项分别为姓名,年龄,性别,后面可以添加若干项描述。这时候我们就可以引入Rest,语法如同js一样,三个点。 元组声明:[string,number,string,...string[]]

const Person: [string, number, string, ...string[]] = [shixin, 22, 男, JV, 前端];
复制代码

但是问题来了, [string, number, string, ...string[]]未免太难理解了,我怎么知道哪一项代表了哪个信息。在TS4.0添加了​​具名元组​​。操作如下

const Person: [name:string, age:number,sex:string,...desc:string[]] = [shixin, 22, 男, JV, 前端];
复制代码

5.常用对象类型描述

对于上面的元组场景3(定义一个数组来定义一个人前三项分别为姓名,年龄,性别)毕竟不是我们的常规操作,更加常见的是我们通过定义一个对象来完成对于一个人的定义。那么如何描述一个对象呢?

内联注解

我们可以如同基本类型一样直接在声明后面添加对象的类型描述

const shixin:  name: string; age: number; sex: string; desc: string[]  = 
name: shixin,
age: 22,
sex: 男,
desc: [JV, 前端]
;
复制代码

接口 interface

或通过interface来声明一个类型变量,在变量内进行对象的类型描述

interface IPerion 
name: string;
age: number;
sex: string;
desc: string[];


const shixin: IPerion =
name: shixin,
age: 22,
sex: 男,
desc: [JV, 前端]
;
复制代码

这样声明的好处,最直接的就是可以复用,这对于我们维护和统一类型起源非常有帮助。

import  type IPerion  from xxx;

const zhang3: IPerion =
name: zhang3,
age: 20,
sex: 男,
desc: [xx, xx]
;

复制代码

object、Object 以及

Object用于描述一个对象,就是万物皆为对象的那个对象。在js中他包含了原始的功能,比如谁都有的toString。也正因为如此,这个属性其实并不好用。甚至有点像any。

let data1: Object = a; // Thats OK
let data2: Object = 1;// Thats OK
let data3: Object = () => ;// Thats OK
复制代码

为了解决上面这个不好用的Object,在(typescript2.2)[​​www.typescriptlang.org/docs/handbo…​​] 引入了object type以表示不含原始类型(number,string,symbol等等)的object类型

const data1:object = 42; // Error
const data2:object = string; // Error
const data3:object = false; // Error
const data4:object = undefined; // Error
const data5:object = prop: 0 ; // OK
复制代码

,一个空对象。你可以在该类型初始化的时候赋予各种各样的值,如同上面的第一个Object。但是在赋值的时候却比较麻烦。

const data1:  =  foo: 1 ; // OK
data1.baz = 2;// Error
复制代码

或许这样看起来并不常见,那么这个呢。

const obj = ;
复制代码

事实上,这种定义的方式会讲推导为变量obj的类型。在javascript时期,这行代码随处可见。以至于在ts的代码中,依然会有非常多的这种写法,从而出现了下面这些代码.

const obj = ;
// 添加一个属性
obj.foo = 1; //类型“”上不存在属性“foo”。

// ⬇

/**
* 给个初始值
*/
const obj1 =
foo: undefined
;
obj1.foo = 1; //不能将类型“1”分配给类型“undefined”。

// ⬇

/**
* 分支1:给个初始类型undefined
*/
const obj:
foo: undefined | number;
=
foo: undefined
;
obj.foo = 1;

/**
* 分支2:把foo初始为-1
*/
const obj =
foo: -1
;
obj.foo = 1;
复制代码

除了object之外,其他两种方式其实在初始化变量的时候非常的开放,对于类型基本没有收敛。所以我们更建议不要使用。而object实际上对变量的描述并不够细致,通常对于对象的创建,我们都能够预想到对象的内容,所以我们更倾向于使用interface接口来定义对象。

6.枚举

枚举的作用和定义形式像一个简单的键值一一对应的map

const CaseMap = 
case1: Im case1,
case2: Im case2
;

enum CaseMap
case1 = Im case1,
case2 = Im case2

复制代码

如果你没有声明枚举的值,它会默认使用数字枚举,并且从 0 开始。

const Direction = 
Up: 0,
Down: 1,
Left: 2,
Right: 3
;

enum Direction
Up,
Down,
Left,
Right

复制代码

如果你希望数字枚举从 1 开始,只需要在第一项枚举值声明起始值,那么接下来的项都会递增。

enum Direction 
Up = 1,
Down,
Left,
Right

复制代码

对于枚举和对象的区别,也很简单,枚举是双向的,对象是单向映射的。原理很简单,我们将上面Direction编译为js,编译产物如下。

"use strict";
var Direction;
(function (Direction)
Direction[Direction["Up"] = 1] = "Up";
Direction[Direction["Down"] = 2] = "Down";
Direction[Direction["Left"] = 3] = "Left";
Direction[Direction["Right"] = 4] = "Right";
)(Direction || (Direction = ));
复制代码

给大家推荐一个实用面试题库

1、前端面试题库 (面试必备)            推荐:★★★★★

地址:​​前端面试题库​

7.any,unknow,never

any,unknow

any,unknow基本可以用于声明所有的类型。在某些时候我们是需要这种能力的。例如系统日志对于error的catch。我们无法知道用户会在里面报什么类型的错误,也不知道谁会在代码里面throw 一个number,string,boolean类型的Error出来。对于这种完全无法预知的变量,我们就可以定义为any或者unknow。

那么都是可以用于声明任意类型,any和unknow的区别是什么呢。

unknow对应中文就是不知道的意思。既然是不知道,即使定义的时候,我们无法确定类型,所以使用的时候,我们也不能随意使用。

try
// xxxxx
catch (e)
const num: number = e; //不能将类型“unknown”分配给类型“number”。
if (isNumber(e))
const num1: number = e; // e is number


复制代码

如上例子,我们需要通过一些判断手段,才能够对e进行使用。这样带来的好处就是,就算我不知道e是什么类型,但是只要通过一些必要的判断,我就能够安全的去操作他。坏处也显而易见,无论我做什么操作,我都需要进行判断,对类型进行过滤,才能够正常使用。

而any在这个demo的表现就相对的肆无忌惮。

try
// xxxxx
catch (e:any)
const num: number = e; //ok
const str: string = e; // ok
if (isNumber(e))
const num1: number = e; // e is number


复制代码

并且当我们定义了一个变量为any之后,他是具有传染性质的。any下面的所有属性都将是any。也就是在使用声明为any类型的变量时,该变量下面的所有属性都是危险的any。类型推断将会失效。

const data: any = 1;
复制代码

any用的很爽,但是背后的代价就是把ts变成了anyScript,抛弃所有的类型推断,以让你的代码编辑看起来没有任何报错,表面风平浪静,背后暗流涌动。所以在我们想声明一个未知的catch error以及其他不知道的变量的时候,或许使用unknow更好,而现在unknow也成为了catch error的默认类型。

never

never代表着走不到头,无法执行下去的类型。抛开在类型体操的使用,在日常声明的使用场景多为 throw error。

function thouchError(): never 
throw new Error();
console.log("已经error咯,不能正常执行下面的内容了")

复制代码

在实际应用中,我们通过if ... else ...在最后的else添加never的声明。这时候类型报错就可以帮助你处理干净所有的类型情况。例子如下:

const fun = (data: string | number) => 
if (isString(data))
data.charAt(1); //OK
else if (isNumber(data))
data.toFixed(); //OK
else
const check: never = data;
throw new Error(check);

;

复制代码

当data的类型情况多了一个boolean,ts就会推断报错。

const fun = (data: string | number | boolean) => 
if (isString(data))
data.charAt(1); //OK
else if (isNumber(data))
data.toFixed(); //OK
else
const check: never = data; //不能将类型“boolean”分配给类型“never”。
throw new Error(check);

;
复制代码

TS基本心智

类型上下文收敛和推断

类型推断就是TypeScript会根据上下文代码自动帮我们推算出变量或方法的类型。

当我们又一个函数名为 padLeft。如果参数 padding 是一个数字,我们就在 input 前面添加同等数量的空格,而如果 padding 是一个字符串,我们就直接添加到 input 前面。

function padLeft(padding: number | string, input: string) 
return new Array(padding + 1).join( ) + input; //运算符“+”不能应用于类型“string | number”和“number”。

复制代码

报错的原因很简单,不能用string + 1(尽管在js中是可以的),而变量padding是个number或者string,这样运算最后可能不是我们想要的结果。那么我们可以这样做

function padLeft(padding: number | string, input: string) 
if (typeof padding === "number")
return new Array(padding + 1).join(" ") + input;

return padding + input;

复制代码

而在这个过程中,我们其实对变量进行了几次收敛和推断。

  1. 通过typeof number 讲padding收敛为number
  2. 推断new Array(padding + 1)推断为数组
  3. 通过join推断new Array(padding + 1).join(" ")为字符串
  4. 顺利的让new Array(padding + 1).join(" ")可以和input相加
  5. 如果能走到最后的return padding + input 则说明typeof number为false。那么padding就是string
  6. string的padding可以顺利的和input相加

我们的类型系统就是如此保障我们的代码运行安全的。而对于类型上下文的收敛 ,这里借助(官方文档)[​​www.typescriptlang.org/docs/handbo…​​] 的demo举两个例子。

  • typeof
function printAll(strs: string | string[] | null) 
if (typeof strs === "object")
for (const s of strs)
// Object is possibly null.
console.log(s);

else if (typeof strs === "string")
console.log(strs);
else
// do nothing



复制代码
  • in操作符
type Fish =  swim: () => void ;
type Bird = fly: () => void ;

function move(animal: Fish | Bird)
if ("swim" in animal)
return animal.swim();
// (parameter) animal: Fish


return animal.fly();
// (parameter) animal: Bird

复制代码
  • 穷举检查(参考上面的never相关demo)

对于这个类型的收敛,我们通常会用控制流分析来描述。通过上面的收敛方法,在if中进行对类型的控制,让一个变量可以被观察到不同的类型,作出不同的操作。除了上面的操作外,我们常常会自己去封装控制流的方法,也就是类型守卫。

类型守卫

为了拿到一个变量的string类型分支,我们常常会去做控制流分析。对于typeof string多次的使用,我们就会去封装一个isString的方法。以优雅我们的代码。但是当我们如下去完成一个isString。

const isString = (val: unknown): boolean => typeof val === string

function padLeft(padding: number | string, input: string)
if (isString(padding))
const str: string = padding; //不能将类型“string | number”分配给类型“string”。

// TODO xxx


复制代码

我们会发现竟然报错了,但从我们主观类型推断的角度这padding确实已经是个string了。其实在typescript中,控制流分析是无法跨越上下文的。也就是我们padLeft函数中,我们无法从isString这个方法中捕获到类型的形象,我们只能知道他返回的是个boolean。为了解决这类问题,TS引入了 is 关键字。

语法: is 关键字 + 预期类型 我们只需要把 val is string替换掉boolean即可

const isString = (val: unknown): val is string => typeof val === string

function padLeft(padding: number | string, input: string)
if (isString(padding))
const str: string = padding; //不能将类型“string | number”分配给类型“string”。

// TODO xxx

复制代码

同样的,vue3向外抛出的 (isRef)[​​vuejs.org/api/reactiv…​​] 方法的原理实现也添加了类型守卫

///core/packages/reactivity/src/ref.ts
export function isRef<T>(r: Ref<T> | unknown): r is Ref<T>
export function isRef(r: any): r is Ref
return !!(r && r.__v_isRef === true)

复制代码

类型先行

当Typescript成为开发的附属品,javascripter会先将代码撸完,在开发过程中只写一些简单的类型声明。如果javascripter在逻辑编程上不关注类型编程。我们总能看到最后的代码成果会嵌套着大量的any , as等等不规范的操作。并不是any,as不能用。只是大多数人的使用场景,仅仅是因为改不动之前的数据结构了,或者同一个变量在许多的地方都有进行操作,而在操作的过程中,数据早就变了味(包括但是不限于可以往一个对象里来回赋值,string与number直接用+运算)。在这样的操作之后,类型系统将会变得更加的难以维护,甚至由于粗暴的as。让下一位开发者进入了一个对类型的错误判断,在这基础上进行了后续的操作。

为避免这种现象,我们可以提前进行基础类型的完成。

例如我们进行业务开发的时候的业务逻辑依赖于接口,我们就可以定义好接口的入参和出参数的interface。而这一份interface将成为我们对于这一块业务的开发基础类型。

interface IUserReq
userId:number


interface IUserRsp
userId:number,
userName:string,
QRCode:string,
age:number

复制代码

当我们将有如上的类型基准,那么接下来我们就可以从这一份类型基准,去进行开发,接下来的与user相关的代码类型,都可以是IUserRsp的衍生类型。

例如我们进行业务开发的时候的业务逻辑依赖于数据库,我们就可以定义好数据库的类型。那么我们在node开发的过程中,相关数据库数据操作数据的代码类型,都可以是数据库的衍生类型。

例如我们进行组件开发的时候,我们就可以定义好组件入参props的类型。那么我们在组件开发的过程中,相关props的组件变量类型,都可以是props的衍生类型。

类型约束和维护

不少开发者都称typescript是带着脚镣跳舞,脚镣就意味着约束。这句话的背后意思就是,我们在用TS的时候,其实是在一个约束的条件下,去完成我们的代码开发。而对于类型的约束,约束的程度就会直接反应到我们的项目代码上。

上面我们讲到组件开发以props作为类型的源头,那么以vue3组件开发为例子,我们会在setup语法糖下使用defineProps宏进行props声明。

const props = defineProps(
title:
type: String,
,
UserList:
type:Array

);
复制代码

但是在这个props宏中,我们的声明收敛的其实非常烂,对于UserList,如果数据源来自我们上面的接口,那么这个Array是完全不满足的,我们从UserList上拿到项后直接进行取值,是毫无类型提示的,因为UserList此时是一个Array。

为了解决这个问题,vue3提供了PropType这个类型工具,以生成我们的props类型 。然后我们可以通过将type 通过as强行声明到我们通过PropType生成的props类型。也就是这样。

const props = defineProps(
title:
type: String,
,
UserList:
type:Array as PropType<User[]>

);
复制代码

这样我们组件类型源头props才会被收敛,我们后面在基于props进行完成开发的时候,才会有类型保障。这就是类型收敛的意义。

tips:defineProps在vue3+TS可以 仅声明类型,配合withDefaults宏就可以达到上面的效果

export interface Props 
title?: string;
UserList?: User[];


const props = withDefaults(defineProps<Props>(),
title: ,
UserList: () => []
);
复制代码

给大家推荐一个实用面试题库

1、前端面试题库 (面试必备)            推荐:★★★★★

地址:​​前端面试题库​

泛形

上面我们通过PropType这个类型工具,生成了我们的props类型。而通过一个类型生成另一个目标类型,就是我们泛形的主要目的。以最简单的Array类型来说。我们就可以通过传入一个类型string,Array<string>来生成一个string类型的数组。

Array<T>类比为js,他可能是这样一段代码

function createArray(T) 
const array = new Array()
array.type = T;
return array;

复制代码

泛形可以类比为函数,通过一个入参,再通过函数内部的逻辑改造,我们就可以得到一个返回值。比如最简单的add函数。类型的实现与函数的实现,其实在使用上和定义上基本是一致的。区别就在于在类型上完成两数的加法具体实现可能不是那么容易。

const add = (num1, num2) => num1 + num2;
const res = add(1,1); // res = 2

type add<num1,num2> = /**一系列类型操作 */;
type res = add<1,2>; // type res = 3
复制代码

于此相似的还有接口泛形,区别不大

interface IRes<T> 
code: number;
msg?: string;
data: T;

复制代码

函数泛形

我们有一个identity函数,将入参直接返回,那么我们将有如下实现。

function identity(arg) 
return arg;


const res = identity(1); // res is any
复制代码

我们可以确定的是,我们输入的是1,返回的就是1。但是结果是any,这在我们预期的类型推导层面是不合理的。所以我们需要函数泛形,函数泛形的作用就是为函数提供一个类型的入参,在整个函数体内都可以拿到这个类型入参。用于函数的内变量的声明,函数用于返回类型声明。

function identity<T>(arg): T 
let data: T;
return arg;


const res = identity<1>(1); // res 1
复制代码

在泛形函数中,我们可以在变量处进行对泛形进行预赋值,将变量将来的值的类型赋值给泛形参数

function identity<T>(arg: T): T 
let data: T;
return arg;


const res = identity(1);// res 1 这样不用传入<1>这个类型参数
复制代码

对于上面讲到的defineProp其实也是通过泛形参数实现的,实现如下。

function defineProps<TypeProps>(): Readonly<TypeProps>
复制代码

于此相似的还有类泛形,作用同样是将泛形参数提供给类,在类里面可以进行使用该参数。

类型关键字

为了实现理想的类型约束和维护,我们就会使用到类型关键字,他可以帮助我们进行简单的类型转换,类似于js原生提供的api,比如array会有length属性可以拿到数组长度,Object.keys可以拿到一个对象的key组成的数组。在ts中,也会提供一些小api以完成对类型的裁剪拼接。

1.[]操作符

当我们需要从IUser拿到账户信息的部分

interface IUser 
userId: number;
userName: string;
QRCode: string;
age: number;
accountInfo:
No: number;
passWord: number;
;


interface PartOfIUser
userId: number;
accountInfo:
No: number;
passWord: number;
;

复制代码

如此操作,重复度极高,不利于统一类型来源,一改就要改两次。

bad taste:需要反着写,反直觉

interface PartOfIUser 
userId: number;
accountInfo:
No: number;
passWord: number;
;



interface IUser extends PartOfIUser
userName: string;
QRCode: string;
age: number;

复制代码

good taste:

interface IUser 
userId: number;
userName: string;
QRCode: string;
age: number;
accountInfo:
No: number;
passWord: number;
;


interface PartOfIUser
userId: IUser[userId];
accountInfo: IUser[accountInfo];

// 或者使用类型工具Pick
type PartOfIUser = Pick<IUser, userId | accountInfo>;
复制代码

2.typeof 操作符

获取某个值的类型属性

const shixin =  name: shixin, age: 22 ;

type IShixin = typeof shixin;
// 等于
type IShixin =
name: string;
age: string;



let num = 1
type n = typeof num
// 等于
type n = number
复制代码

3.keyof 操作符

TS版本的Object.keys() 可以获取interface的key,组成联合类型

type IShixin = 
name: string;
age: string;
;

type Key = keyof IShixin;
//等于
type Key = name | age;
复制代码

4.in 操作符

用于遍历联合类型

type Keys = a | b | c;

type Obj =
[p in Keys]: unknown;
;

// 等于
type Obj =
a: unknown;
b: unknown;
c: unknown;

复制代码

5.组合使用操作符

有如下枚举值和函数,当传入的key为ERROR时,将会把相关信息log出来。

enum LogLevel 
ERROR,
WARN,
INFO,
DEBUG,


function printImportant(key: ERROR | WARN | INFO | DEBUG, message: string)
const num = LogLevel[key];
if (num <= LogLevel.WARN)
console.log(Log level key is:, key);
console.log(Log level value is:, num);
console.log(Log level message is:, message);


复制代码

这个时候我们的printImportant函数的key参数其实是和enum强绑定的。而上面的demo,我们是手动帮key参数写出了所有的枚举值。但是有两个问题

  1. 当LogLevel枚举值添加,我们需要在enum和函数的参数都进行修改。假设有N个函数依赖了此枚举,那么当枚举变动,相关类型就需要手动更改N次。
  2. 当枚举值很多的情况,手动声明就显得太蠢。

或许我们需要通过LogLevel自动生成一个枚举值的联合类型,而不是手写。这时候我们就可以使用上面说的typeof + keyof了。

enum LogLevel 
ERROR,
WARN,
INFO,
DEBUG,

复制代码
// 第一步,通过typeof 拿到enum的类型属性
enum LogLevel
ERROR,
WARN,
INFO,
DEBUG,


type LogLevelType = typeof LogLevel;
// 等于
type LogLevelType =
[x: number]: string;
readonly ERROR: LogLevel.ERROR;
readonly WARN: LogLevel.WARN;
readonly INFO: LogLevel.INFO;
readonly DEBUG: LogLevel.DEBUG;
;

// 第二步,通过keyof 拿到上面这个枚举类型属性的key组成联合类型

type LogLevelStrings = keyof LogLevelType;
// 等于
type LogLevelStrings = number | ERROR | WARN | INFO | DEBUG;
复制代码

这个LogLevelStrings 就是我们最后需要的啦~整理整理

enum LogLevel 
ERROR,
WARN,
INFO,
DEBUG,


/**
* This is equivalent to:
* type LogLevelStrings = ERROR | WARN | INFO | DEBUG;
*/
type LogLevelStrings = keyof typeof LogLevel;

function printImportant(key: LogLevelStrings, message: string)
const num = LogLevel[key];
if (num <= LogLevel.WARN)
console.log(Log level key is:, key);
console.log(Log level value is:, num);
console.log(Log level message is:, message);


复制代码

类型断言

当TS没你聪明的时候,类型推断无法推断出正确的类型。需要你手动指定类型,就是类型断言的使用场景。

还是刚刚的User的例子,我们vue3可能会这样初始化user并且请求数据。

interface IUserRsp 
userId: number;
userName: string;
QRCode: string;
age: number;
accountInfo:
No: number;
passWord: number;
;

// 定义初始user对象
const user = ref();
const requestUser = async () =>
// 请求user信息
const res: IUserRsp = await request(/api/user/userInfo);
//给user赋值
user.value = res;
// 当我们想用user里面的accountInfo
user.value.accountInfo; // error 类型“”上不存在属性“userName”。
;
复制代码

这个时候user必然是IUserRsp类型,那么这个user上面必然有accountInfo,但是却报错了。来吧,as!

这样as

(user as Ref<IUserRsp>).value.accountInfo; // ok
复制代码

这样as

(user.value as IUserRsp).accountInfo; // ok
复制代码

另一种as可能更加常见:as any。这是anyScript的重要来源。

(user as any).value.accountInfo; // ok
复制代码

这样就强制把类型扭转啦,在前两种as,ts的推断系统就会在这一行把user判断成IUserRsp。换句话说,你在这一行代码接管了TS的类型推断。但是其实我们大多数的时候其实并不需要as,as在实践场景更多的是工程师无法(type 无法 = 能力不足|懒得去找报错源头|没时间)维护类型系统而使用的偷懒技巧,在大多数使用as的时候,大家为的并不是解决类型系统问题,而是报错问题。而上面的demo,尽管无数次出现在各种项目的代码中,但其实我们可以通过Partial类型工具来让IUserRsp变成可选IUserRsp。

interface IUserRsp 
userId: number;
userName: string;
QRCode: string;
age: number;
accountInfo:
No: number;
passWord: number;
;

// 定义初始user对象
const user = ref<Partial<IUserRsp>>(); // 使用Partial
const requestUser = async () =>
// 请求user信息
const res: IUserRsp = await request(/api/user/userInfo);
//给user赋值
user.value = res;
// 当我们想用user里面的accountInfo
user.value.accountInfo; // OK
;
复制代码

依然是上面的代码,或许还有一种as

interface IUserRsp 
userId: number;
userName: string;
QRCode: string;
age: number;
accountInfo:
No: number;
passWord: number;
;

// 定义初始user对象
const user = ref( as IUserRsp);
const requestUser = async () =>
// 请求user信息
const res: IUserRsp = await request(/api/user/userInfo);
//给user赋值
user.value = res;
// 当我们想用user里面的accountInfo
user.value.accountInfo; // ok
;
复制代码

这种看起来是安全的,也是当前很多人的首选,因为当我们初始化的时候把user变成了可选的IUserRsp,就意味着在进行如下情况会报错。

user.value.accountInfo
// 可能为

No: number;
passWord: number;

或者undefined


//那么如下调用,可能会提示accountInfo没有password,undefined不能直接调用password
user.value.accountInfo.passWord
复制代码

当然了,你可以为user制作一个类型守卫,在使用user的时候做一下控制流分析。

const isUser = (user: unknown): user is IUserRsp => !!user[userId];
复制代码

但是在写这些麻烦的代码和在初始化的时候as,选择后者可能更加方便。但后者的风险在于如果有个小笨蛋在还没request的时候就调用了user.value.accountInfo,GG。

// 定义初始user对象
const user = ref( as IUserRsp);

// 有个小笨蛋在还没request的时候就调用了accountInfo
user.value.accountInfo.passWord; // GG

const requestUser = async () =>
// 请求user信息
const res: IUserRsp = await request(/api/user/userInfo);
//给user赋值
user.value = res;
// 当我们想用user里面的accountInfo
user.value.accountInfo.passWord; // ok
;
复制代码

so,ban-as please!

类型工具

内置类型工具

完成了对泛形的理解,掌握了类型关键字了,我们就可以开始使用一些类型工具了。上面讲到了vue为我们提供的类型工具PropType。让我们方便的传入一个参数,就可以生成该参数对应props的类型。在TS内部也提供了很多类型工具。

属性修饰工具

Partial 可以将一个interface的所有属性都换成可选的,也就是对接口每一项都添加了可选修饰符 ?

type Partial<T> = 
[P in keyof T]?: T[P];
;
复制代码

Required 可以将一个interface的所有属性都换成必选的,也就对接口每一项都删除了可选修饰符 ?

type Required<T> = 
[P in keyof T]-?: T[P];
;
复制代码

Readonly 可以将一个interface的所有属性都换成仅读的,也就对接口每一项都添加了仅读修饰符 readonly

type Readonly<T> = 
readonly [P in keyof T]: T[P];
;
复制代码

结构工具

Record 常用的对象定义方式

type Record<K extends string | number | symbol, T> = 
[P in K]: T;

复制代码

Exclude 联合类型 T中不存在于 U 中的部分

type Exclude<T, U> = T extends U ? never : T;

type T1 = Exclude<1 | 2, 2>; // 1
复制代码

Pick 同lodash的Pick

type Pick<T, K extends keyof T> = 
[P in K]: T[P];
;
复制代码

**Omit ** 同lodash的Omit

type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>
复制代码

怎么实践类型类型工具

在类型系统中对待类型工具就如同在项目系统中对待lodash,尽管类型体操恶心,但是不需要你完成所有具体实现。

推荐​​ts-toolbelt​​,该库是目前包含工具类型数量最多的。基本能满足你大多数的常规操作。以满足原生的类型工具不够用,自己又不太会写类型工具、或无法花大量时间去维护类型工具。

一个

以上是关于面试题 TypeScript 前端面试题 由浅到深的主要内容,如果未能解决你的问题,请参考以下文章

由浅到深理解ROS

由浅到深学习JDBC二

Nginx服务优化(由浅到深)!

Nginx服务优化(由浅到深)!

由浅到深理解java反射

由浅到深学习JDBC一