盤點(diǎn)前端面試常見的15個TS問題,你能答對嗎?

1

什么是TypeScript？

TypeScript是JavaScript的加強(qiáng)版，它給JavaScript添加了可選的靜態(tài)類型和基于類的面向?qū)ο缶幊蹋卣沽薐avaScript的語法。

而且TypeScript不存在跟瀏覽器不兼容的問題，因?yàn)樵诰幾g時，它產(chǎn)生的都是JavaScript代碼。

2

TypeScript 和 JavaScript 的區(qū)別是什么？

• interfaces ?接口
• classes ?類
• enumerated types 枚舉類型
• generics 泛型
• modules 模塊

• TS 是一種面向?qū)ο缶幊陶Z言，而 JS 是一種腳本語言（盡管 JS 是基于對象的）。
• TS 支持可選參數(shù)， JS 則不支持該特性。
• TS 支持靜態(tài)類型，JS 不支持。
• TS 支持接口，JS 不支持接口。

3

為什么要用 TypeScript ？

• TS 在開發(fā)時就能給出編譯錯誤， 而 JS 錯誤則需要在運(yùn)行時才能暴露。
• 作為強(qiáng)類型語言，你可以明確知道數(shù)據(jù)的類型。代碼可讀性極強(qiáng)，幾乎每個人都能理解。
• TS 非常流行，被很多業(yè)界大佬使用。像 Asana、Circle CI 和 Slack 這些公司都在用 TS。

4

TypeScript 和 JavaScript 哪個更好？

5

什么是泛型？

• 泛型是指在定義函數(shù)、接口或類的時候，不預(yù)先指定具體的類型，使用時再去指定類型的一種特性。

• 可以把泛型理解為代表類型的參數(shù)

// 我們希望傳入的值是什么類型，返回的值就是什么類型// 傳入的值可以是任意的類型，這時候就可以用到 泛型
// 如果使用 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);
// 最傻的寫法：每種類型都得定義一種函數(shù)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;}
// 或者使用函數(shù)重載，寫法有點(diǎn)麻煩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');

使用泛型

// 有關(guān)聯(lián)的地方都改成 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 會自動類型推導(dǎo)let result2 = createArray(3, 'x');console.log(result);

6

TS中的類

TypeScript 是面向?qū)ο蟮?JavaScript。而其中的類描述了所創(chuàng)建的對象共同的屬性和方法。

傳統(tǒng)的JavaScript程序使用函數(shù)和基于原型的繼承來創(chuàng)建可重用的組件，但這對于熟悉使用面向?qū)ο蠓绞降某绦騿T來說有些棘手，因?yàn)樗麄冇玫氖腔陬惖睦^承并且對象是從類構(gòu)建出來的。

從ECMAScript 2015，也就是ECMAScript 6，JavaScript程序?qū)⒖梢允褂眠@種基于類的面向?qū)ο蠓椒?。在TypeScript里允許開發(fā)者現(xiàn)在就使用這些特性，并且編譯后的JavaScript可以在所有主流瀏覽器和平臺上運(yùn)行，

7

什么是構(gòu)造函數(shù)，構(gòu)造函數(shù)作用是什么？

構(gòu)造函數(shù) ，是一種特殊的方法。主要用來在創(chuàng)建對象時初始化對象， 即為對象成員變量賦初始值，總與new運(yùn)算符一起使用在創(chuàng)建對象的語句中。而TypeScript的構(gòu)造函數(shù)用關(guān)鍵字constructor來實(shí)現(xiàn)?？梢酝ㄟ^this（和java/C#一樣代表對象實(shí)例的成員訪問）關(guān)鍵字來訪問當(dāng)前類體中的屬性和方法。

8

實(shí)例化是什么？

一般情況下，創(chuàng)建一個類后并不能直接的對屬性和方法進(jìn)行引用，必須對類進(jìn)行實(shí)例化，即創(chuàng)建一個對象。TypeScript中用new 關(guān)鍵字創(chuàng)建對象。實(shí)例化后通過“.”來訪問屬性和方法

9

方法重寫是什么？

子類可繼承父類中的方法，而不需要重新編寫相同的方法。但有時子類并不想原封不動地繼承父類的方法，而是想作一定的修改，這就需要采用方法的重寫

重寫的作用在于子類可以根據(jù)需要，定義特定于自己的行為。也就是說子類能夠根據(jù)需要實(shí)現(xiàn)父類的方法。

10

什么是可索引類型接口？

一般用來約束數(shù)組和對象

