看完 TypeScript 系列文章，進大廠了！！！-有解無憂

極客江南：一個對開發技術特別執著的程式員，對移動開發有著獨到的見解和深入的研究，有著多年的iOS、Android、HTML5開發經驗，對NativeApp、HybridApp、WebApp開發有著獨到的見解和深入的研究, 除此之外還精通 JavaScript、AngularJS、 NodeJS 、Ajax、jQuery、Cordova、React Native等多種Web前端技術及Java、PHP等服務端技術，

初學者玩轉 TypeScript系列，總計 5 期，本文為第 2 期，點贊、收藏、評論、關注、三連支持！

一期知識點擊這里

二期目錄

- - - 1. 變數宣告和解構？
    - 2. 介面的基本使用
    - 3.可選屬性和索引簽名
    - 4. 函式介面和混合型別介面
    - 5. 介面的繼承
    - 6. TypeScript 函式
    - 7. 函式的宣告與多載
    - 8. 泛型
    - 9. 泛型約束

對于初學者來說，學習編程最害怕的就是，難，

那么，Typescript 是不是很難？

首先，我可以肯定地告訴你，你的焦慮是多余的，新手對學習新技術有很強的排斥心理，主要是因為基礎不夠扎實，然后自信心不夠強，

1. 變數宣告和解構？

TS中變數宣告和解構和ES6一樣
詳見 ES6 相關知識

2. 介面的基本使用

什么是介面型別?
和 number,string,boolean,enum 這些資料型別一樣
介面也是一種型別, 也是用來約束使用者的

* */
// 定義一個介面型別
interface FullName{
    firstName:string
    lastName:string
}
let obj = {
    firstName:'Jonathan',
    lastName:'Lee'
    // lastName:18
};
// 需求: 要求定義一個函式輸出一個人完整的姓名
// 這個人的姓必須是字串, 這個人的名也必須是一個字符

function say({firstName, lastName}:FullName):void {
    console.log(`我的姓名是:${firstName}_${lastName}`);
}
say(obj);

3.可選屬性和索引簽名

定義一個介面

interface FullName{
    firstName:string
    lastName:string
    middleName?:string
    [propName:string]:any
}

需求: 如果傳遞了 middleName 就輸出完整名稱, 如果沒有傳遞middleName, 那么就輸出 firstName 和 lastName

function say({firstName, lastName, middleName}:FullName):void {
    // console.log(`我的姓名是:${firstName}_${lastName}`);
    if(middleName){
        console.log(`我的姓名是:${firstName}_${middleName}_${lastName}`);
    }else{
        console.log(`我的姓名是:${firstName}_${lastName}`);
    }
}
// 注意點: 如果使用介面來限定了變數或者形參, 那么在給變數或者形參賦值的時候,
// 賦予的值就必須和介面限定的一模一樣才可以, 多一個或者少一個都不行

// say({firstName:'Jonathan'});
// say({firstName:'Jonathan', lastName:'Lee', middleName:"666"});

// 注意點: 但是在企業開發中可以多一個也可能少一個
// 少一個或多個怎么做? 可選屬性
// say({firstName:'Jonathan', lastName:'Lee', middleName:"666"});
// say({firstName:'Jonathan', lastName:'Lee'});
// 多一個或者多多個怎么做? 如果繞開TS檢查
// 方式一: 使用型別斷言
// say({firstName:'Jonathan', lastName:'Lee', middleName:"666", abc:'abc'} as FullName);
// 方式二: 使用變數
// let obj = {firstName:'Jonathan', lastName:'Lee', middleName:"666", abc:'abc'};
// say(obj);
// 方式三: 使用索引簽名
say({firstName:'Jonathan', lastName:'Lee', middleName:"666", abc:'abc', 123:123, def:"def"});

4. 函式介面和混合型別介面

函式介面
我們除了可以通過介面來限定物件以外, 我們還可以使用介面來限定函式

/*
interface SumInterface {
    (a:number, b:number):number
}
let sum:SumInterface = function (x:number, y:number):number {
    return x + y;
}
let res = sum(10, 20);
console.log(res);
 */

// 混合型別介面
// 約定的內容中既有物件屬性, 又有函式
// 要求定義一個函式實作變數累加
/*
let count = 0; // 會污染全域空間
function demo() {
    count++;
    console.log(count);
}
demo();
demo();
demo();
 */
/*
let demo = (()=>{ // 使用閉包確實可以解決污染全域空間的問題, 但是對于初學者來說不太友好
    let count = 0;
    return ()=>{
        count++;
        console.log(count);
    }
})();
demo();
demo();
demo();
 */
// 在JS中函式的本質是什么? 就是一個物件
// let demo = function () {
//     demo.count++;
// }
// demo.count = 0;
// demo();
// demo();
// demo();
interface CountInterface {
    ():void
    count:number
}
let getCounter = (function ():CountInterface {
    /*
    CountInterface介面要求資料既要是一個沒有引數沒有回傳值的函式
                              又要是一個擁有count屬性的物件
    fn作為函式的時候符合介面中函式介面的限定 ():void
    fn作為物件的時候符合介面中物件屬性的限定  count:number
    * */
    let fn = <CountInterface>function () {
        fn.count++;
        console.log(fn.count);
    }
    fn.count = 0;
    return fn;
})();
getCounter();
getCounter();
getCounter();

5. 介面的繼承

介面的繼承
TS中的介面和JS中的類一樣是可以繼承的

interface LengthInterface {
    length:number
}
interface WidthInterface {
    width:number
}
interface HeightInterface {
    height:number
}
interface RectInterface extends LengthInterface,WidthInterface,HeightInterface {
    // length:number
    // width:number
    // height:number
    color:string
}
let rect:RectInterface = {
    length:10,
    width:20,
    height:30,
    color:'red'
}

