2024年TypeScript入门(1)，2024年阿里前端高级面试题分享

最新推荐文章于 2024-05-12 01:17:24 发布
最新推荐文章于 2024-05-12 01:17:24 发布
阅读量702 收藏 28
点赞数 8
分类专栏： 程序员 文章标签： 前端 typescript javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84438160/article/details/138447544
版权

Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

“compilerOptions”: {

“module”: “CommonJS”

}

/‘none’, ‘commonjs’, ‘amd’, ‘system’, ‘umd’, ‘es6’, ‘es2015’, ‘es2020’, ‘es2022’, ‘esnext’, ‘node12’, ‘nodenext’/

outDir

  • 编译后文件的所在目录

  • 默认情况下，编译后的js文件会和ts文件位于相同的目录，设置outDir后可以改变编译后文件的位置

  • 示例：

“compilerOptions”: {

“outDir”: “dist”

}

  • 设置后编译后的js文件将会生成到dist目录
outFile

  • 将所有的文件编译为一个js文件

  • 默认会将所有的编写在全局作用域中的代码合并为一个js文件，如果module制定了None、System或AMD则会将模块一起合并到文件之中

  • 一般不会用这个，一般用打包工具

  • 示例：

“compilerOptions”: {

“outFile”: “dist/app.js”

}

rootDir

  • 指定代码的根目录，默认情况下编译后文件的目录结构会以最长的公共目录为根目录，通过rootDir可以手动指定根目录

  • 示例：

“compilerOptions”: {

“rootDir”: “./src”

}

allowJs
  • 是否对js文件编译 ，默认是false
checkJs

  • 是否对js文件进行检查

  • 是否检查js代码是否符合ts语法规范，默认是false

  • 示例：

“compilerOptions”: {

“allowJs”: true,

“checkJs”: true

}

removeComments

  • 是否删除注释

  • 默认值：false

noEmit

  • 不对代码进行编译

  • 不生成编译后的文件

  • 只想检查语法的时候可能用

  • 默认值：false

noEmitOnError

  • 有错误的情况下不进行编译

  • 默认值：false

sourceMap

  • 是否生成sourceMap

  • 默认值：false

严格检查

  • strict

  • 启用所有的严格检查，默认值为true，设置后相当于开启了所有的严格检查

  • alwaysStrict

  • 总是以严格模式对代码进行编译

  • noImplicitAny

  • 禁止隐式的any类型

  • noImplicitThis

  • 禁止类型不明确的this

  • strictBindCallApply

  • 严格检查bind、call和apply的参数列表

  • strictFunctionTypes

  • 严格检查函数的类型

  • strictNullChecks

  • 严格的空值检查

let box1 = document.getElementById(‘box1’);

// if(box1 !== null){

// box1.addEventListener(‘click’, function (){

// alert(‘hello’);

// });

// }

box1?.addEventListener(‘click’, function (){

alert(‘hello’);

});

  • strictPropertyInitialization

  • 严格检查属性是否初始化

额外检查

  • noFallthroughCasesInSwitch

  • 检查switch语句包含正确的break

  • noImplicitReturns

  • 检查函数没有隐式的返回值

  • noUnusedLocals

  • 检查未使用的局部变量

  • noUnusedParameters

  • 检查未使用的参数

高级

  • allowUnreachableCode

  • 检查不可达代码

  • 可选值：

  • true，忽略不可达代码

  • false，不可达代码将引起错误

  • noEmitOnError

  • 有错误的情况下不进行编译

  • 默认值：false

五、webpack

  • 通常情况下，实际开发中我们都需要使用构建工具对代码进行打包，TS同样也可以结合构建工具一起使用，下边以webpack为例介绍一下如何结合构建工具使用TS。
步骤：
  1. 初始化项目

  • 进入项目根目录，执行命令 npm init -y

  • 主要作用：创建package.json文件

  1. 下载构建工具

  • npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin

  • 共安装了7个包

  • webpack

  • 构建工具webpack

  • webpack-cli

  • webpack的命令行工具

  • webpack-dev-server

  • webpack的开发服务器

  • typescript

  • ts编译器

  • ts-loader

  • ts加载器，用于在webpack中编译ts文件

  • html-webpack-plugin

  • webpack中html插件，用来自动创建html文件

  • npm i -D html-webpack-plugin

  • clean-webpack-plugin

  • webpack中的清除插件，每次构建都会先清除目录

  1. 根目录下创建webpack的配置文件webpack.config.js

