TypeScript面试题

TypeScript的一些面试题

阿信呐

5196人浏览 · 2022-08-24 00:20:24

阿信呐 · 2022-08-24 00:20:24 发布

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;  
}