前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

我要涨知识——TypeScript 常见面试题(三)

1、能否自动编译.ts文件,并实时修改.ts文件?

这是可以的,自动实时根据.ts文件变化自动编译.ts文件是可以的。这可以通过使用 --watch compiler 选项来实现:

tsc --watch file1.ts  

上面的命令首先编译file1为file1.js,并注意文件的变化,如果检测到任何更改,它将再次编译文件。这里,我们需要确保在使用 --watch 选项运行时命令提示符不能关闭。

2、什么是 typeScript 的泛型?

泛型就是把不能明确的类型,变成参数,名为类型变量,一般用字母 T 来表示,也可以用其他字母表示,类型变量是一种特殊的变量,只用于表示类型而不是值。

function typeFn<T>(arg:T):T {
  return arg
}
let str = typeFn<string>("我是代码女神")
console.log("str", str);
let num = typeFn<number>(5)
console.log('num',num);

根据上述示例,我们发现传入的值既可以是 string 也可以是 number ,都不会报错,除此之外也可以传入 boolea、object、undefined、null 等。

有的同学可能就会想到 typescript 中的 any 类型,我们把上边的方法修改成使用 any 的类型,如:

function typeFn(arg: any): any {
  return arg
}
let str = typeFn("我是倩倩")
console.log("str", str);
let num = typeFn(5)
console.log('num',num);
let und = typeFn(undefined)
console.log('und',und);
let nu = typeFn(null)
console.log('nu',nu);

我们发现方法调用时,少传递了一个参数,代码依旧能够正常运行,没有报错,编译后生成的 javascript 代码一模一样,那么泛型与 any 有何区别呢?

下面看看这个 typescript 函数:

function getLength(arg: any): any {
  return arg.length
}
let len = getLength("我是倩倩")
console.log('len',len);

通过使用 any 类型,函数能够接收任意类型的参数,返回值也实现了类型自由,不能保证传入和返回的类型是一致的。因此,需要一种方法使传入和返回值的类型是统一的,就加入了一个类型变量它是一种特殊的变量,只用于表示类型而不是值。

any 与泛型最大区别:泛型能够保证传入的类型与返回类型保持一致。

3、Typescript中的模块是什么?

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

创建一个模块

可以使用export关键字创建模块,也可以在其他模块中使用import关键字。

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

4、Typescript中的名称空间是什么?如何在Typescript中声明名称空间?

名称空间是用于对功能进行逻辑分组的一种方式。名称空间用于在内部维护typescript的遗留代码。它封装了共享某些关系的特性和对象。名称空间也称为内部模块。名称空间还可以包括接口、类、函数和变量,以支持一组相关功能。

注意: 名称空间可以在多个文件中定义,并允许将每个文件都定义在一个地方。它使代码更容易维护。

用于创建名称空间的语法

namespace <namespace_name> {    
           export interface I1 { }    
           export class c1{ }    
} 

5、TypeScript是如何在函数中支持可选参数的?

与JavaScript不同,如果我们试图调用一个函数而不提供其函数签名中声明的参数的确切数量和类型,那么TypeScript编译器将抛出一个错误。为了克服这个问题,我们可以通过使用问号符号(‘?’)来使用可选参数。这意味着可以或不可以接收值的参数可以附加一个’?”“可选的。

function Demo(arg1: number, arg2? :number) {              
}  

因此,arg1总是必需的,而arg2是一个可选参数

注意: 可选参数必须遵循要求的参数。如果我们想让arg1成为可选的,而不是arg2,那么我们需要改变顺序,arg1必须放在arg2之后。

function Demo(arg2: number, arg1? :number) {  
} 

6、JavaScript不支持函数重载,但TypeScript是否支持函数重载?

是的,TypeScript支持函数重载。但是它的实现很奇怪,当我们在TypeScript中执行函数重载时,我们只能实现一个带有多个签名的函数。

//带有字符串类型参数的函数  
function add(a:string, b:string): string;    
  
//带有数字类型参数的函数
function add(a:number, b:number): number;    
  
//函数定义
function add(a: any, b:any): any {    
    return a + b;    
}    

在上面的例子中,前两行是函数重载声明。它有两次重载,第一个签名的参数类型为string,而第二个签名的参数类型为number。第三个函数包含实际实现并具有any类型的参数。任何数据类型都可以接受任何类型的数据。然后,实现检查所提供参数的类型,并根据供应商参数类型执行不同的代码段。