// 引入一个包

const path = require(“path”);

// 引入html插件

const HtmlWebpackPlugin = require(“html-webpack-plugin”);

// 引入clean插件

const { CleanWebpackPlugin } = require(“clean-webpack-plugin”);

// webpack中的所有的配置信息都应该写在module.exports中

module.exports = {

optimization:{

minimize: false // 关闭代码压缩，可选

},

// 指定入口文件

entry: “./src/index.ts”,

// 指定打包文件所在目录

output: {

// 指定打包文件的目录

path: path.resolve(__dirname, “dist”),

// 打包后文件的文件

filename: “bundle.js”,

},

// 用来设置引用模块

resolve: {

extensions: [“.ts”, “.js”]

},

// 指定webpack打包时要使用模块

module: {

// 指定要加载的规则

rules: [

{

// test指定的是规则生效的文件

test: /.ts$/,

// 要使用的loader

use: {

loader: “ts-loader”

},

// 要排除的文件

exclude: /node_modules/

}

]

},

plugins: [

new CleanWebpackPlugin(),

new HtmlWebpackPlugin({

//title:‘TS测试’

template: “./src/index.html”//设定模板

}),

],

mode:‘production’

}

  1. 根目录下创建tsconfig.json，配置可以根据自己需要

{

“compilerOptions”: {

“target”: “ES2015”,

“module”: “ES2015”,

“strict”: true

}

}

  1. 修改package.json添加如下配置

{

…略…

“scripts”: {

“test”: “echo “Error: no test specified” && exit 1”,

“build”: “webpack”,

“start”: “webpack serve --open chrome.exe”

},

…略…

}

  1. 在src下创建ts文件，并在并命令行执行npm run build对代码进行编译，或者执行npm start来启动开发服务器

六、Babel

  • 经过一系列的配置，使得TS和webpack已经结合到了一起，除了webpack，开发中还经常需要结合babel来对代码进行转换以使其可以兼容到更多的浏览器，在上述步骤的基础上，通过以下步骤再将babel引入到项目中。
  1. 安装依赖包：

  • npm i -D @babel/core @babel/preset-env babel-loader core-js

  • 共安装了4个包，分别是：

  • @babel/core

  • babel的核心工具

  • @babel/preset-env

  • babel的预定义环境

  • @babel-loader

  • babel在webpack中的加载器

  • core-js

  • core-js用来使老版本的浏览器支持新版ES语法

  1. 修改webpack.config.js配置文件

// 引入一个包

const path = require(‘path’);

// 引入html插件

const HTMLWebpackPlugin = require(‘html-webpack-plugin’);

// 引入clean插件

const { CleanWebpackPlugin } = require(‘clean-webpack-plugin’);

// webpack中的所有的配置信息都应该写在module.exports中

module.exports = {

// 指定入口文件

entry: “./src/index.ts”,

// 指定打包文件所在目录

output: {

// 指定打包文件的目录

path: path.resolve(__dirname, ‘dist’),

// 打包后文件的文件

filename: “bundle.js”,

// 告诉webpack不使用箭头//webpack会生成箭头函数的立即执行函数，这里不让他使用箭头函数

environment:{

arrowFunction: false

}

},

// 指定webpack打包时要使用模块

module: {

// 指定要加载的规则

rules: [

{

// test指定的是规则生效的文件

test: /.ts$/,

// 要使用的loader

use: [

// 配置babel

{

// 指定加载器

loader:“babel-loader”,

// 设置babel

options: {

// 设置预定义的环境

presets:[

[

// 指定环境的插件

“@babel/preset-env”,

// 配置信息

{

// 要兼容的目标浏览器

targets:{

“chrome”:“58”,

“ie”:“11”

},

// 指定corejs的版本//因为这里下载的是"core-js": “^3.21.1”,

“corejs”:“3”,

// 使用corejs的方式 “usage” 表示按需加载

“useBuiltIns”:“usage”

}

]

]

}

},

‘ts-loader’

],

// 要排除的文件

exclude: /node-modules/

}

]

},

// 配置Webpack插件

plugins: [

new CleanWebpackPlugin(),

new HTMLWebpackPlugin({

// title: “这是一个自定义的title”

template: “./src/index.html”

}),

],

// 用来设置引用模块

resolve: {

extensions: [‘.ts’, ‘.js’]

},

mode:‘production’

};

  • 如此一来，使用ts编译后的文件将会再次被babel处理，使得代码可以在大部分浏览器中直接使用，可以在配置选项的targets中指定要兼容的浏览器版本。

