前端知识点-前端工程师必备的TS知识点，不来看看？

什么是？

是的加强版，它给添加了可选的静态类型和基于类的面向对象编程，它拓展了的语法。

而且不存在跟浏览器不兼容的问题，因为在编译时，它产生的都是代码。

和的区别是什么？

是的超集，可以被编译成代码。用编写的合法代码，在中依然有效。是纯面向对象的编程语言，包含类和接口的概念。程序员可以用它来编写面向对象的服务端或客户端程序，并将它们编译成代码。

和的关系，图源：

引入了很多面向对象程序设计的特征，包括：

主要不同点如下：

为什么要用？

和哪个更好？

由于 TS 的先天优势，TS 越来越受欢迎。但是TS 最终不可能取代 JS，因为 JS 是 TS 的核心。

选择还是要由开发者自己去做决定。如果你喜欢类型安全的语言，那么推荐你选择 TS。如果你已经用 JS 好久了，你可以选择走出舒适区学习 TS，也可以选择坚持自己的强项，继续使用 JS。

什么是泛型？

// 我们希望传入的值是什么类型，返回的值就是什么类型// 传入的值可以是任意的类型，这时候就可以用到 泛型
// 如果使用 any 的话，就失去了类型检查的意义function createArray1(length: any, value: any): Array {    let result: any = [];    for (let i = 0; i < length; i++) {        result[i] = value;    }    return result;}
let result = createArray1(3, 'x');console.log(result);
// 最傻的写法：每种类型都得定义一种函数function createArray2(length: number, value: string): Array {    let result: Array = [];    for (let i = 0; i < length; i++) {        result[i] = value;    }    return result;}
function createArray3(length: number, value: number): Array {    let result: Array = [];    for (let i = 0; i < length; i++) {        result[i] = value;    }    return result;}
// 或者使用函数重载，写法有点麻烦function createArray4(length: number, value: number): Arrayfunction createArray4(length: number, value: string): Arrayfunction createArray4(length: number, value: any): Array {    let result: Array = [];    for (let i = 0; i < length; i++) {        result[i] = value;    }    return result;}
createArray4(6, '666');

使用泛型

// 有关联的地方都改成 function createArray(length: number, value: T): Array {    let result: T[] = [];    for (let i = 0; i < length; i++) {        result[i] = value;    }    return result;}
// 使用的时候再指定类型let result = createArray(3, 'x');
// 也可以不指定类型，TS 会自动类型推导let result2 = createArray(3, 'x');console.log(result);

TS中的类

是面向对象的。而其中的类描述了所创建的对象共同的属性和方法。

传统的程序使用函数和基于原型的继承来创建可重用的组件，但这对于熟悉使用面向对象方式的程序员来说有些棘手，因为他们用的是基于类的继承并且对象是从类构建出来的。

从 2015，也就是 6，程序将可以使用这种基于类的面向对象方法。在里允许开发者现在就使用这些特性，并且编译后的可以在所有主流浏览器和平台上运行，

什么是构造函数，构造函数作用是什么？

构造函数，是一种特殊的方法。主要用来在创建对象时初始化对象，即为对象成员变量赋初始值，总与new运算符一起使用在创建对象的语句中。而的构造函数用关键字来实现。可以通过this（和java/C#一样代表对象实例的成员访问）关键字来访问当前类体中的属性和方法。

实例化是什么？

一般情况下，创建一个类后并不能直接的对属性和方法进行引用，必须对类进行实例化，即创建一个对象。中用new 关键字创建对象。实例化后通过“.”来访问属性和方法

方法重写是什么？

子类可继承父类中的方法，而不需要重新编写相同的方法。但有时子类并不想原封不动地继承父类的方法，而是想作一定的修改，这就需要采用方法的重写

重写的作用在于子类可以根据需要，定义特定于自己的行为。也就是说子类能够根据需要实现父类的方法。

什么是可索引类型接口？

一般用来约束数组和对象

// 数字索引——约束数组// index 是随便取的名字，可以任意取名// 只要 index 的类型是 number，那么值的类型必须是 stringinterface StringArray {  // key 的类型为 number ，一般都代表是数组  // 限制 value 的类型为 string  [index:number]:string}let arr:StringArray = ['aaa','bbb'];console.log(arr);

// 字符串索引——约束对象// 只要 index 的类型是 string，那么值的类型必须是 stringinterface StringObject {  // key 的类型为 string ，一般都代表是对象  // 限制 value 的类型为 string  [index:string]:string}let obj:StringObject = {name:'ccc'};

什么是函数类型接口？

对方法传入的参数和返回值进行约束

// 注意区别
// 普通的接口interface discount1{  getNum : (price:number) => number}
// 函数类型接口interface discount2{  // 注意:  // “:” 前面的是函数的签名，用来约束函数的参数  // ":" 后面的用来约束函数的返回值  (price:number):number}let cost:discount2 = function(price:number):number{   return price * .8;}
// 也可以使用类型别名type Add = (x: number, y: number) => numberlet add: Add = (a: number, b: number) => a + b

什么是类类型接口？

// 接口可以在面向对象编程中表示为行为的抽象interface Speakable {    name: string;       // ":" 前面的是函数签名，用来约束函数的参数    // ":" 后面的用来约束函数的返回值    speak(words: string): void}
interface Speakable2 {    age: number;}
class Dog implements Speakable, Speakable2 {    name!: string;    age = 18;
    speak(words: string) {        console.log(words);    }}
let dog = new Dog();dog.speak('汪汪汪');

什么是混合类型接口？

一个对象可以同时做为函数和对象使用

interface FnType {    (getName:string):string;}
interface MixedType extends FnType{    name:string;    age:number;}

interface Counter {    (start: number): string;    interval: number;    reset(): void;}
function getCounter(): Counter {    let counter = function (start: number) { };    counter.interval = 123;    counter.reset = function () { };    return counter;}
let c = getCounter();c(10);c.reset();c.interval = 5.0;