TypeScript 面试问题

Typescript中interface可以给Function/Array/class做声明吗？

可以，interface能够描述javascript对象的任何形式，包括函数

// 函数类型
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){}
}

Typescript中const 与readonly的区别

Typescript中不可变量的实现方法有两种：

1. 使用ES6的const关键字声明的值类型
2. 被readonly修饰的属性

TypeScript 中reaonly

TypeScript中的只读修饰符 可以声明更加严谨的可读属性

通常在interface、Class、tpye 以及array和tuple类型中使用它
也可以用来定义一个函数的参数

// type
type Foo = {
    readonly bar:number;
}
//const 确保'config' 不能够被改变了
const foo:Foo = {bar:123}
// 不能够改变
foo.bar = 456 //Error:foo.bar  为仅读属性


// 函数
function foo(config:{readonly num:number}){
    //..
}
const config = {num:123}
foo(config)

区别

1 const 用于变量，readonly用于属性
2 const 在运行时检查 readonly在编译时检查
3 const 声明的变量不得改变值 这意味着,const 一旦声明变量，就必须立即初始化，
不能留到以后赋值;readonly修饰的属性能确保自身不能修改属性,但是当你把这个属性交给其他
并没有这种保证的使用者(允许出于类型兼容性的原因),他们能改变

const foo:{
    readonly bar:number;
} = {
    bar:123
}
function iMutateFoo(foo:{bar:number}){
    foo.bar = 456
}
iMutateFoo(foo)
console.log(foo.bar); //456

此时 需要iMutateFoo明确的表示 他们的参数不可修改,那么编译器会发出错误警告：

function isTakeFoo(foo:Foo){
    foo.bar = 456 //Error：bar  属性只读
}

4 const 保证的不是变量的值不得改变 而是变量指向的那个内存地址不得改变，
例如使用const变量保存的数组,可以使用push,pop等方法，但是如果使用ReadonlyArray声明的数组不能使用push,pop等方法

枚举和常量枚举的区别

枚举和常量枚举（const枚举）

使用枚举可以清晰的表达意图或创建一组有区别的用例

// 枚举
enum Color{
    Red,
    Green,
    Blue
}

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

区别
1 枚举编译时会被编译成一个对象，可以被当做对象使用
2 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的主要特点是什么

• 跨平台:Typescript编译器可以安装在任何操作系统上，包括Window,macOS和Linux
• ES6特性:TypeScript包含计划中的ECMAScript 2015(ES6)的大部分特性，比如箭头函数
• 面向对象的语言:TypeScript提供所有标准的OOP功能，如类，接口和模块
• 静态类型检查： TypeScript使用静态类型并帮助在编译时进行类型检查。因此 你可以在编写代码是发现编译时的错误 无需运行代码
• 可选的静态类型:如果你习惯了javascript的动态类型 Typescript还允许可选的静态类型
• DOM操作：你可以使用TypeScript来操作DOM以添加或删除客户端网页元素

使用TypeScript有什么好处

• TypeScript更具表现力 这意味着它的语法会乱更少
• 由于高级调试器专注于在编译时之前捕获逻辑错误，因此调试很容易。
• 静态类型使TypeScript比javascript的动态类型更易于阅读和结构化
• 由于通用的转译 它可以跨平台使用 在客户端和服务端项目中

TypeScript 的内置数据类型有哪些？

• 数字类型 用于表示数字类型的值。TypeScript中的所有数字都存储为浮点值

let identifier:number = value

• 布尔类型：一个逻辑二进制开关，包含true或false

let identifier: bool = Boolean value

• Null 类型：Null表示值未定义的变量

let num:number = null

• void 类型：分配给没有返回值的方法的类型

let unusable:void = undefined

TypeScript目前的稳定版本是什么？

当前稳定的版本是4.2.3

TypeScript中的接口是什么

接口为使用该接口的对象定义契约或结构
接口是使用关键字定义的interface,他可以包含使用函数或箭头函数的属性和方法声明

interface IEmployee {
    empCode:number;
    empName:string;
    getSalary:(number)=>number; //arrow function
    getManagerName(number):string
}

TypeScript中的模块是什么

TypeScript中的模块是相关变量、函数、类和接口的集合
可以将模块视为包含执行任务所需的一切的容器，可以导入模块以轻松地在项目之间共享代码

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