七、面向对象

面向对象是程序中一个非常重要的思想，它被很多同学理解成了一个比较难，比较深奥的问题，其实不然。面向对象很简单，简而言之就是程序之中所有的操作都需要通过对象来完成。

  • 举例来说：

  • 操作浏览器要使用window对象

  • 操作网页要使用document对象

  • 操作控制台要使用console对象

一切操作都要通过对象，也就是所谓的面向对象，那么对象到底是什么呢？这就要先说到程序是什么，计算机程序的本质就是对现实事物的抽象，抽象的反义词是具体，比如：照片是对一个具体的人的抽象，汽车模型是对具体汽车的抽象等等。程序也是对事物的抽象，在程序中我们可以表示一个人、一条狗、一把枪、一颗子弹等等所有的事物。一个事物到了程序中就变成了一个对象。

在程序中所有的对象都被分成了两个部分数据和功能，以人为例，人的姓名、性别、年龄、身高、体重等属于数据，人可以说话、走路、吃饭、睡觉这些属于人的功能。数据在对象中被成为属性，而功能就被称为方法。所以简而言之，在程序中一切皆是对象。

1、类（class）

要想面向对象，操作对象，首先便要拥有对象，那么下一个问题就是如何创建对象。要创建对象，必须要先定义类，所谓的类可以理解为对象的模型，程序中可以根据类创建指定类型的对象，举例来说：可以通过Person类来创建人的对象，通过Dog类创建狗的对象，通过Car类来创建汽车的对象，不同的类可以用来创建不同的对象。

  • 定义类：

class 类名 {

属性名: 类型;

constructor(参数: 类型){

this.属性名 = 参数;

}

方法名(){

…

}

}

  • 示例：

class Person{

name: string;

age: number;

constructor(name: string, age: number){

this.name = name;

this.age = age;

}

sayHello(){

console.log(大家好，我是${this.name});

}

}

  • 使用类：

const p = new Person(‘孙悟空’, 18);

p.sayHello();

类的简介

// 使用class关键字来定义一个类

/*

  • 对象中主要包含了两个部分：

  •   属性

  •   方法

  • */

class Person{

/*

  • 直接定义的属性是实例属性，需要通过对象的实例去访问：

  •   const per = new Person();

  •   per.name

  • 使用static开头的属性是静态属性（类属性），可以直接通过类去访问

  •   Person.age

  • readonly开头的属性表示一个只读的属性无法修改

  • */

// 定义实例属性

// readonly name: string = ‘孙悟空’;

name = ‘孙悟空’;

// 在属性前使用static关键字可以定义类属性（静态属性）

// static readonly age: number = 18;

age = 18;

// 定义方法

/*

  • 如果方法以static开头则方法就是类方法，可以直接通过类去调用

  • */

sayHello(){

console.log(‘Hello 大家好！’);

}

}

const per = new Person();

per.sayHello();

构造函数

class Dog{

name: string;

age: number;

// constructor 被称为构造函数

// 构造函数会在对象创建时调用

constructor(name: string, age: number) {

// 在实例方法中，this就表示当前当前的实例

// 在构造函数中当前对象就是当前新建的那个对象

// 可以通过this向新建的对象中添加属性

this.name = name;

this.age = age;

}

bark(){

// alert(‘汪汪汪！’);

// 在方法中可以通过this来表示当前调用方法的对象

console.log(this.name);

}

}

const dog = new Dog(‘小黑’, 4);

const dog2 = new Dog(‘小白’, 2);

// console.log(dog);

// console.log(dog2);

dog2.bark();

继承

