TypeScript面试题

Posted 2023-04-09 阿信呐

TypeScript与javascript有什么不同

1.TypeScript 支持ES6
2.它支持强类型或静态类型、模块、可选参数等。
3.它支持面向对象的编程概念，如类、接口、继承、泛型等。
4.TypeScript有可选的参数特性。
5.它编译代码并在开发期间突出显示错误。
6.TypeScript支持模块。
7.TypeScript在编译时提供了错误检查功能。它将编译代码，如果发现任何错误，它将在运行脚本之前突出显示这些错误。

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

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

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

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

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

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

TypeScript的优点

1.Typescript能够编译出一个能在所有浏览器上运行的JavaScript版本。
2.TypeScript总是在编译时强调错误，而JavaScript在运行时指出错误。
3.TypeScript支持强类型或静态类型
4.它使用基于类的面向对象编程。
5.它有助于代码结构。

TypeScript的缺点

1.TypeScript需要很长时间来编译代码
2.要使用任何第三方库，必须使用定义文件。并不是所有第三方库都有可用的定义文件。
3.类型定义文件的质量是一个问题，即如何确保定义是正确的?

TypeScript的内置类型

number、string、boolean、undefined、null、void

如何编译typeScript文件

tsc hello.ts

如何将多个ts文件合并为一个js文件

tsc --outFile comman.js file1.ts file2.ts file3.ts
这样就将三个ts文件合并到comman.js文件中

tsc --outFile file1.ts file2.ts file3.ts 

当我们不提供输出文件名像上面的命令，然后file2.ts和file3.ts将被编译，并将输出放在file1.ts中，现在是file1.ts包含JavaScript代码

如何自动编译ts文件，并且自动修改ts文件

tsc --watch file1.ts

TS的接口是什么意思？

接口是在我们的应用程序中充当契约的结构,它定义了要遵循的类的语法，这意味着实现接口的类必须实现它的所有成员.它不能被实例化，但是可以被实现它的类对象引用。

interface interface_name     
          // 字段声明
          // 方法声明
   

接口只是声明方法和字段，它不能用来建造任何东西。不需要将接口转换为JavaScript来执行，它们对运行时JavaScript没有任何影响。因此，它们的唯一目的是在开发阶段提供帮助。

如何理解TypeScript中的类

TypeScript是一种面向对象的JavaScript语言，支持OOP编程特性，比如类、接口等。与Java一样，类是用于创建可重用组件的基本实体。它是一组具有公共属性的对象。类是创建对象的模板或蓝图。它是一个逻辑实体。“class”关键字用于在Typescript中声明一个类。

class Student     
    studCode: number;    
    studName: string;    
    constructor(code: number, name: string)     
            this.studName = name;    
            this.studCode = code;    
        
    getGrade() : string     
        return "A+" ;    
        
  

类的特征：封装、继承、多态、抽象

TypeScript支持哪些面向对象的术语

1。模块
2.类
3.接口
4.继承
5.数据类型
6.成员函数

如何从TypeScript的子类调用基类构造函数

使用super()函数，从子类中调用父类或基类构造函数

如何在TypeScript中实现继承

继承是一种从另一个类获取一个类的属性和行为的机制。继承成员的类称为基类，继承这些成员的类称为派生类。

class Shape      
   Area:number     
   constructor(area:number)      
      this.Area = area    
        
     
class Circle extends Shape      
   display():void      
      console.log("圆的面积: "+this.Area)     
        
    
var obj = new Circle(320);     
obj.display()  

Typescript中的模块是什么

模块是创建一组相关变量、函数、类和接口等的强大方法。它可以在它们自己的范围内执行，而不是在全局范围内。换句话说，在模块中声明的变量、函数、类和接口不能在模块外部直接访问。

module module_name  
    class xyz  
        export sum(x, y)  
            return x+y;  
           
      

TypeScript中的泛型

TypeScript泛型是一个提供创建可重用组件方法的工具。它能够创建可以处理多种数据类型而不是单一数据类型的组件。泛型在不影响性能或生产率的情况下提供类型安全性。泛型允许我们创建泛型类、泛型函数、泛型方法和泛型接口

function identity<T>(arg: T): T       
    return arg;      
      
let output1 = identity<string>("myString");      
let output2 = identity<number>( 100 );    
console.log(output1);    
console.log(output2);  

TypeScript中const和readonly的区别是什么？枚举和常量的区别？

• const用于变量，readonly用于属性
• const在运行时检查，readonly在编译时检查
• 使用const变量保存的数组，可以使用push，pop等方法。但是如果使用Readonly Array声明的数组不能使用push，pop等方法

枚举和常量枚举的区别？

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

看看枚举和常量枚举会被编译成什么

//枚举
enum Color 
  Red,
  Green,
  Blue

var sisterAn = Color.Red
// 会被编译成 JavaScript 中的 var sisterAn = Color.Red
// 即在运行执行时，它将会查找变量 Color 和 Color.Red

// 常量枚举
const enum Color 
  Red,
  Green,
  Blue

