Typescript面试题

1,057 阅读7分钟

1.为什么要使用TypeScript?TypeScript相对于JavaScript的优势是什么?

TypeScript是JavaScript的超集,具有可选的类型并可以编译为纯JavaScript。

从技术上讲TypeScript就是具有静态类型的 JavaScript 。

向JavaScript添加静态类型的原因是什么?我想原因至少有三个:

  • 您可以避免经典的错误 'undefined' is not a function.
  • 在不严重破坏代码的情况下,重构代码更容易。
  • 使大型、复杂的应用程序源码更易阅读。

实际上,一项研究表明,TypeScript可以检测到所有JavaScript错误的15%。

动态类型的自由特性经常会导致错误,这些错误不仅会降低程序员的工作效率,而且还会由于增加新代码行的成本增加而使开发陷入停顿。

因此,JavaScript无法合并类型以及编译时缺乏错误检查,使它不适合作为企业和大型代码库中服务器端代码。

JavaScript优势:

  • 静态类型化,允许开发人员编写更健壮的代码并对其进行维护。
  • 大型的开发项目,使用TypeScript工具来进行重构更容易、便捷。
  • 类型安全,在编码期间检测错误的功能,而不是在编译项目时检测错误。
  • 干净的ECMAScript6代码,自动完成和动态输入等因素有助于提高开发人员的工作效率。
  1. TypeScript 可以使用 JavaScript 中的所有代码和编码概念,TypeScript 是为了使 JavaScript 的开发变得更加容易而创建的。例如,TypeScript 使用类型和接口等概念来描述正在使用的数据,这使开发人员能够快速检测错误并调试应用程序
  2. TypeScript 从核心语言方面和类概念的模塑方面对 JavaScript 对象模型进行扩展。
  3. JavaScript 代码可以在无需任何修改的情况下与 TypeScript 一同工作,同时可以使用编译器将 TypeScript 代码转换为 JavaScript。
  4. TypeScript 通过类型注解提供编译时的静态类型检查。
  5. TypeScript 中的数据要求带有明确的类型,JavaScript不要求。
  6. TypeScript 为函数提供了缺省参数值。
  7. TypeScript 引入了 JavaScript 中没有的“类”概念。
  8. TypeScript 中引入了模块的概念,可以把声明、数据、函数和类封装在模块中。

2.TypeScript中const和readonly的区别是什么?枚举和常量的区别?type(类别名的) 和 interface (接口)的区别?

const 和readonly区别?

  1. const用于变量,readonly用于属性
  2. const在运行时检查,readonly在编译时检查
  3. 使用const变量保存的数组,可以使用push,pop等方法。但是如果使用ReadonlyArray<number>声明的数组不能使用push,pop等方法

枚举和常量的区别?

  1. 枚举会被编译时会编译成一个对象,可以被当作对象使用
  2. const 枚举会在 typescript 编译期间被删除,const 枚举成员在使用的地方会被内联进来,避免额外的性能开销

我们先看下面代码,枚举会被编译成什么:

// 枚举
enum Color {
  Red,
  Green,
  Blue
}
var sisterAn = Color.Red
// 会被编译成 JavaScript 中的 var sisterAn = Color.Red
// 即在运行执行时,它将会查找变量 ColorColor.Red
复制代码

我们再看下 常量枚举 会被编译成什么:

// 常量枚举
const enum Color {
  Red,
  Green,
  Blue
}
var sisterAn = Color.Red
// 会被编译成 JavaScript 中的 var sisterAn = 0
// 在运行时已经没有 Color 变量

 由此可见,使用 常量枚举 会有更好的性能。

  定义的枚举,在经过编译器编译后是一个对象,这个对象我们可以在程序运行时使用,前面有说到。但有时定义枚举可能只是为了让程序可读性更好,而不需要编译后的代码,即不需要编译成对象。typescript中考虑到这种情况,所以加入了 const enum (完全嵌入的枚举)。

type(类别名的) 和 interface (接口)的区别?

  1. 类型别名可以为任何类型引入名称。例如基本类型,联合类型等
  2. 类型别名不支持继承
  3. 类型别名不会创建一个真正的名字
  4. 类型别名无法被实现(implements),而接口可以被派生类实现
  5. 类型别名重名时编译器会抛出错误,接口重名时会产生合并

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