(function (){

// 定义一个Animal类

class Animal{

name: string;

age: number;

constructor(name: string, age: number) {

this.name = name;

this.age = age;

}

sayHello(){

console.log(‘动物在叫~’);

}

}

/*

  • Dog extends Animal

    • 此时，Animal被称为父类，Dog被称为子类
    • 使用继承后，子类将会拥有父类所有的方法和属性
    • 通过继承可以将多个类中共有的代码写在一个父类中，
  •   这样只需要写一次即可让所有的子类都同时拥有父类中的属性和方法

  •   如果希望在子类中添加一些父类中没有的属性或方法直接加就行
    • 如果在子类中添加了和父类相同的方法，则子类方法会覆盖掉父类的方法
  •   这种子类覆盖掉父类方法的形式，我们称为方法重写

  • */

// 定义一个表示狗的类

// 使Dog类继承Animal类

class Dog extends Animal{

run(){

console.log(${this.name}在跑~~~);

}

sayHello() {

console.log(‘汪汪汪汪！’);

}

}

// 定义一个表示猫的类

// 使Cat类继承Animal类

class Cat extends Animal{

sayHello() {

console.log(‘喵喵喵喵！’);

}

}

const dog = new Dog(‘旺财’, 5);

const cat = new Cat(‘咪咪’, 3);

console.log(dog);

dog.sayHello();

dog.run();

console.log(cat);

cat.sayHello();

})();

super

(function () {

class Animal {

name: string;

constructor(name: string) {

this.name = name;

}

sayHello() {

console.log(‘动物在叫~’);

}

}

class Dog extends Animal{

age: number;

constructor(name: string, age: number) {

// 如果在子类中写了构造函数，在子类构造函数中必须对父类的构造函数进行调用

super(name); // 调用父类的构造函数

this.age = age;

}

sayHello() {

// 在类的方法中 super就表示当前类的父类

//super.sayHello();

console.log(‘汪汪汪汪！’);

}

}

const dog = new Dog(‘旺财’, 3);

dog.sayHello();

})();

抽象类

(function () {

/*

  • 以abstract开头的类是抽象类，

  •   抽象类和其他类区别不大，只是不能用来创建对象

  •   抽象类就是专门用来被继承的类

  •   抽象类中可以添加抽象方法

  • */

abstract class Animal {

name: string;

constructor(name: string) {

this.name = name;

}

// 定义一个抽象方法

// 抽象方法使用 abstract开头，没有方法体

// 抽象方法只能定义在抽象类中，子类必须对抽象方法进行重写

abstract sayHello():void;

}

class Dog extends Animal{

sayHello() {

console.log(‘汪汪汪汪！’);

}

}

class Cat extends Animal{

sayHello() {

console.log(‘喵喵喵喵！’);

}

}

const dog = new Dog(‘旺财’);

dog.sayHello();

})();

接口

接口就是定义了一个规范

(function () {

// 描述一个对象的类型

type myType = {

name: string,

age: number

};

/*

  • 接口用来定义一个类结构，用来定义一个类中应该包含哪些属性和方法

  •   同时接口也可以当成类型声明去使用

  • */

interface myInterface {

name: string;

age: number;

}

interface myInterface {

gender: string;

}

// const obj: myInterface = {

// name: ‘sss’,

// age: 111,

// gender: ‘男’

// };

/*

  • 接口可以在定义类的时候去限制类的结构，

  • 接口中的所有的属性都不能有实际的值

  • 接口只定义对象的结构，而不考虑实际值

  •   在接口中所有的方法都是抽象方法

  • */

interface myInter{

name: string;

sayHello():void;

}

/*

  • 定义类时，可以使类去实现一个接口,

  • 实现接口就是使类满足接口的要求

  • */

class MyClass implements myInter{

name: string;

constructor(name: string) {

this.name = name;

}

sayHello(){

console.log(‘大家好~~’);

}

}

})();

封装

可以直接将属性定义在构造函数中