var sisterAn = Color.Red
// 会被编译成 JavaScript 中的 var sisterAn = 0
// 在运行时已经没有 Color 变量

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

TS中的接口interface 和 type语句有什么区别

interface X   
    a: number  
    b: string  
  
type X =   
    a: number  
    b: string  

编号	接口interface	type类型
1	接口声明总是引入指定的对象类型。	类型别名声明可以为任何类型(包括基元类型、联合类型和交集类型)引入名称
2	接口可以extends继承。	不能继承
3	接口创建一个到处使用的新名称。	类型别名不会创建一个真正的名字。
4	接口重名时会产生合并	类型别名重名时编译器会抛出错误

TypeScript中的类型断言？

类型断言可以手动指定一个值的类型

// 第一种
let employeeCode = <number> code;

//第二种
let employeeCode = code as number

用途：
（1）类型断言用于实现覆盖编译器推断的类型。也就是说，当我们使用了类型断言，那么就相当于告诉编译器，我们比它更了解这个变量应该是什么类型，编译器不应该再继续报错
（2）将一个联合类型推断为其中一个类型
（3）将一个父类断言为更加具体的子类
（4）将任何一个类型断言为any
（5）将any断言为一个具体的类型

interface FooType
    a: string,
    b: number,


const Foo =  as FooType
Foo.a = 'a'
Foo.b = 1

类型断言不等于类型转换：

• 类型转换发生于运行时。
• 类型断言发生于编译时。

双重断言：

function handler(event: Event)

    const element = (event as any) as htmlElement

TypeScript的as语法是什么？

as是TypeScript中类型断言的附加语法，引入as-语法的原因是原始语法()与JSX冲突

let empCode: any = 111;     
let employeeCode = code as number; 
// 当使用带有JSX的TypeScript时，只允许as风格的断言。

TypeScript的Enum枚举类型？

枚举是一种数据类型，允许我们定义一组命名常量。使用枚举可以更容易地记录意图，或者创建一组不同的案例。它是相关值的集合，可以是数值或字符串值。

enum Gender   
  Male,  
  Female  
  Other  
  
console.log(Gender.Female); // : 1  
// 我们还可以通过enum值的number值来访问它
console.log(Gender[1]); // : Female 

TS中的声明合并

声明合并是编译器随后合并两个或多个独立声明的过程。将具有相同名称的声明为单个定义。这个合并的定义具有两个原始声明的特性。

• 最简单也是最常见的声明合并类型是接口合并

interface Cloner   
    clone(animal: Animal): Animal;  
  
interface Cloner   
    clone(animal: Sheep): Sheep;  
  
interface Cloner   
    clone(animal: Dog): Dog;  
    clone(animal: Cat): Cat;  
 

将这三个接口合并为一个单独声明

interface Cloner   
    clone(animal: Dog): Dog;  
    clone(animal: Cat): Cat;  
    clone(animal: Sheep): Sheep;  
    clone(animal: Animal): Animal;  
 

在TypeScript中不是所有的合并都允许。目前，类不能与其他类或变量合并。

TypeScript中?. , ?? , !： , _ , ** 等符号的含义？

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

前端经典面试题 | 吊打面试官系列 之 说说你对TypeScript 和 JavaScript的理解

🖥️ 前端经典面试题 专栏：吊打面试官系列 之 说说你对TypeScript 和 JavaScript的理解
🧑‍💼 个人简介：一个不甘平庸的平凡人🍬

✨ 个人主页：CoderHing的个人主页

🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️

👉 你的一键三连是我更新的最大动力❤️

---

目录

一、回答点

二、深入回答

Ts是什么？

特性

区别

---

一、回答点

TypeScirpt(以下称:Ts),JavaScript(以下称:Js)

Ts特性，Ts和Js的区别点

二、深入回答

Ts是什么？

        Ts是Js的类型超集，支持ES6语法，支持面向对象编程思想。如：接口，继承，泛型等。是一种静态语言，提供类型注释，在编译阶段检查出数据类型的错误。同时扩展了Js语言。在任何Js程序中不改变也可以在Ts程序中运行。为了保证兼容Ts在编译阶段需要编译器将其编译成Js来运行。

// TypeScript如下：
const coderhing: string = 'Hello World!'
console.log(coderhing)

// JavaScript如下：
const coderhing = 'Hello World!'
console.log(coderhing)

特性

• 类型批注：在编译时批注变量类型
• 类型推断：在Ts中没有批注变量类型回自动推断出变量的类型
• 接口：Ts中用接口来定义对象类型
• 枚举：用于取值被限定在一定范围的场景
• Mixin：可接受任意类型值
• 元组：合并了不同类型的对象，可以装不同类型数据的数组
• 。。。。

区别

• Ts是Js的超集，拓展Js语法
• Ts可处理已有Js的代码，并只会对其中Ts代码进行编译
• Ts文件后缀名：.ts，.dts，.tsx，Js后缀名：.js
• 编写Ts文件时会自动编译成Js文件
• 。。。