7、TypeScript是否支持所有面向对象的原则?

是的,TypeScript支持所有面向对象的原则。面向对象编程有四个主要原则:

  • 封装,
  • 继承,
  • 抽象,
  • 多态性

8、TS的“接口”和“type”语句有什么区别?

interface X {  
    a: number  
    b: string  
}  
type X = {  
    a: number  
    b: string  
};  

编号

接口

Type类型

1

接口声明总是引入指定的对象类型。

类型别名声明可以为任何类型(包括基元类型、联合类型和交集类型)引入名称。

2

接口可以在extends或implements子句中命名。

对象类型文字的类型别名不能在“扩展”或“实现”子句中命名。

3

接口创建一个到处使用的新名称。

类型别名不创建新名称。

4

一个接口可以有多个合并声明。

对象类型字面量的类型别名不能有多个合并声明。

9、什么是JSX?我们可以在TypeScript中使用JSX吗?

JSX只不过是带有不同扩展名的Javascript。Facebook提出了这个新的扩展,以便与JavaScript中类似xml的HTML实现区分开来。

JSX是一种可嵌入的类似xml的语法。它将被转换成有效的JavaScript。JSX随着React框架而流行起来。TypeScript支持嵌入、类型检查和直接将JSX编译成JavaScript。

要使用JSX,我们必须做两件事。

  • 使用.tsx扩展名命名文件
  • 启用jsx选项

10、什么是Rest参数?

rest参数用于向函数传递零个或多个值。它是通过在参数前加上三个点字符(‘…’)来声明的。它允许函数在不使用arguments对象的情况下拥有可变数量的参数。当我们有不确定数量的参数时,这是非常有用的。

rest参数要遵循的规则:

  • 一个函数中只允许有一个rest参数。
  • 它必须是数组类型。
  • 它必须是参数列表中的最后一个参数。
function sum(a: number, ...b: number[]): number {    
 let result = a;    
 for (var i = 0; i < b.length; i++) {    
 result += b[i];    
 }    
 console.log(result);    
}    
let result1 = sum(3, 5);    
let result2 = sum(3, 5, 7, 9);  

11、Lambda/箭头函数是什么?

ES6版本的 TypeScript 提供了定义匿名函数的简写语法,也就是用于函数表达式。这些箭头函数也称为Lambda函数。lambda函数是没有名称的函数,箭头函数省略了function关键字。

例子

let sum = (a: number, b: number): number => {    
            return a + b;    
}    
console.log(sum(20, 30)); //returns 50    

在上面,?=>?是一个lambda操作符,(a + b)是函数的主体,(a: number, b: number)是内联参数。

12、typeScript 的类型有哪些?

ts 的常用基础类型分为两种: js 已有类型和 ts 新增类型。

js 已有类型:

  • 原始类型:number/string/boolean/null/undefined/symbol
  • 对象类型:object(包括,数组、对象、函数等对象)

ts 新增类型:

  • 联合类型
  • 自定义类型(类型别名)
  • 接口
  • 元组
  • 字面量类型
  • 枚举
  • void
  • any
  • 等等

原始类型: number/string/boolean/null/undefined/symbol 语法比较简单,基本和 js 差别不大。

// 数值类型
let age: number = 18

// 字符串类型
let myName: string = '小花'

// 布尔类型
let isLoading: boolean = false

// undefined
let un: undefined = undefined

// null
let timer:null = null

// symbol
let uniKey:symbol = Symbol()

类型推论 在 TS 中,某些没有明确指定类型的情况下,TS 的类型推论机制会自动提供类型。好处:由于类型推论的存在,有些情况下的类型注解可以省略不写 有如下两种场景:

  1. 声明变量并初始化时
  2. 决定函数返回值时 已知函数的两个参数都是number类型,那么该函数的返回值也是 number 类型。

联合类型:

需求:如何定义一个变量可以是null也可以是 number 类型? 这个时候,前面所学的已经不能满足我们的需求了,就需要用到一个新的类型 - 组合类型。 语法:

let 变量: 类型1 | 类型2 | 类型3 .... = 初始值
let arr1 :number | string = 1 // 可以写两个类型
复制代码

注意: 这里的 | 竖线,在 TS 中叫做联合类型,即:由两个或多个其他类型组成的类型,表示可以是这些类型中的任意一种。不要和 js 中的 || 搞混哦。 应用场景: 定时器id

// | 联合类型  变量可以是两种类型之一
let timer:number|null = null
timer = setTimeout()

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言