(function (){

// 定义一个表示人的类

class Person{

// TS可以在属性前添加属性的修饰符

/*

  • public 修饰的属性可以在任意位置访问（修改） 默认值

  • private 私有属性，私有属性只能在类内部进行访问（修改）

  •   - 通过在类中添加方法使得私有属性可以被外部访问

  • protected 受包含的属性，只能在当前类和当前类的子类中访问（修改）

  • */

private _name: string;

private _age: number;

constructor(name: string, age: number) {

this._name = name;

this._age = age;

}

/*

  • getter方法用来读取属性

  • setter方法用来设置属性

  •   - 它们被称为属性的存取器

  • */

// 定义方法，用来获取name属性

// getName(){

// return this._name;

// }

//

// // 定义方法，用来设置name属性

// setName(value: string){

// this._name = value;

// }

//

// getAge(){

// return this._age;

// }

//

// setAge(value: number){

// // 判断年龄是否合法

// if(value >= 0){

// this._age = value;

// }

// }

// TS中设置getter方法的方式

get name(){

// console.log(‘get name()执行了！！’);

return this._name;

}

set name(value){

this._name = value;

}

get age(){

return this._age;

}

set age(value){

if(value >= 0){

this._age = value

}

}

}

const per = new Person(‘孙悟空’, 18);

/*

  • 现在属性是在对象中设置的，属性可以任意的被修改,

  • 属性可以任意被修改将会导致对象中的数据变得非常不安全

  • */

// per.setName(‘猪八戒’);

// per.setAge(-33);

per.name = ‘猪八戒’;

per.age = -33;

// console.log(per);

class A{

protected num: number;

constructor(num: number) {

this.num = num;

}

}

class B extends A{

test(){

console.log(this.num);

}

}

const b = new B(123);

// b.num = 33;//无法访问

/* class C{

name: string;

age: number

// 可以直接将属性定义在构造函数中

constructor(name: string, age: number) {

this.name = name;

this.age = age;

}

}*/

class C{

// 可以直接将属性定义在构造函数中

constructor(public name: string, public age: number) {

}

}

const c = new C(‘xxx’, 111);

console.log©;

})();

泛型

/*

function fn(a: any): any{

return a;

}*/

/*

  • 在定义函数或是类时，如果遇到类型不明确就可以使用泛型

  • */

function fn(a: T): T{

return a;

}

// 可以直接调用具有泛型的函数

let result = fn(10); // 不指定泛型，TS可以自动对类型进行推断

let result2 = fn(‘hello’); // 指定泛型

// 泛型可以同时指定多个

function fn2<T, K>(a: T, b: K):T{

console.log(b);

return a;

}

fn2<number, string>(123, ‘hello’);

interface Inter{

length: number;

}

// T extends Inter 表示泛型T必须时Inter实现类（子类）

function fn3(a: T): number{

return a.length;

}

class MyClass{

name: T;

constructor(name: T) {

this.name = name;

}

}

const mc = new MyClass(‘孙悟空’);

2、面向对象的特点

1).封装

  • 对象实质上就是属性和方法的容器，它的主要作用就是存储属性和方法，这就是所谓的封装

  • 默认情况下，对象的属性是可以任意的修改的，为了确保数据的安全性，在TS中可以对属性的权限进行设置

  • 只读属性（readonly）：

  • 如果在声明属性时添加一个readonly，则属性便成了只读属性无法修改

  • TS中属性具有三种修饰符：

  • public（默认值），可以在类、子类和对象中修改

  • protected ，可以在类、子类中修改

  • private ，可以在类中修改

  • 示例：

  • public

class Person{

public name: string; // 写或什么都不写都是public

public age: number;

constructor(name: string, age: number){

this.name = name; // 可以在类中修改

this.age = age;

}

sayHello(){

console.log(大家好，我是${this.name});

}

}

class Employee extends Person{

constructor(name: string, age: number){

super(name, age);

this.name = name; //子类中可以修改

}

}

const p = new Person(‘孙悟空’, 18);

p.name = ‘猪八戒’;// 可以通过对象修改

  • protected

class Person{

protected name: string;

protected age: number;

constructor(name: string, age: number){

this.name = name; // 可以修改

this.age = age;

}

sayHello(){

console.log(大家好，我是${this.name});

}

}

class Employee extends Person{

constructor(name: string, age: number){

super(name, age);

this.name = name; //子类中可以修改

}

}

const p = new Person(‘孙悟空’, 18);

p.name = ‘猪八戒’;// 不能修改

  • private