// 數(shù)字索引——約束數(shù)組// index 是隨便取的名字，可以任意取名// 只要 index 的類型是 number，那么值的類型必須是 stringinterface StringArray {  // key 的類型為 number ，一般都代表是數(shù)組  // 限制 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'};

11

什么是函數(shù)類型接口？

對方法傳入的參數(shù)和返回值進(jìn)行約束

// 注意區(qū)別
// 普通的接口interface discount1{  getNum : (price:number) => number}
// 函數(shù)類型接口interface discount2{  // 注意:  // “:” 前面的是函數(shù)的簽名，用來約束函數(shù)的參數(shù)  // ":" 后面的用來約束函數(shù)的返回值  (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

12

什么是類類型接口？

• 如果接口用于一個類的話，那么接口會表示“行為的抽象”

• 對類的約束，讓類去實(shí)現(xiàn)接口，類可以實(shí)現(xiàn)多個接口

• 接口只能約束類的公有成員（實(shí)例屬性/方法），無法約束私有成員、構(gòu)造函數(shù)、靜態(tài)屬性/方法

// 接口可以在面向?qū)ο缶幊讨斜硎緸樾袨榈某橄?/span>interface Speakable {    name: string;     // ":" 前面的是函數(shù)簽名，用來約束函數(shù)的參數(shù)    // ":" 后面的用來約束函數(shù)的返回值    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('汪汪汪');

13

什么是混合類型接口？

一個對象可以同時做為函數(shù)和對象使用

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;

14

never 和 void 的區(qū)別？

• void 表示沒有任何類型（可以被賦值為 null 和 undefined）。

• never 表示一個不包含值的類型，即表示永遠(yuǎn)不存在的值。

• 擁有 void 返回值類型的函數(shù)能正常運(yùn)行。擁有 never 返回值類型的函數(shù)無法正常返回，無法終止，或會拋出異常。

15

TS的學(xué)前基礎(chǔ)？

因?yàn)?TypeScript 是對 JavaScript 的擴(kuò)展，更準(zhǔn)確的說是 ECMAScript。所以，我們學(xué)習(xí)我們這套 TypeScript 的課程，需要具備 ECMAScript 語言的基礎(chǔ)：

• 熟悉語法基礎(chǔ)（變量、語句、函數(shù)等基礎(chǔ)概念）

• 掌握內(nèi)置對象（Array、Date 等）的使用

• 面向?qū)ο蠡靖拍睿?gòu)造函數(shù)、原型、繼承）

• js項(xiàng)目如何升級為ts？有何影響？

• ts為什么會流行？與ECMA新規(guī)范的關(guān)系？

• tslint都能配置哪些功能？對開發(fā)流程有何影響？

180分鐘，切實(shí)掌握這門知識！

《TypeScript視頻教程》

用白嫖的視頻，換光速的成長

長按下方二維碼，立即搶！
???

掃碼人數(shù)較多，請您耐心等待

本套教程共分10節(jié)課，每節(jié)課時長不過10-20分鐘，總時長180分鐘。不論是睡前、上下班還是午休，每有一點(diǎn)時間，就能學(xué)完一節(jié)課。

在別人不知不覺間，完成超越！

它，

? ? 是當(dāng)下前端（包括基于 Node.js 的后端）中最熱門的開發(fā)語言，也是面試加分項(xiàng)，不知道 TypeScript 出門都不好意思跟別人打招呼

它，

? ? 開發(fā)的程序更安全（主要是在編譯階段，或者配合上支持 TypeScript 的編輯器在編碼期就能避免大部分的編碼錯誤），減少代碼在正式環(huán)境下出錯的可能性

它，

? ? 有類型約束檢測，編碼更規(guī)范

它，

? ? 實(shí)現(xiàn)了 ECMAScript 中最新或未來即將擁有的特性，讓我們更快速的使用語言新的特性去更好的完成工作，學(xué)習(xí)了 TypeScript 也就是學(xué)習(xí)了 JavaScript 的未來，一舉多得

?1.?TypeScript 與課程內(nèi)容編排介紹

?2.?環(huán)境搭建與編譯

?3.?類型系統(tǒng)-初識

?4.?類型系統(tǒng)-基礎(chǔ)類型

?5.?類型系統(tǒng)-數(shù)組元組枚舉

?6.?類型系統(tǒng)-其它類型

?7.?接口

?8.?類型深入-聯(lián)合類型-交叉類型-字面量類型-類型別名-類型推導(dǎo)-類型斷言

?9.?類型深入-類型操作符

10?類型深入-類型保護(hù)

用白嫖的視頻，換光速的成長

長按下方二維碼，立即搶！

???