TypeScript常见基础面试题

已于 2025-05-19 16:59:13 修改
阅读量244 收藏
点赞数 2
分类专栏： Typescript学习 文章标签： typescript javascript 前端
于 2025-05-09 13:21:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weiwei_zhang2020/article/details/147810074
版权

TS有什么优点和缺点，适应场景是什么

静态类型
有类型错误，编译时就报错(而非运行时)
智能提示，提高开发效率和稳定性

缺点：

有一定学习成本
某些情况下，类型定义过于混乱，可读性不好
类型设计过于灵活和松散，且有“万恶”的any
应用不规范，则变成“anyscript”

适用场景：

大型项目，业务复杂，维护人员多
逻辑性比较强的代码，需要类型更稳固
组内要有至少一个懂TS 的技术leader负责把控代码规范

TS的基础类型有哪些，数组和元组有什么区别

基础类型:
boolean
symbol
number
undefined
string
null
其他类型：
数组 Array和元组Tuple
枚举
对象和函数(一般是自定义的)
//数组单一类型
const arr1:number[]=[1,2,34,4]
const arr2:Array<number>=[10,20,30] //泛型
//元祖 多个类型
const x:[string,number]=['a',1]
//枚举(本质就是JS对象)
enum Color{
    Red,
    Green,
    Blue
}
const c:Color=Color.Blue
//对象和函数
interface User{
    name:string,
    age:number,
    sayHi:(a:string)=>{}
}

const user:User={
    name:'aa',
    age:90,
    sayHi(a){return a}
}

any void never unknown 区别

any : 不进行类型检查 比较危险的情况
void ： 和 any 相反，没有类型 一般配合函数一起使用 function f1(): void {}
never ： 永远不存在的类型  function err(message:string):never{throw new Error(message)}
unknown ：未知类型 更加安全的any 
// as 手动类型转换，告诉 TS 编译器:我知道 b的类型，我对安全负责
const b: unknown = 100
;(b as string).length

TS 访问修饰符有哪几个?

public (默认)-全部可访问
protected - 自己和派生类可访问 派生类就是继承自己的类
private - 只有自己可访问

代码演示

class Person {
  public name: string = ''
  protected age: number = 0
  private girlFriend: string
  constructor(name: string, age: number) {
    this.name = name
    this.age = age
    this.girlFriend = '小张'
  }
}
class Employee extends Person {
  constructor(name: string, age: number) {
    super(name, age)
  }
  public getInfo() {
    console.log(this.name)
    console.log(this.age)
  }
}

const x = new Employee('x', 200)
console.log(x.name)
//面向对象三大要点：继承 封装 多态(函数重载)

TS私有属性# 和 private 有什么区别