任意数据类型:any

  • 1.如果是不同变量的话,可以是任意的数据类型
  • 2.如果是对象的话,any不能够提示原有的属性和方法
  • 3.未给初始值的变量类型为any

4.TypeScript中any,never,unknown和viod有什么区别?

  1. unknown类型和any类型类似。与any类型不同的是unknown类型可以接受任意类型赋值,但是unknown类型赋值给其他类型前,必须被断言
  2. never,never表示永远不存在的类型。比如一个函数总是抛出错误,而没有返回值。或者一个函数内部有死循环,永远不会有返回值。函数的返回值就是never类型。
  3. void, 没有显示的返回值的函数返回值为void类型。如果一个变量为void类型,只能赋予undefined或者null。

5.TypeScript中interface可以给Function/Array/Class做声明吗?

可以的,参考下面例子:

// 函数类型
interface SearchFunc {
  (source: string, subString: string): boolean;
}
let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
  let result = source.search(subString);
  return result > -1;
}


// Array
interface StringArray {
  [index: number]: string;
}

let myArray: StringArray;
myArray = ["Bob", "Fred"];


// Class, constructor存在于类的静态部分,所以不会检查
interface ClockInterface {
    currentTime: Date;
    setTime(d: Date);
}

class Clock implements ClockInterface {
    currentTime: Date;
    setTime(d: Date) {
        this.currentTime = d;
    }
    constructor(h: number, m: number) { }
}

6.TypeScript可以使用String,Number,Boolean,Symbol,Object等类型做声明吗?

链接:TypeScript笔记(一):基础类型:重点关注:boolean、number、string、object、null、undefined_Sheyami的代码乐园-CSDN博客

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

杨健:详解Typescript里的This261 赞同 · 15 评论文章

8.TypeScript中使用Unions时有哪些注意事项?

链接:

typescript 文档阅读笔记-Unions and Intersection Types​blog.csdn.net/Her_smile/article/details/111503754

9.TypeScript中如何设计Class的声明?

www.cnblogs.com/zjh-study/p…

10.TypeScript中如何联合枚举类型Key?

www.cnblogs.com/wjaaron/p/1…

11.TypeScript中?. , ?? , !: , _ , ** 等符号的含义?

  • ?. 可选链
  • ?? ?? 类似与短路或,??避免了一些意外情况,0,NaN以及"",false被视为false值。只有undefind,null被视为false值。
  • !. 在变量名后添加!,可以断言排除undefined和null类型
  • _ , 声明该函数将被传递一个参数,但您并不关心它
  • !:,待会分配这个变量,ts不要担心
  • ** 求幂

12.TypeScript中预定义的有条件类型有哪些?

TypeScript 类型保护、索引类型、类型映射、条件类型​www.jianshu.com/p/612b9e25e427

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

Arichy:typescript 声明文件加载机制以及在不同场景下的正确使用方式

模块解析机制_TypeScript笔记14 | 黯羽轻扬

模块解析 · TypeScript中文网 · TypeScript--JavaScript的超集

14.简单介绍TypeScript类型兼容的理解?抗变,双变,协作,和逆变的简单理解?

聊聊TypeScript类型兼容,协变、逆变、双向协变以及不变性

  • Covariant 协变,TS对象兼容性是协变,父类 <= 子类,是可以的。子类 <= 父类,错误。
  • Contravariant 逆变,禁用strictFunctionTypes编译,函数参数类型是逆变的,父类 <= 子类,是错误。子类 <= 父类,是可以的。
  • Bivariant 双向协变,函数参数的类型默认是双向协变的。父类 <= 子类,是可以的。子类 <= 父类,是可以的。

15.TypeScript中对象展开会有什么副作用吗?

没有找到

TypeScript笔记 5--变量声明(解构和展开)

TypeScript 解构和展开

16.TypeScript中Interface, type, enum声明有作用域的功能吗?

没找到

TypeScript中interface和type的区别_月将明的博客-CSDN博客

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

不可以,可能声明的类型不同

18.如何使用TypeScript项目引入并编译为JavaScript的npm库包?

使用Typescript编写和发布npm包

19.TypeScript的tsconfig.json中有哪些配置信息?

typescript tsconfig.json项目配置

20.TypeScript中如何设置模块导入的路径别名?

TypeScript导入路径别名 -Java 学习之路