typeScript中的类型断言是什么

typescript中的类型断言的工作方式类似于其他语言中的类型转换 但没有#C 和java等语言中可能的类型检查或数据重组。
类型断言对运行没有影响，仅由编译器使用

类型断言本质上是类型转换的软版本 它建议编译器将变量视为某种类型，但如果它处在不同的形式 则不会强制它进入改模型

在Typescript中如何从子类调用基类构造函数

你可以使用该super()函数来调用基类的构造函数

class Animal{
    name:string;
    constructor(theName:string){
        this.name = theName
    }
    move(distanceInMeters:number = 0){
        console.log(`${this.name}moved${distanceInMeters}m`);
    }
}

class Snake extends Animal{
    constructor(name:string){
        super(name)
    }
    move(distanceInMeters=5){
        super.move(distanceInMeters)
    }
}

解释如何使用TypeScript mixin

Mixin本质上是在相反方向上工作的继承，Mixins 允许你通过组合以前类中更简单的部分类设置来构建新类。
相反，类A继承类B来获得它的功能，类B从类A需要返回一个新类的附加功能

TypeScript中的getter/setter 是什么?你如何使用他们

Getter和setter是特殊类型的方法 可帮助你根据程序的需要委托私有变量的不同级别的访问
Getter允许你引用一个值但不能编辑它，setter允许你更改变量的值 但不能查看当前的值 这些对于实现封装是必不可少的。

例如,新雇主可能能够了解get公司的员工人数，但无权set编辑

const fullNameMaxLength = 10
class Employee {
    private _fullName:string = ""
    get fullName():string{
        return this._fullName
    }
    set fullName(newName:string){
        if(newName && newName.length>fullNameMaxLength){
            throw new Error('fullName has a max length of' + fullNameMaxLength)
        }
        this._fullName = newName
    }
}

let employee = new Employee()
employee.fullName = 'Bob Smith'
if(employee.fullName){
    console.log(employee.fullName);
    
}

如何允许模块外定义的类可以访问

你可以使用export关键字打开模块以供模块外使用

module Admin{
    //use the export keyword in typescript to access the class outside
    export class Employee{
        constructor(name:string,email:string){}
    }
    let alex = new Employee('alex','alex@gmail.com')
}
//the admin variable will allow you to access the Employee
// class outside the module with the help of the export keyword in typescript
let nick = new Admin.Employee('nick','nick@com')

解释rest参数和声明rest参数的规则

参数允许你将不同数量的参数(零个或多个)传递给函数，当你不确定函数将接收多少参数时，这很有用。其余符号之后的所有参数,都将存储在一个数组中

function Greet(greeting:string,...name:string[]){
    return greeting + "" + name.join(',')+ "!"
}
Greet('hello','steven','Bill')//hello,steven,bill
Greet('Hello')//hello!

rest参数必须是参数定义的最后一个 并且每个函数只能有一个rest参数

Omit 类型有什么作用

Omit 允许你通过传递type,并选择keys，在新类型中省略来构造类型。
Omit<Type,keys>

interface Todo{
    title:string;
    describtion:string;
    completed:boolean;
    createdAt:number;
}
type TodoPreview = Omit<Todo,"describtion">

TypeScript中实现函数重载

要在typeScript中重载函数 只需要创建两个名称相同但参数/返回类型不同的函数。两个函数必须接收相同数量的参数，
这是typescript多态重要组成部分

例如，你要创建一个add函数，如果参数时数字，则让他们相加，如果是字符串，则让他们相连

function add(a:string,b:string):string;
function add(a:number,b:number):number;
function add(a:any,b:any):any{
    return a + b
}
add('hello','steven') //return hello steven
add(20,10)//30

如何 让接口的所有属性都可选

可以使用partial 映射类型轻松将所有属性设置为可选

什么是装饰器 它们可以应用于什么

修饰器是一种特殊的声明,他允许你通过使用@注释标记来一次性修改类或类成员。每个修饰器都必须引用一个将在运行时评估的函数

例如，装饰器@sealed 将对应于sealed函数。任何标有的@sealed都将用于运行sealed函数

fucntiop sealed(target){
    //do something with target...
}

他们可以附加到：
类声明
方法
配件
特性
参数