最新TypeScript基本知识点整理——类，2024金三银四前端大厂面试题来袭

最新推荐文章于 2024-11-12 11:19:19 发布

2401_84419009

最新推荐文章于 2024-11-12 11:19:19 发布

阅读量442

点赞数 5

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84419009/article/details/138625266

版权

程序员专栏收录该内容

185 篇文章 1 订阅

订阅专栏

框架相关

原生JS虽能实现绝大部分功能，但要么就是过于繁琐，要么就是存在缺陷，故绝大多数开发者都会首选框架开发方案。现阶段较热门是React、Vue两大框架，两者工作原理上存在共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。

在框架方面，生命周期、钩子函数、虚拟DOM这些基本知识是必须要掌握的，在学习的过程可以结合框架的官方文档

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

Vue框架

知识要点：
1. vue-cli工程
2. vue核心知识点
3. vue-router
4. vuex
5. http请求
6. UI样式
7. 常用功能
8. MVVM设计模式

React框架

知识要点：
1. 基本知识
2. React 组件
3. React Redux
4. React 路由

private 私有修饰符

注意：

表示在当前类中可以访问，子类，外部类不可以访问

class People { private name : string constructor (name:string) { //构造函数必须写 this.name = name } private say () :void { console.log(‘你好’) }``}

protected 保护类型

注意：

表示在当前类中和子类中可以访问，外部类不可以访问

class People { protected name : string constructor (name:string) { //构造函数必须写 this.name = name } protected say () :void { console.log(‘你好’) }``}

注意：

TypeScript 只做编译时检查，当你试图在类外部访问被 private 或者 protected 修饰的属性或方法时，TS 会报错，但是它并不能阻止你访问这些属性或方法。

readonly 只读修饰符

注意：

表示某个属性是只读的，不能被修改

class People { readonly name : string constructor (name:string) { //构造函数必须写 this.name = name }``}

2. 声明类

class People { name : string //默认为public age : number constructor (name:string, age:number) { //构造函数必须写 this.name = name this.age = age } say () :void { console.log(‘你好’) }}` `const HH : People = new People('含含', 21)console.log(HH.name)console.log(HH.age)HH.say()

3. 类的继承

class Student extends People { cm : number constructor (name:string, age:number, cm:number) { super(name, age) //super 继承父类的构造函数，并向构造函数传参，super必须写在第一行 this.cm = cm } work () : void { console.log(‘学习’) }}` `const stu1 : Student = new Student('liu', 22, 175)console.log(stu1.name)console.log(stu1.age)console.log(stu1.cm)stu1.say()stu1.work()

4. 静态属性和静态方法

注意：

静态方法和静态属性必须使用类名调用

静态属性和静态方法在实例化之前就已经存在

注意：静态方法调用不了实例化方法和实例化属性，因为静态域加载是在解析阶段，而实例化是在初始化阶段，（java原理），所以静态方法里面不能调用本类的方法和属性，可以调用静态属性和静态方法

class People { static name1 : string = ‘静态属性’; static say () :void { console.log(‘静态方法’) }}console.log(People.name1)``People.say()

5. 多态

多态---->重写方法

父类定义一个方法不去实现，让继承它的子类去实现，每个子类的该方法有不同的表现

class Animal { name : string constructor (name:string) { this.name = name } eat () : void {//让它的子类去实现不同的eat方法` `}} class Laohu extends Animal { constructor (name:string) { super(name) } eat () : void { ``console.log( $KaTeX parse error: Expected 'EOF', got '}' at position 24: \dotsme}吃肉！`)`` `}̲``}` `class Lao\dots$ {this.name}吃粮食！)`` }}const laohu : Laohu = new Laohu(‘老虎’)laohu.eat()const laoshu : Laoshu = new Laoshu(‘老鼠’)``laoshu.eat()

6. 类和接口

注意：

类可以实现（implement）接口。通过接口，你可以强制地指明类遵守某个契约。你可以在接口中声明一个方法，然后要求类去具体实现它。

接口不可以被实例化，实现接口必须重写接口中的抽象方法

interface Play { plays (difang:string) : void;}` `class Playy implements Play {` `plays(difang: string): void {` console.log(我们要去${difang}玩！！！) `}} const pl : Playy = new Playy();``pl.plays(‘北京’)