6. TypeScript 函式

TS中的函式
TS中的函式大部分和JS相同


// 命名函式
function say1(name) {
    console.log(name);
}
// 匿名函式
let say2 = function (name) {
    console.log(name);
}
// 箭頭函式
let say3 = (name) => {
    console.log(name);
}

// 命名函式
function say1(name:string):void {
    console.log(name);
}
// 匿名函式
let say2 = function (name:string):void {
    console.log(name);
}
// 箭頭函式
let say3 = (name:string):void =>{
    console.log(name);
}

7. 函式的宣告與多載

// TS函式完整格式
// 在TS中函式的完整格式應該是由函式的定義和實作兩個部分組成的

/*
// 定義一個函式
let AddFun:(a:number, b:number)=>number;
// 根據定義實作函式
AddFun = function (x:number, y:number):number {
    return x + y;
};
let res = AddFun(10, 20);
console.log(res);
*/

/*
// 一步到位寫法
let AddFun:(a:number, b:number)=>number =
function (x:number, y:number):number {
    return x + y;
};
let res = AddFun(20, 20);
console.log(res);
*/

/*
// 根據函式的定義自動推導對應的資料型別
let AddFun:(a:number, b:number)=>number =
    function (x, y) {
        return x + y;
    };
let res = AddFun(20, 20);
console.log(res);
*/

// TS函式宣告

/*
// 先宣告一個函式
type AddFun = (a:number, b:number)=>number;
// 再根據宣告去實作這個函式
// let add:AddFun = function (x:number, y:number):number {
//     return x + y;
// };
let add:AddFun = function (x, y) {
    return x + y;
};
let res = add(30, 20);
console.log(res);
*/

// TS函式多載
// 函式的多載就是同名的函式可以根據不同的引數實作不同的功能

/*
function getArray(x:number):number[] {
    let arr = [];
    for(let i = 0; i <= x; i++){
        arr.push(i);
    }
    return arr;
}
function getArray(str:string):string[] {
    return str.split('');
}
 */
 
// 定義函式的多載
function getArray(x:number):number[];
function getArray(str:string):string[];
// 實作函式的多載
function getArray(value:any):any[] {
    if(typeof value === 'string'){
        return value.split('');
    }else{
        let arr = [];
        for(let i = 0; i <= value; i++){
            arr.push(i);
        }
        return arr;
    }
}
// let res = getArray(10);
let res = getArray('www.it666.com');
console.log(res);

8. 泛型

什么是泛型?
在撰寫代碼的時候我們既要考慮代碼的健壯性, 又要考慮代碼的靈活性和可重用性
通過TS的靜態檢測能讓我們撰寫的代碼變得更加健壯, 但是在變得健壯的同時卻丟失了靈活性和可重用性
所以為了解決這個問題TS推出了泛型的概念
通過泛型不僅可以讓我們的代碼變得更加健壯, 還能讓我們的代碼在變得健壯的同時保持靈活性和可重用性

// 需求: 定義一個創建陣列的方法, 可以創建出指定長度的陣列, 并且可以用任意指定的內容填充這個陣列
/*
let getArray = (value:number, items:number = 5):number[]=>{
    return new Array(items).fill(value);
};
// let arr = getArray(6, 3);
let arr = getArray("abc", 3); // 報錯
console.log(arr);
 */
 
/*
let getArray = (value:any, items:number = 5):any[]=>{
    return new Array(items).fill(value);
};
// let arr = getArray("abc", 3);
let arr = getArray(6, 3);
// console.log(arr);
// 當前存盤的問題:
// 1.撰寫代碼沒有提示, 因為TS的靜態檢測不知道具體是什么型別
// 2.哪怕代碼寫錯了也不會報錯, 因為TS的靜態檢測不知道具體是什么型別
let res = arr.map(item=>item.length); // ['abc', 'abc', 'abc'] => [3, 3, 3]
console.log(res);
 */

// 需求:要有代碼提示, 如果寫錯了要在編譯的時候報錯
let getArray = <T>(value:T, items:number = 5):T[]=>{
    return new Array(items).fill(value);
};
// let arr = getArray<string>('abc');
// let arr = getArray<number>(6);
// 注意點: 泛型具體的型別可以不指定
//         如果沒有指定, 那么就會根據我們傳遞的泛型引數自動推匯出來
let arr = getArray('abc');
// let arr = getArray(6);
let res = arr.map(item=>item.length);
console.log(res);

9. 泛型約束

什么是泛型約束?
默認情況下我們可以指定泛型為任意型別
但是有些情況下我們需要指定的型別滿足某些條件后才能指定
那么這個時候我們就可以使用泛型約束

// 需求: 要求指定的泛型型別必須有Length屬性才可以
interface LengthInterface{
    length:number
}
let getArray = <T extends LengthInterface>(value:T, items:number = 5):T[]=>{
    return new Array(items).fill(value);
};
let arr = getArray<string>('abc');
// let arr = getArray<number>(6);
let res = arr.map(item=>item.length);

碼字不易，在線求個三連支持，

大家記得收藏前，先點個贊哦！好的文章值得被更多人看到，

推薦閱讀：

13萬字C語言保姆級教程2021版

10萬字Go語言保姆級教程

2 萬字 Jquery 入門教程

3 萬字 html +css 入門教程

169集保姆級C語言視頻

最后，再多一句，粉絲順口溜，關注江哥不迷路，帶你編程上高速，

著作權所有，請勿轉載，轉載請聯系本人授權

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/291218.html

標籤：其他

上一篇：JavaScript入門第六章（資料型別比較）

下一篇：JavaScript（九）（IndexedDB API、Web Worker）