《TypeScript 面试八股:高频考点与核心知识点详解》

“你好啊!能把那天没唱的歌再唱给我听吗? ”


前言

因为主包还是主要学习js,ts浅浅的学习了一下,在简历中我也只会写了解,所以我写一些比较基础的八股,如果是想要更深入的八股的话还是建议找别人的。

Ts基础

为社么要使用ts?ts相对于js的优势在哪?

TypeScript是JS的超集,包括所有的JS规范版本。同时拥有强大的类型系统,包括泛型。是一个面向对象的语言,提供类,接口和模块。

TS对JS的改进主要是静态类型检查(强类型语言)“静态类型更有利于构建大型应用”。 同时TS多了接口,泛型这些JS所没有的特性,内置的数据类型也比较多。

TypeScript的内置数据类型有哪些

在Typescript中,内置的数据类型也称为原始数据类型。

  • boolean(布尔类型)
  • number(数字类型)
  • string(字符串类型)
  • void 类型
  • null 和 undefined 类型
  • array(数组类型)
  • tuple(元组类型):允许表示一个已知元素数量和类型的数组,各元素的类型不必相同
  • enum(枚举类型):enum类型是对JavaScript标准数据类型的一个补充,使用枚举类型可以为一组数值赋予友好的名字
  • any(任意类型)
  • never 类型
  • object 对象类型

TypeScript 中 const 和 readonly 的区别?

const可以防止变量的值被修改,在运行时检查,使用const变量保存的数组,可以使用push,pop等方法。

readonly可以防止变量的属性被修改,在编译时检查,使用Readonly Array声明的数组不能使用push,pop等方法

TypeScript 中 any 类型的作用是什么?

为编程阶段还不清楚类型的变量指定一个类型。 这些值可能来自于动态的内容,比如来自用户输入或第三方代码库(不确定用户输入值的类型,第三方代码库是如何工作的)。 这种情况下,我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。使用any就失去了ts带来的类型检查。

any的问题

  1. 类型污染:any类型的对象会导致后续的属性类型都会变成any
  2. 使用不存在的属性或方法而不报错

TypeScript 中 any、never、unknown、null & undefined 和 void 有什么区别?

  • any: 动态的变量类型(失去了类型检查的作用)。
  • never: 永不存在的值的类型。例如:never 类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型。
  • unknown: 任何类型的值都可以赋给 unknown 类型,但是 unknown 类型的值只能赋给 unknown 本身和 any 类型。
  • null & undefined: 默认情况下 null 和 undefined 是所有类型的子类型。 就是说你可以把 null 和 undefined 赋值给 number 类型的变量。当你指定了 --strictNullChecks 标记,null 和 undefined 只能赋值给 void 和它们各自。
  • void: 没有任何类型。例如:一个函数如果没有返回值,那么返回值可以定义为void。

TS中any和unknown有什么区别?

unknown 和 any 的主要区别是 unknown 类型会更加严格:在对 unknown 类型的值执行大多数操作之前,我们必须进行某种形式的检查。而在对 any 类型的值执行操作之前,我们不必进行任何检查。

any 和 unknown 都是顶级类型,但是 unknown 更加严格,不像 any 那样不做类型检查,反而 unknown 因为未知性质,不允许访问属性,不允许赋值给其他有明确类型的变量。

我在之前的博客中提到了:unkonw因为我们不知道他里面是什么,所以我们不能对他进行任何操作。

解释一下TypeScript中的枚举

枚举就是一个对象的所有可能取值的集合(和数学中的思想一样);

enum Day {SUNDAY, MONDAY,TUESDAY, WEDNESDAY,THURSDAY,FRIDAY,SATURDAY}

TypeScript 中如何联合枚举类型的 Key?————用下标

 enum Status {xiaoming, xiaohong, xiaogang,}