class Person{

private name: string;

private age: number;

constructor(name: string, age: number){

this.name = name; // 可以修改

this.age = age;

}

sayHello(){

console.log(大家好，我是${this.name});

}

}

class Employee extends Person{

constructor(name: string, age: number){

super(name, age);

this.name = name; //子类中不能修改

}

}

const p = new Person(‘孙悟空’, 18);

p.name = ‘猪八戒’;// 不能修改

  • 属性存取器

  • 对于一些不希望被任意修改的属性，可以将其设置为private

  • 直接将其设置为private将导致无法再通过对象修改其中的属性

  • 我们可以在类中定义一组读取、设置属性的方法，这种对属性读取或设置的属性被称为属性的存取器

  • 读取属性的方法叫做setter方法，设置属性的方法叫做getter方法

  • 示例：

class Person{

private _name: string;

constructor(name: string){

this._name = name;

}

get name(){

return this._name;

}

set name(name: string){

this._name = name;

}

}

const p1 = new Person(‘孙悟空’);

console.log(p1.name); // 通过getter读取name属性

p1.name = ‘猪八戒’; // 通过setter修改name属性

  • 静态属性

  • 静态属性（方法），也称为类属性。使用静态属性无需创建实例，通过类即可直接使用

  • 静态属性（方法）使用static开头

  • 示例：

class Tools{

static PI = 3.1415926;

static sum(num1: number, num2: number){

return num1 + num2

}

}

console.log(Tools.PI);

console.log(Tools.sum(123, 456));

  • this

  • 在类中，使用this表示当前对象

2)继承

  • 继承时面向对象中的又一个特性

  • 通过继承可以将其他类中的属性和方法引入到当前类中

  • OCP((Open Closed Principle)) 开闭原则 拓展开放，修改关闭

  • 示例：

class Animal{

name: string;

age: number;

constructor(name: string, age: number){

this.name = name;

this.age = age;

}

}

class Dog extends Animal{

bark(){

console.log(${this.name}在汪汪叫！);

}

}

const dog = new Dog(‘旺财’, 4);

dog.bark();

  • 通过继承可以在不修改类的情况下完成对类的扩展

  • 重写

  • 发生继承时，如果子类中的方法会替换掉父类中的同名方法，这就称为方法的重写

  • 示例：

class Animal{

最后

喜欢的话别忘了关注、点赞哦~

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

前端校招面试题精编解析大全

ge);

this.name = name; //子类中可以修改

}

}

const p = new Person(‘孙悟空’, 18);

p.name = ‘猪八戒’;// 不能修改

  • private

class Person{

private name: string;

private age: number;

constructor(name: string, age: number){

this.name = name; // 可以修改

this.age = age;

}

sayHello(){

console.log(大家好，我是${this.name});

}

}

class Employee extends Person{

constructor(name: string, age: number){

super(name, age);

this.name = name; //子类中不能修改

}

}

const p = new Person(‘孙悟空’, 18);

p.name = ‘猪八戒’;// 不能修改

  • 属性存取器

  • 对于一些不希望被任意修改的属性，可以将其设置为private

  • 直接将其设置为private将导致无法再通过对象修改其中的属性

  • 我们可以在类中定义一组读取、设置属性的方法，这种对属性读取或设置的属性被称为属性的存取器

  • 读取属性的方法叫做setter方法，设置属性的方法叫做getter方法

  • 示例：

class Person{

private _name: string;

constructor(name: string){

this._name = name;

}

get name(){

return this._name;

}

set name(name: string){

this._name = name;

}

}

const p1 = new Person(‘孙悟空’);

console.log(p1.name); // 通过getter读取name属性

p1.name = ‘猪八戒’; // 通过setter修改name属性

  • 静态属性

  • 静态属性（方法），也称为类属性。使用静态属性无需创建实例，通过类即可直接使用

  • 静态属性（方法）使用static开头

  • 示例：

class Tools{

static PI = 3.1415926;

static sum(num1: number, num2: number){

return num1 + num2

}

}

console.log(Tools.PI);

console.log(Tools.sum(123, 456));

  • this

  • 在类中，使用this表示当前对象

