Web前端最全ts学习笔记八：类型保护，2024年最新web前端面试项目上的难点有哪些

读者福利

========

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

由于篇幅过长，就不展示所有面试题了，想要完整面试题目的朋友（另有小编自己整理的2024大厂高频面试题及答案附赠）

}

// 2.instanceof

class Person { eat() { } }

class Dog { }

const createClass = (clazz: new () => Person | Dog) => {

return new clazz

}

let r = createClass(Person);

if (r instanceof Person) {

r.eat // Person

} else {

r // Dog

}

// 3.in语法

interface Fish {

swiming: string

}

interface Bird {

fly: string

}

function isFish(animal: Fish | Bird): animal is Fish {

return ‘swiming’ in animal

}

function getAnimalType(animal: Fish | Bird) { // keyof 取得是类型

if (isFish(animal)) {

animal.swiming

} else {

animal.fly

}

}

// 以上的情况都可以通过js来判断出来的 , 可以增加一个字面量类型来进行判断 可识别类型

interface IButton1 {

color: ‘blue’

class: string

}

interface IButton2 {

color: ‘green’

class: string

}

function getButton(button: IButton1 | IButton2) {

if (button.color == ‘blue’) {

button

} else {

button

}

}

// is语法 用来定义自己的类型

function isString(val: any): val is string { // 根据函数的返回值确定是不是string类型

// ts 是给代码的 js是自己的逻辑 ts不关心，ts只关心类型

return Object.prototype.toString.call(val) == ‘[object String]’

}

// ts 语法 为了有类型提示 不会关心js怎么执行

// null保护 val!=null ! ?

function getNum(val: number | null) {

val = val || 0;

val.toFixed // 明确出来是数字

function inner() {

//if(val !== null){ // 内层函数可能会判断不正常

val?.toFixed()

//}
读者福利

========

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

由于篇幅过长，就不展示所有面试题了，想要完整面试题目的朋友（另有小编自己整理的2024大厂高频面试题及答案附赠）