# 属性，不能在构造函数参数中定义
private 属性，可通过as any 强制获取，但#属性不行
class Person {
  #salary: number
  constructor(private name: string, salary: number) {
    this.#salary = salary
  }
  print() {
    console.log(this.#salary)
    console.log(this.name)
  }
}
const p = new Person('x', 5000)
console.log((p as any).name)

TS中type和interface有何区别，如何选择

type和interface的共同点：
都可以描述一个对象结构
都可以被class实现
都可以被扩展
interface UserInfo {
  name: string
  age: number
  getName: () => string
}

const userInfo: UserInfo = {
  name: 'zs',
  age: 90,
  getName() {
    return 'sss'
  }
}
console.log(userInfo.age)

//使用type

type UserType = {
  name: string
  age: number
  getName: () => string
}

const userType: UserType = {
  name: 'zs',
  age: 90,
  getName() {
    return 'ttt'
  }
}

class UserClass implements UserInfo {
  name = 'ccc'
  age = 20
  getName() {
    return 'aaa'
  }
}
class UserTypeCLass implements UserType {
  name = 'ccc'
  age = 20
  getName() {
    return 'aaa'
  }
}

type 和 interface 不同点
type 可以声明基础类型
type 可以使用联合类型 交叉类型
type 可以通过 typeof赋值
//type 可以定义基础类型 interface不行
type name = string
type list = Array<string>

总结： type 和 interface 如何选择


初衷:type 定义类型关系，interface 定义数据结构;
但实际使用时，很多时候会模糊不清，没有明确的界限
我的建议:优先使用interface，再使用type(简单明了)

type 和 interface 如何扩展属性?

interface 可以合并重名声明 type 不可以
interface myUser {
  name: string
}
interface myUser {
  age: number
}
//使用
const myuser: myUser = { name: 'zhangsan ', age: 90 }
console.log(myuser.age)

interface 扩展interface / type

interface User1 {
  name: string
}
interface User2 extends User1 {
  age: number
}
const u2: User2 = { name: 'zhangsan ', age: 90 }

//type 也可以通过extends扩展
type User1 = {
  name: string
}
interface User2 extends User1 {
  age: number
}
const u2: User2 = { name: 'zhangsan ', age: 90 }

// type 扩展type / interface

type User3 = {
  name: string
}

type User4 = User3 & {
  age: number
}
const u3: User4 = { name: 'zhangsan ', age: 20 }
//interface type相互扩展
interface User3  {
  name: string
}
type User4 = User3 & {
  age: number
}
const u3: User4 = { name: 'zhangsan ', age: 20 }
console.log(u3)

【附】type 和 interface 的问题，是 TS 设计问题

初衷是好的，但实际使用时引起“选择困难症”引来社区争吵
就像 Vue3 的 ref和 reactive(再对比 React的state和 ref )
好的设计，应该简单明确，而不是设计混乱并说是你不会用

TS 的泛型 Generics 是什么?

//泛型定义到函数 
function fn<T>(arg: T): T {
  return arg
}
const x = fn<number>(100)
//定义数组
const list: Array<number> = [10, 30]
//定义接口
interface userP {
  name: string
  age: number
}
const userp: Array<userP> = [{ name: 'xxx', age: 88 }]
//多个类型
function fn1<T, U>(a: T, b: U) {
  console.log(a, b)
}
fn1<string, number>('x', 10)
//定义在class
class SomeClass<T> {
  name: T
  constructor(name: T) {
    this.name = name
  }
  getName(): T {
    return this.name
  }
}
const s1 = new SomeClass<string>('xxx')
const s2 = new SomeClass<number>(888)

//定义在 type

function fn<T>(arg: T): T {
  return arg
}
const myFn1: <U>(arg: U) => U = fn

// 定义在接口
interface F2<T> {
  (arg: T): T
}
const myFn2: F2<number> = fn

泛型的使用


// 泛型 可以传入任何类型
interface UserPerson {
  name: string
  age: number
}
const u = fn<UserPerson>({ name: 'xx', age: 10 })
console.log(u, 'uuuuu')

//泛型 可以当做任何类型来使用
function fn3<T>(arg: Array<T>) {
  console.log(arg)
}
fn3<string>(['x'])
fn3<number>([20, 30])

// 泛型的扩展属性
interface F5 {
  length: number
}
function fn4<T extends F5>(arg: T) {
  console.log(arg.length)
}
fn4<string>('xxxx')
fn4<number[]>([10, 23])

总结泛型

泛型Generics，是为了通用性和扩展性
泛型定义:函数class interface type
泛型使用:传入任何类型，当做任何类型，扩展其他属性

TS中交叉类型和联合类型是什么

交叉类型
	多个类型合并为一个类型T1 & T2 & T3
interface U1 {
	  name: string
	  age: number
}
interface U2 {
  city: string
  age: number
}
//交叉类型
type UserType1 = U1 & U2

//可获取U1 U2的所有属性(并集)

interface U1 {
  name: number
  city: string
}
interface U2 {
  name: string
  age: number
}
//如果属性类型冲突了 那该属性类型是never
//交叉类型(整合U1 U2的所有属性 并集)
type UserType1 = U1 & U2
const userTest: UserType1 = { name: 'x', city: 'beijing', age: 20 } //注意这里

在这里插入图片描述
要解决上面的问题 需要主动去规避

interface U1 {
  name: string
  city: string
}
interface U2 {
  name: string
  age: number
}
//交叉类型(整合U1 U2的所有属性 并集)
type UserType1 = U1 & U2
const userTest: UserType1 = { name: 'x', city: 'beijing', age: 20 }

基础类型不能交叉 返回never 没有任何意义

type Tx = string & number  //返回never 没有任何意义

联合类型

联合多个类型 T1·| T2|T3 ,
一种“或”的关系
**基础类型可以联合**
interface U1 {
  name: string
  city: string
}
interface U2 {
  name: string
  age: number
}
//在函数使用
function fnT(): U1 | U2 {
  return {
    name: 'x',
    age: 90
  }
}
type Tx = string | number
const xxx: Tx = 100
//错误写法
function fn9(a: string | number){
  console.log(a.length) //这里会报异常
}

TS中有哪些特殊符号，分别是什么意思-part1

TS 特殊符号? ?. ?? ! _  &| #

? 表示可选 
interface PersonInfo {
  name?: string
  age: number
}
const P: PersonInfo = { age: 888 }
function Perosns(a: number, b?: number) {
  console.log(a, b)
}
Perosns(10) // 10 undefined
?. 表示可选链
const infoD: any = {
  info: {
    city: '北京'
  }
}
const city = infoD?.info?.city

?? 表示空值合并运算符(只有左侧是null或者undefined 才会返回右侧 补齐 ||)

const user2: any = {
  name: '张三',
  index: 0
}
const n1 = user2.name ?? '暂无'
const n2 = user2.name || '暂无'
const index1 = user2.index ?? '暂无index'
const index2= user2.index || '暂无index'
console.log(index1 ,index2) // 0 '暂无index'

! 表示非空断言操作符号
function fun(a?: string) {
  return a!.length // 加! 表示你已经知道了a不会是undefined
}
_ 表示数字分隔符
const millon = 100_000_111

总结一下

? 可选属性/参数
! 非空断言符
?.可选链
_ 数字分隔符
?? 空值合并运算符
其他 & | #

TS常见的工具类型有哪些

Partial<T>
interface CityInfo {
  name: string
  age: number
  city: string
}
//使用 Partial 
const u: Partial<CityInfo> = { name: 'x', city: 'dkd' }
//类似于这样的可选结构
interface CityInfo {
  name?: string
  age?: number
  city?: string
}

Required<T>

interface CityInfo {
  name: string
  age: number
  city: string
}
// Required 必填 少一个都不行
const u: Required<CityInfo> = { name: 'x', city: 'dkd', age: 99 }

Pick<T,K> 选取一个或者多个
interface CityInfo {
  name: string
  age: number
  city: string
}
const u: Pick<CityInfo, 'name' | 'age'> = { name: 'x', age: 99 }
//使用
type CityType = Pick<CityInfo, 'name'>
const city1: CityType = { name: 'ddd' }

Omit<T,K>  剔除几个属性 忽略几个
//剔除 city属性
type CityType2 = Omit<CityInfo, 'city'>
const city2: CityType2 = { name: 'ddd', age: 222 }

ReadOnly<T>  设置每个属性为只读
type CityType3 = Readonly<CityInfo>
const city3: CityType3 = { name: 'xx', age: 90, city: 'ddd' }
//CityType3.name='333' 这里就报错了
const 和 readonly 区别

const 和 readonly 区别