2)继承

  • 继承时面向对象中的又一个特性

  • 通过继承可以将其他类中的属性和方法引入到当前类中

  • OCP((Open Closed Principle)) 开闭原则 拓展开放，修改关闭

  • 示例：

class Animal{

name: string;

age: number;

constructor(name: string, age: number){

this.name = name;

this.age = age;

}

}

class Dog extends Animal{

bark(){

console.log(${this.name}在汪汪叫！);

}

}

const dog = new Dog(‘旺财’, 4);

dog.bark();

  • 通过继承可以在不修改类的情况下完成对类的扩展

  • 重写

  • 发生继承时，如果子类中的方法会替换掉父类中的同名方法，这就称为方法的重写

  • 示例：

class Animal{

最后

喜欢的话别忘了关注、点赞哦~

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

前端校招面试题精编解析大全

2401_84438160
关注
  • 8
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端面试资料2024年大厂进阶秘诀
04-22
前端面试资料2024年，大厂进阶秘诀，面试通过秘诀，这个年纪你怎么敢偷懒的？？快背起来！ 1.JavaScript面试真题-210页 2.CSS面试真题-127页 3.ES6面试真题-84页 4.Vue面试真题-237页 5.Vue3面试真题-44页 6.React...
2024年高频八股文面试题合集
04-29
前端工程化理解（模块化、组件化、规范化、自动化） JS 的模块化、css 的模块化、资源的模块化 从 UI 拆分下来的每个包含模板(HTML)+样式(CSS)+逻辑(JS)功能完备的结构单元 HTML 规范、CSS 规范、JS 规范、图片规范...
2024年最新前端面试题汇总大全二（含答案超详细，Vue，TypeScript，React，微信小程序，Webpack 汇总篇）-- 持续更新
jyl919221lc的博客
05-29 5798
vue指令vue2局部注册：directive选项'focus': {el.focus()全局注册：main.jsel.focus()})生命周期bind：只调用一次，指令第一次绑到元素调用，用于初始化inserted：被绑定元素插入父节点时调用update：所在组件vnode更新调用componentUpdate：指令在组件的vnode及子组件的vnode全部更新完调用ubind：只调用一侧，指令解绑vue3局部注册。
2024 前端面试题
bigb的博客
01-11 770
24、TS type和interface有什么区别，有什么相互之间做不到的吗？7、如果有3万条数据让你渲染，你会怎么做才能满足性能？12、让别人继承你的类，需要实现特定的方法，应该怎么做。28、手上有1、2、5块钱，要组成20块钱有几种方法？29、一个容积5升和6升的桶如何组成3升的水？3、vue2 和 vue3 底层有哪些不同？8、vue jsx的语法有接触过吗？4、vue从模板到编译的这个过程？10、js中实现继承的方式有哪些？1、关于前端异常比较深刻的有？17、js的设计模式了解多少？
vue3的面试题
jiang7701037的博客
11-20 5564
vue3的面试题
25 道常见的 TypeScript 面试题及答案
LuckyWinty的博客
03-10 6541
前端Q我是winty，专注分享前端知识和各类前端资源，乐于分享各种有趣的事，关注我，一起做个有趣的人～公众号点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群编辑整理 | 杨小爱TypeScript 是一种静态类型的、面向对象的编程语言，它是 JavaScript 框架之一，它添加了可选的静态类型和其他功能。它由微软开发和维护，并迅速成为世界上最流行的编程框架之一。因此，在今天这篇文章，...
面试题-TS(二)：如何定义 TypeScript 中的变量和函数类型？
weixin_42560424的博客
07-25 887
在TypeScript中，我们可以使用冒号(:)来指定变量的类型。布尔类型（boolean）：表示true或false的值。数字类型（number）：表示数字值。字符串类型（string）：表示文本值。数组类型（array）：表示一组具有相同类型的值。元组类型（tuple）：表示一个固定长度的数组，其中每个元素可以有不同的类型。枚举类型（enum）：表示一组命名的常量值。任意类型（any）：表示任何类型的值，相当于放宽了类型检查。空类型（void）：表示没有返回值的函数。");
前端大厂最新面试题-typescript_javascript.docx
06-06
前端大厂最新面试题- TypeScript_JavaScript.docx TypeScript 是 JavaScript 的超集，支持 ES6 语法，支持面向对象编程的概念，如类、接口、继承、泛型等。TypeScript 是一种静态类型检查的语言，提供了类型注解，...
10.Typescript面试真题-62页.7z
02-28
"2024年最新前端面试题大全" 描述中提到这是2024年的最新资料，意味着这些面试问题反映了当前前端开发领域，特别是TypeScript的最新趋势和技术需求。"大全"一词暗示这份资料可能覆盖了前端面试的各种主题，包括...
最全前端面试题，前端面试刷题必备
10-02
这份"最全前端面试题"资源涵盖了多个关键的技术领域，包括HTML、CSS、JavaScript、Vue、React、Node.js、TypeScript、Webpack、数据结构与算法、计算机网络以及浏览器原理等。以下是这些知识点的详细说明： 1. **...
面试题-TS(五)：TypeScript 中的模块是什么？如何导入和导出模块？
weixin_42560424的博客
07-25 1054
模块是TypeScript中非常重要的特性，它是代码组织和模块化的利器，让我们能够更好地组织、管理和共享我们的代码。通过模块化的开发方式，我们能够构建出更健壮、可维护和可扩展的应用程序。
50个最新TypeScript面试题合集 – TypeScript开发教程
热门推荐
weixin_44727080的博客
02-24 1万+
以下是最常见的Typescript面试问题和答案。 js项目如何升级为ts？有何影响？(参考:nodejs项目升级为ts - Thyiad - 博客园) ts 基础类型都哪些，他们跟js的区别 ts为什么会流行？与ECMA新规范的关系？ tslint都能配置哪些功能？对开发流程有何影响？ 如何使用js实现类型约束，枚举等特性么？(仅需要在 变量、函数的参数、函数的返回值 位置加上...:类型...) 如何理解接口，泛型? 1、什么是Typescript? TypeScript是一种由微软开发和
2024年前端面试题JS+TS篇
xiaoliyo_的博客
04-28 932
我希望我的解释和答案都是通俗易懂的
【面试题】 3 个加强理解TypeScript 的面试问题_typescript 面试代码解析
2401_84435739的博客
05-09 336
根据路线图上的重点去进行有针对性的学习，在学习过程中，学会写笔记，做总结。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】html5 / css3 学习笔记JavaScript 学习笔记Vue 学习笔记复制代码});try {复制代码这个问题不仅要检查有关数据验证的知识，还要检查候选人对技术堆栈的了解程度，可以通过哪些方式完成等。
Typescript面试题
qq_48962360的博客
10-11 1202
ts面试题
2024前端面试题汇总
yuanbotao219的博客
01-31 1406
前端面试题
TypeScript 系列（四），2024字节跳动前端面试真题解析
碧海朝天素
03-20 310
元组在本质上也是数组，上面提到数组可以指定元素的类型，元组则是特殊的数组，它是一个为每个元素指定类型的数组！枚举类型，跟 Java 中的枚举类型一致，列举所有可选值的容器。表示方法没有返回值，与 Java 中的 void 是一致的。将变量声明为一个可接受任意类型的变量，与不指定类型一致。//也可以通过索引来取值，默认从0开始，也可以自定义。//也可以通过索引来取值，默认从0开始，也可以自定义。//可以通过 . 的方式来取到枚举里面的值。//可以通过 . 的方式来取到枚举里面的值。
TypeScript基础面试题2024最新
qq_42962459的博客
03-06 657
答案：TypeScript可以编译成纯JavaScript，这意味着它可以与现有的JavaScript代码一起工作。TypeScript编译器会处理类型声明和语法扩展，生成可在浏览器和Node.js环境中运行的JavaScript代码。答案：TypeScript是JavaScript的超集，它添加了可选的静态类型和基于类的面向对象编程。答案：TypeScript支持JavaScript的异常处理机制，使用。问题3：TypeScript如何与JavaScript互操作？
2024年Web前端最新【面试题】 那些你不知道的Typescript面试题，面试复盘总结怎么写
最新发布
2401_84447065的博客
05-12 234
由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】[外链图片转存中…(img-N2m4WV5e-1715447821494)][外链图片转存中…(img-PdfVXWvW-1715447821495)]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值