​console.log(Status.xiaoming,Status[0]);console.log(Status.xiaohong,Status[1]);console.log(Status.xiaogang,Status[2]);//输出: 0 xiaoming//      1 xiaohong//      2 xiaogang

keyof 和 typeof 关键字的作用?

keyof 关键字

keyof 用于获取对象类型的键的联合类型。它可以让你从一个对象类型中提取出所有键的名称,并将它们组合成一个联合类型。

interface Person {name: string;age: number;address: string;
}type PersonKeys = keyof Person; // "name" | "age" | "address"function getProperty(obj: Person, key: PersonKeys) {return obj[key];
}const person: Person = {name: "Alice",age: 30,address: "123 Main St"
};console.log(getProperty(person, "name")); // 输出: Alice
console.log(getProperty(person, "age")); // 输出: 30

typeof 关键字

typeof 用于获取变量或表达式的类型。它可以让你在类型上下文中引用一个变量的类型。

const person = {name: "Alice",age: 30,address: "123 Main St"
};type PersonType = typeof person;
// PersonType 的类型为:
// {
//   name: string;
//   age: number;
//   address: string;
// }function printPerson(p: PersonType) {console.log(p.name, p.age, p.address);
}printPerson(person); // 输出: Alice 30 123 Main St

TS中的泛型是什么

泛型允许我们在编写代码时使用一些以后才指定的类型,在定义函数,接口或者类的时候,不预先定义好具体的类型,而在使用的时候在指定类型的一种特性。

泛型的主要作用是:

  1. 提高代码的复用性:可以编写适用于多种类型的通用代码。
  2. 增强类型安全性:通过类型参数,可以在编译时捕获类型错误。
  3. 减少冗余代码:避免为每种类型编写单独的函数或类。

泛型函数

泛型函数可以接受任意类型的参数,并返回相应类型的值。

function identity<T>(arg: T): T {return arg;
}// 使用泛型函数
let output1 = identity<string>("Hello"); // 类型为 string
let output2 = identity<number>(42);      // 类型为 number

泛型接口

泛型接口允许你定义可以适用于多种类型的接口

interface KeyValuePair<K, V> {key: K;value: V;
}// 使用泛型接口
let pair1: KeyValuePair<string, number> = { key: "age", value: 30 };
let pair2: KeyValuePair<number, boolean> = { key: 1, value: true };

泛型类

泛型类允许你创建可以处理多种类型的类。

class Box<T> {private value: T;constructor(value: T) {this.value = value;}getValue(): T {return this.value;}
}// 使用泛型类
let box1 = new Box<string>("Hello"); // 类型为 Box<string>
let box2 = new Box<number>(42);      // 类型为 Box<number>

在这个例子中,Box 类可以存储任意类型的值,并通过 getValue 方法返回该值。

any和泛型的区别?

泛型有类型推断,编译器会根据传入的参数自动地帮助我们确定T的类型

any则是不检验

接口和Type

TypeScript 中同名的 interface 或者同名的 interface 和 class 可以合并吗?

同名的interface会自动合并,同名的interface和class会自动聚合。

接口和类型别名的区别?

两者都可以用来描述对象或函数的类型。与接口不同,类型别名还可以用于其他类型,如基本类型(原始值)、联合类型、元组。

TypeScript 中 type 和 interface 的区别?

相同点:

  1. 都可以描述 '对象' 或者 '函数'
  2. 都允许拓展(extends):interface 和 type 都可以拓展,并且两者并不是相互独立的,也就是说 interface 可以 extends type, type 也可以 extends interface 。 虽然效果差不多,但是两者语法不同。

不同点:

特性interfacetype
扩展方式通过 extends 扩展通过 &(交叉类型)扩展
声明合并支持不支持
适用场景对象类型、类的接口任何类型(基本类型、联合类型、元组等)
性能在大型项目中稍好处理复杂类型时可能稍慢
兼容性支持 implements不能直接用于 implements
灵活性较低,只能定义对象或函数类型较高,可以定义任何类型

 类