 const 定义单独的变量
 readonly 定义属性

TS如何扩展window属性?

declare interface Window {
  test: string
}
Window.test='xxx'

TS 如何扩展一个对象的属性?

interface Obj {
  [key: string]: any
}

const obj: Obj = {
  a: 10,
  b: 20
}
obj.d = 30
obj.c = '90'

TS中如何定义第三方模块的类型?

现在很多插件都是直接用TS 开发的，本身包含了类型定义
常见的第三方插件，都有 @types/xxx包，安装即可使用
其他的，可通过declare module定义类型
【面试系列】TypeScript高频面试题及详细解答
在路上的专栏
06-27 1808
本文汇总了TypeScript的高频面试题，涵盖初级、中级和高级问题，旨在帮助面试者深入理解TypeScript的核心概念和高级用法。初级问题主要涉及基础语法和简单类型，中级问题涉及类型推断、泛型和接口扩展等，高级问题则涵盖高级类型系统、装饰器和性能优化等。详细解答每个问题，并总结了面试中常见的知识点，帮助读者全面准备TypeScript面试。
TypeScript常见面试题第十节
Java、前端、小程序学习笔记、问题汇总、项目实例分享，有需要请联系。
06-09 268
TypeScript是如何在函数中支持可选参数的？可以调试TypeScript文件吗？什么是TypeScript Declare关键字?如何从任何.ts文件生成TypeScript定义文件?什么是tsconfig.json文件吗？
TypeScript面试题汇总
热门推荐
山雀的博客
07-14 1万+
Typescript面试题
【面试题】1617- 总结 30 道常见 TS 面试题
pingan8787
03-08 8107
TypeScript 是 Microsoft 开发的JavaScript 的开源超集，用于在不破坏现有程序的情况下添加附加功能。由于其独特的优势，例如,静态类型和许多速记符号，TypeScript 现在被前端和全栈开发人员广泛用于大型项目。今天，我们将通过30个 TypeScript 面试问题和答案来帮助你准备TypeScript知识 的面试。1、 TypeScript 的主要特点是什么？跨平台：...
常见typescript面试题
triggerV的博客
03-26 1886
假设有一个导入语句：import { a } from “moduleA”（1）编译器通过绝对或相对路径，定位到需要导入的模块文件（2）如果上面解析失败了，没有查找到对应的模块，编译器会尝试定位一个外部模块声明（3）最后，还是不能解析这个模块，就直接抛出一个错误TS Map文件是一个源映射文件，其中有关原始文件的信息。.map是源映射文件，在JS代码和创建它的TS源文件之间进行映射调试调的是TS文件接口用于一个类的话，那接口会表示行为抽象对类的约束，让类去实现接口，类可以实现多个接口。
ts 经典面试
weixin_44009071的博客
02-17 1409
当您比 TypeScript 的类型推断系统更了解变量的类型时，例如在处理联合类型或任何类型时，它会很有用。答案：keyof 运算符生成给定类型的已知公共属性名称的并集，这对于限制可能的字符串值或创建映射类型很有用。typeof 运算符在类型上下文中使用时，获取变量、常量或对象文字的类型，这对于基于现有对象的形状创建类型非常有用，而无需手动重复其结构。答：TypeScript 的类型推断是指编译器在没有显式类型注释的情况下自动推断和分配类型的能力。当您事先不知道对象的键但知道其值的类型时，这是很有用的。
TypeScript 常见的面试题（超详细）
贫僧法号依平
03-25 1万+
TypeScript是一种由微软开发的开源编程语言，它是JavaScript的超集。TypeScript通过添加静态类型类接口和模块等功能，使得在大型应用程序中更容易进行维护和扩展。它可以被编译为纯JavaScript，从而能够在任何支持JavaScript的地方运行。使用TypeScript可以帮助开发人员在编码过程中避免一些常见的错误，并提供更好的代码编辑功能和工具支持。接口是用于描述对象的形状的结构化类型。它定义了对象应该包含哪些属性和方法。
面试篇：（五）TypeScript - 2024 年前端面试技巧与面试题汇总
一名热衷于技术的全栈开发者，专注于前端与后端的全面技术探索。在这里，我将分享我在技术领域的学习与成长，助力更多开发者的进步。
10-24 1107
TypeScript 在前端开发中的作用日益重要，掌握 TypeScript 的基础和进阶知识是成为优秀前端开发者的必备技能。在面试中，面试官通常会从静态类型、类型系统、泛型等基础问题开始，逐渐深入到实际项目中的问题，如类型推断和类型守卫等。因此，准备 TypeScript 面试题时，应注重理论知识与实战应用的结合。熟悉 TypeScript 常见的类型声明和进阶技巧，如泛型、联合类型和类型守卫。掌握 TypeScript 如何在大型项目中提高代码可维护性和可靠性。
【互联网技术】200道高频TypeScript面试题详解：涵盖基础概念、高级特性和最佳实践
最新发布
04-09
内容概要：本文档是《互联网大厂200道高频Typescript面试题.pdf》，涵盖200个与 TypeScript 相关的高频面试题，内容详尽，从 TypeScript 的基本概念到高级特性均有涉及。主要包括 TypeScript 与 JavaScript 的区别、...
TypeScript 常见面试题及实战
weixin_44009071的博客
02-14 685
boolean;console.log(`调用方法：${key}`);// 输出：调用方法：add。，用于约束对象结构，提升可读性和可维护性。：泛型让代码更灵活，适用于组件、函数等。// interface 只能描述对象。// type 可表示联合类型。
Ts相关面试题
杨前露的博客
08-03 2543
1.unknown和any的区别 TypeScript 3.0引入了一个顶级的unknown类型。 1.对照于any，unknown是类型安全的。 2.任何值都可以赋给unknown，但是当没有类型断言或基于控制流的类型细化时unknown不可以赋值给其它类型，除了它自己和any外。 3.同样地，在unknown没有被断言或细化到一个确切类型之前，是不允许在其上进行任何操作的。 let value: unknown; value = true; // OK value =
TS常见面试题
weixin_38984030的博客
03-16 2358
unknown类型可以被赋值给任何类型，但是只有any类型可以被赋值给unknown类型，因为any类型包含了所有类型，而unknown类型则不包含任何类型。JavaScript 是一种动态类型的语言，即变量的类型是在运行时确定的，而 TypeScript 在编译时就能够确定变量的类型，从而可以在开发过程中检测出类型错误，提高代码的可靠性。any类型的变量可以被赋予任何值，它可以调用任何方法或属性，TypeScript编译器不会检查它的类型和属性的合法性，所以使用any类型会降低代码的类型安全性。
2024年前端面试题JS+TS篇
xiaoliyo_的博客
04-28 2159
我希望我的解释和答案都是通俗易懂的
Typescript基础面试题 | 13.精选 ts 面试题
青轩桃李能几何，流光欺人忽蹉跎
11-29 996
在 TypeScript 中，你可以使用const关键字来定义常量。常量的值在编译时就被确定，并且不能被修改。在这个示例中，被定义为一个常量，它的值为 10。你不能修改的值，因为它是一个常量。你还可以为常量指定类型，以便在编译时进行类型检查。在这个示例中，被定义为一个类型为number的常量。这样，当你使用时，TypeScript 会检查它的值是否为数字类型。如果你尝试将非数字类型的值分配给，则会引发类型错误。在 TypeScript 中，你可以使用enum关键字来定义一个自定义枚举类型。
TypeScript 完整篇，考前必看，一网打尽所有的面试题
有一棵树的博客
04-23 1854
内容不是很多，可能也不全面，但是还是记不住，特别是区别那块，可能会记住一部分，但是表达不清楚，这就需要多下功夫了。内容仅供参考，如果有问题欢迎指出，因为我也还没有找到工作。
TypeScript常见面试题第一节
Java、前端、小程序学习笔记、问题汇总、项目实例分享，有需要请联系。
03-05 537
TS面试题：TypeScript比JavaScript 有哪些优势？TypeScript的优点?TypeScript的缺点？什么是 any 类型，何时使用 ？any和unknown有何不同？
TS常见面试题。
weixin_45345234的博客
12-11 360
unknown：（我的理解是安全型的any）它表示一个未知的值，不能直接对unknown类型的值进行操作，也不能将它分配给除unkonwn和any之外的其他类型，除非你先进行类型检查或者断言。type类型别名不仅可以用来表示基本类型，还可以用来表示对象类型、联合类型、元组和交集。never：表示一个不存在的值，ts使用三目运算符作类型声明，表示类型不存在。表示任何类型值，但想保持类型安全，可以使用unknown。类型，它可以理解为类型安全的(type-safe)，js迁移ts的临时解决方案。
分享 40 道关于 Typescript 的面试题及其答案
前端达人
11-10 3507
在进行前端技术面试的时候，我们经常会遇到TypeScript 的一些面试题，因此，今天这篇文章，我整理汇总了40道关于TypeScript 的基础知识的面试题。在实际工作中，它的优势在于提高开发人员的工作效率。今天这期内容，主要是对 TypeScript 内容的特定面试题，并提供详细的参考答案、代码示例以及相关的延伸阅读内容。那么，我们现在就开始进入今天的内容吧。1.什么是 TypeScript，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值