TS中什么是方法重载?

方法重载是指在一个类中定义多个同名的方法,但要求每个方法具有不同的参数的类型或参数的个数。 基本上,它在派生类或子类中重新定义了基类方法。

方法覆盖规则:

  • 该方法必须与父类中的名称相同。
  • 它必须具有与父类相同的参数。
  • 必须存在IS-A关系或继承。

TS中的类及其特性

在 TypeScript 中,​类(Class)​ 是面向对象编程(OOP)的核心概念之一。TypeScript 的类不仅支持 ES6 的类特性,还增加了一些额外的功能,如访问修饰符、抽象类、只读属性等。

1. ​基本语法

TypeScript 中定义类的语法与 ES6 类似,使用 class 关键字。

class Person {// 属性name: string;age: number;// 构造函数constructor(name: string, age: number) {this.name = name;this.age = age;}// 方法greet() {console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);}
}// 创建类的实例
const person = new Person("Alice", 30);
person.greet(); // 输出: Hello, my name is Alice and I'm 30 years old.

2. ​访问修饰符

TypeScript 提供了三种访问修饰符,用于控制类成员的访问权限:

  • ​**public**​(默认):成员可以在任何地方访问。
  • ​**private**:成员只能在类内部访问。
  • ​**protected**:成员可以在类内部和子类中访问。
class Person {public name: string; // 默认是 publicprivate age: number; // 只能在类内部访问protected gender: string; // 可以在子类中访问constructor(name: string, age: number, gender: string) {this.name = name;this.age = age;this.gender = gender;}public greet() {console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);}
}class Employee extends Person {constructor(name: string, age: number, gender: string) {super(name, age, gender);console.log(this.gender); // 可以访问 protected 成员// console.log(this.age); // 错误: age 是 private 成员}
}const person = new Person("Alice", 30, "female");
console.log(person.name); // 可以访问 public 成员
// console.log(person.age); // 错误: age 是 private 成员
// console.log(person.gender); // 错误: gender 是 protected 成员

3. ​只读属性

使用 readonly 关键字可以将属性标记为只读,只能在构造函数中初始化,之后不可修改。

class Person {readonly name: string;constructor(name: string) {this.name = name;}changeName(newName: string) {// this.name = newName; // 错误: name 是只读属性}
}const person = new Person("Alice");
// person.name = "Bob"; // 错误: name 是只读属性

4. ​静态成员

静态成员属于类本身,而不是类的实例。使用 static 关键字定义静态成员。

class MathUtils {static PI = 3.14;static calculateArea(radius: number) {return this.PI * radius * radius;}
}console.log(MathUtils.PI); // 输出: 3.14
console.log(MathUtils.calculateArea(5)); // 输出: 78.5

5. ​抽象类

抽象类不能被实例化,只能被继承。它可以包含抽象方法(没有实现的方法)和具体方法。

abstract class Animal {abstract makeSound(): void; // 抽象方法,子类必须实现move() {console.log("Moving...");}
}class Dog extends Animal {makeSound() {console.log("Woof!");}
}const dog = new Dog();
dog.makeSound(); // 输出: Woof!
dog.move(); // 输出: Moving...
// const animal = new Animal(); // 错误: 不能实例化抽象类

6. ​getter 和 setter

可以使用 get 和 set 关键字定义属性的访问器。

class Person {private _age: number;constructor(age: number) {this._age = age;}get age() {return this._age;}set age(value: number) {if (value >= 0) {this._age = value;} else {throw new Error("Age cannot be negative.");}}
}const person = new Person(30);
console.log(person.age); // 输出: 30
person.age = 25;
console.log(person.age); // 输出: 25
// person.age = -5; // 抛出错误: Age cannot be negative.

7. ​类的继承

使用 extends 关键字实现类的继承,子类可以继承父类的属性和方法。

class Animal {constructor(public name: string) {}move(distance: number) {console.log(`${this.name} moved ${distance} meters.`);}
}class Dog extends Animal {bark() {console.log("Woof! Woof!");}
}const dog = new Dog("Buddy");
dog.move(10); // 输出: Buddy moved 10 meters.
dog.bark(); // 输出: Woof! Woof!

8. ​方法重写

子类可以重写父类的方法。

class Animal {move() {console.log("Moving...");}
}class Dog extends Animal {move() {console.log("Running...");}
}const dog = new Dog();
dog.move(); // 输出: Running...

9. ​构造函数重载

TypeScript 支持构造函数重载,可以根据不同的参数创建对象。

class Point {constructor(public x: number, public y: number);constructor(x: number, y: number, public z: number);constructor(public x: number, public y: number, public z?: number) {// 实现逻辑}
}const point1 = new Point(1, 2);
const point2 = new Point(1, 2, 3);

10. ​类与接口

类可以实现接口,接口可以定义类的结构。

interface Animal {name: string;makeSound(): void;
}class Dog implements Animal {constructor(public name: string) {}makeSound() {console.log("Woof!");}
}const dog = new Dog("Buddy");
dog.makeSound(); // 输出: Woof!

TS原理 

简单介绍一下 TypeScript 模块的加载机制?

假设有一个导入语句 import { a } from "moduleA";

  1. 首先,编译器会尝试定位需要导入的模块文件,通过绝对或者相对的路径查找方式;
  2. 如果上面的解析失败了,没有查找到对应的模块,编译器会尝试定位一个外部模块声明(.d.ts);
  3. 最后,如果编译器还是不能解析这个模块,则会抛出一个错误 error TS2307: Cannot find module 'moduleA'.

对 TypeScript 类型兼容性的理解?

TypeScript 类型兼容性指的是 TypeScript 中的类型系统能够自动进行类型检查和类型推导,以确保类型的兼容性。具体来说,如果两个类型 A 和 B 满足一定的关系,那么 A 类型的变量或参数可以赋值给 B 类型的变量或参数。

TypeScript 的类型兼容性规则基于结构子类型化的原则,即只要目标类型(被赋值的类型)的成员属性包含来源类型(待赋值的类型)的成员属性,或者来源类型可以转换为目标类型,就认为这两个类型是兼容的。

例如,下面代码中的 a 变量和 b 变量都是 Animal 类型,但是它们的属性不完全相同:

interface Animal {name: string;age: number;
}class Cat implements Animal {name = 'Tom';age = 2;type = 'mammal';
}let a: Animal = { name: 'Kitty', age: 1 };
let b: Animal = new Cat();

尽管 Cat 类型比 Animal 类型具有更多的属性,但是由于其中的属性包含了 Animal 的所有属性,因此 Cat 是兼容于 Animal 的。因此,let b: Animal = new Cat() 是合法的。

在 TypeScript 中,类型兼容性是非常重要的,因为它允许我们编写更加灵活和可复用的代码,同时保证类型的安全性。在使用类型兼容性时,需要注意一些细节,如类型保护等,以确保程序的正确性。

TypeScript 中的 this 和 JavaScript 中的 this 有什么差异?

  1. TypeScript:noImplicitThis: true 的情况下,必须去声明 this 的类型,才能在函数或者对象中使用this。
  2. Typescript 中箭头函数的 this 和 ES6 中箭头函数中的 this 是一致的。

tsconfig.json有什么作用?

tsconfig.json文件是JSON格式的文件。

在tsconfig.json文件中,可以指定不同的选项来告诉编译器如何编译当前项目。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/39848.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

热门面试题第14天|Leetcode 513找树左下角的值 112 113 路径总和 105 106 从中序与后序遍历序列构造二叉树 (及其扩展形式)以一敌二

找树左下角的值 本题递归偏难&#xff0c;反而迭代简单属于模板题&#xff0c; 两种方法掌握一下 题目链接/文章讲解/视频讲解&#xff1a;https://programmercarl.com/0513.%E6%89%BE%E6%A0%91%E5%B7%A6%E4%B8%8B%E8%A7%92%E7%9A%84%E5%80%BC.html 我们来分析一下题目&#…

Qt窗口控件之浮动窗口QDockWidget

浮动窗口QDockWidget QDockWidget 用于表示 Qt 中的浮动窗口&#xff0c;浮动窗口与工具栏类似&#xff0c;可以停靠在主窗口的上下左右位置&#xff0c;也可以单独拖出来作浮动窗口。 1. QDockWidget方法 方法说明setWidget(QWiget*)用于使浮动窗口能够被添加控件。setAllo…

Web前端之JavaScript的DOM操作冷门API

MENU 前言1、Element.checkVisibility()2、TreeWalker3、Node.compareDocumentPosition()4、scrollIntoViewIfNeeded()5、insertAdjacentElement()6、Range.surroundContents()7、Node.isEqualNode()8、document.createExpression()小结 前言 作为前端开发者&#xff0c;我们每…

【Linux-驱动开发-系统调用流程】

Linux-驱动开发-系统调用流程 ■ Linux-系统调用流程■ Linux-file_operations 结构体 ■ Linux-系统调用流程 ■ Linux-file_operations 结构体 在 Linux 内核文件 include/linux/fs.h 中有个叫做 file_operations 的结构体&#xff0c;此结构体就是 Linux 内核驱动操作函数集…

ToolsSet之:ASCII字符表和国际标准代码表

ToolsSet是微软商店中的一款包含数十种实用工具数百种细分功能的工具集合应用&#xff0c;应用基本功能介绍可以查看以下文章&#xff1a; Windows应用ToolsSet介绍https://blog.csdn.net/BinField/article/details/145898264 ToolsSet中Other菜单下的ASCII Table是一个ASCII…

C语言判断闰年相关问题

一、简单闰年问题引入 写一个判断年份是否为闰年的程序? 运行结果: 二、闰年问题进阶 使用switch语句根据用户输入的年份和月份,判断该月份有多少天? 第一种写法(判断年份写在switch的case的里面): 运行结果: 第二种解法(先判断闰年): 运行结果: 三、补充 switch中的ca…

基于Java的班级事务管理系统(源码+lw+部署文档+讲解),源码可白嫖!

摘要 随着世界经济信息化、全球化的到来和电子商务的飞速发展&#xff0c;推动了很多行业的改革。若想达到安全&#xff0c;快捷的目的&#xff0c;就需要拥有信息化的组织和管理模式&#xff0c;建立一套合理、畅通、高效的线上管理系统。当前的班级事务管理存在管理效率低下…

javaweb后端登录功能cookie session

登录功能 只需要这几个&#xff0c;用原来的返回太多用不上的信息&#xff0c;新写一个类只返回登录的结果 Ctrli 实现service的方法 和mapper相关的起名不用和业务一样 登录校验 登录校验思路 会话技术 cookie 创建cookie对象&#xff0c;响应给浏览器 服务端设置的…

《可爱风格 2048 游戏项目:HTML 实现全解析》

一、引言 在如今的数字化时代&#xff0c;小游戏以其简单易上手、趣味性强的特点深受大家喜爱。2048 游戏作为一款经典的数字合并游戏&#xff0c;拥有庞大的玩家群体。本文将详细介绍一个用单文件 HTML 实现的可爱风格 2048 游戏项目&#xff0c;它不仅具备传统 2048 游戏的基…

UART转APB模块ModelSim仿真

一、简介 之前介绍过一个UART转AHB模块&#xff0c;这个代码的框架有个好处&#xff0c;就是FPGA内总线接口比较容易修改成其他总线接口。下图是UART转AHB模块中子模块uart_ahb_mst的框图&#xff0c;主要有三个状态机&#xff1a; &#xff08;1&#xff09; UART_RX_FSM将接收…

ReAct: Synergizing Reasoning and Acting in Language Models

https://zhuanlan.zhihu.com/p/624003116https://zhuanlan.zhihu.com/p/624003116https://github.com/apssouza22/ai-agent-react-llm/tree/main

尝试在软考62天前开始成为软件设计师-信息系统安全

安全属性 保密性:最小授权原则(能干活的最小权限)、防暴露(隐藏)、信息加密、物理保密完整性(防篡改):安全协议、校验码、密码校验、数字签名、公证 可用性:综合保障( IP过滤、业务流控制、路由选择控制、审计跟踪)不可抵赖性:数字签名 对称加密 DES :替换移位 3重DESAESR…

IPv4向IPv6过渡

主要有三种过渡技术 隧道技术&#xff1a;用于解决IPv6节点之间通过IPv4网络进行通信的问题协议翻译技术&#xff1a;使纯ipv6节点与纯Ipv4节点之间进行通信双协议栈技术&#xff1a;使ipv4与ipv6可以共存于同一台设备和同一个网络中 隧道技术 把ipv6分组封装到Ipv4分组中&a…

算法题(107):function

审题&#xff1a; 本题需要我们根据题目写出递归函数&#xff0c;并返回递归结果 时间复杂度&#xff1a;本题的数据范围虽然很大&#xff0c;但是由于条件2的限制&#xff0c;数据量可以看成是20&#xff0c;于是我们就可以使用递归函数了 思路&#xff1a; 方法一&#xff1a…

【江协科技STM32】BKP备寄存器RTC实时时钟(学习笔记)

BKP备寄存器 BKP简介 BKP&#xff08;Backup Registers&#xff09;备份寄存器BKP可用于存储用户应用程序数据。当VDD&#xff08;2.0~3.6V&#xff09;电源被切断&#xff0c;他们仍然由VBAT&#xff08;1.8~3.6V&#xff09;维持供电。当系统在待机模式下被唤醒&#xff0…

leetcode 之(移除元素)

给你一个数组 nums 和一个值 val&#xff0c;你需要 原地 移除所有数值等于 val 的元素。元素的顺序可能发生改变。然后返回 nums 中与 val 不同的元素的数量。 假设 nums 中不等于 val 的元素数量为 k&#xff0c;要通过此题&#xff0c;您需要执行以下操作&#xff1a; 更改…

Spring MVC 请求与响应

目录 一、Spring MVC 请求 1.1 请求映射核心注解&#xff1a;RequestMapping 1.1.1 作用范围 1.1.2 属性详解 1.2 请求参数绑定机制 1.2.1 绑定规则 1.2.2 特殊场景处理 二、Spring MVC 响应 2.1 视图返回机制 2.1.1 String类型返回 2.1.2 ModelAndView对象 2.2 JS…

spring-security原理与应用系列:核心过滤器

目录 运行机制 WebSecurity SecurityFilterChain SecurityFilterChains FilterChainProxy VirtualFilterChain 内部结构 类图 FilterChainProxy FilterChain VirtualFilterChain 小结 紧接上一篇文章&#xff0c;这一篇我们来看看FilterChainProxy类的运行机制及内…

Android之卡片式滑动

文章目录 前言一、效果图二、实现步骤1.主界面xml2.自定义的viewpage3.卡片接口类4.阴影和缩放变化类5.卡片adapter6.卡片adapter的xml7.style8.CardItem9.activity实现10.指示器drawable 总结 前言 对于这个需求&#xff0c;之前的项目也有做过&#xff0c;但是过于赶项目就没…

字典树与01trie

字典树简介 当我们通过字典查一个字或单词的时候&#xff0c;我们会通过前缀或关键字的来快速定位一个字的位置&#xff0c;进行快速查找。 字典树就是类似字典中索引表的一种数据结构&#xff0c;能够帮助我们快速定位一个字符串的位置。 字典树是一种存储字符串的数据结构…