TypeScript學(xué)習(xí)筆記

TypeScript的認(rèn)識(shí)

  • 是JavaScript的超集，是加強(qiáng)版的JavaScript，可以編譯成JavaScript代碼
  • 新增類型約束，包含一些語(yǔ)法的擴(kuò)展（枚舉類型、元祖類型等）

數(shù)據(jù)類型

變量聲明賦值基本寫法：let/const a: 數(shù)據(jù)類型 = 值；
注意：
(1) 這邊的數(shù)據(jù)類型都為小寫
(2) 變量不要使用 name 否則會(huì)與 DOM 中的全局 window 對(duì)象下的 name 屬性出現(xiàn)了重名?？蓪s文件作為模塊導(dǎo)出解決

1.1 js數(shù)據(jù)類型

  • number / string / boolean / undefined / null
const num: number = 3;  //數(shù)字
const str: string = "abc" ;  //字符串
const bool: boolean = true;  //布爾類型
const und: undefined = undefined;
const nul: null = null;
  • 數(shù)組array（兩種方式）
const arr1: number[] = [1,2,3]; 
const arr2: Array<number> = [1,2,3]
const arr3: any[] = [1, "abc",true]  //any為任意數(shù)據(jù)類型
  • 對(duì)象object
const obj: object = {
  name:"aaa",
  title:"bbb"
}

注意:
object類型這樣寫，屬性是不可以訪問(wèn)的，obj.name會(huì)報(bào)錯(cuò)
解決方法詳見采坑記錄（一）

  • symbol類型(ES6)
let s1 = Symbol();      //可為空
let s2 = Symbol('aaa');
let s3 = Symbol('bbb');
let student = {
    age: 18,
    name: 'Jack'
}
student[s1] = 'mingming'; 
console.log(typeof s1)  // => symbol
console.log(s1 === s2)  // => false
console.log(s2 === s3)  // => false

1.2 TypeScript新增數(shù)據(jù)類型

  • enum枚舉類型
enum test {
  a,
  b = 5,
  c ,
  d = "測(cè)試",
  //e        //報(bào)錯(cuò) ，如果未賦值的上一個(gè)值的值是非數(shù)字,那么必須賦值
}
const n0: test = test.a
const n1: test = test.b
const n2: test = test.c
const n3: test = test.d

console.log(n0,n1,n2,n3)     //輸出為: 0  5  6  "測(cè)試"
console.log(test[5])               //輸出為: b

注意：
(1) 如果未賦值的上一個(gè)值是數(shù)字那么這個(gè)未賦值的值的是上一個(gè)值的值+1；
(2) 如果未賦值的上一個(gè)值未賦值那么輸出的就是它的下標(biāo)；
(3) 如果未賦值的上一個(gè)值的值是非數(shù)字,那么必須賦值；
(4) 我們可以通過(guò)對(duì)應(yīng)的值去獲取對(duì)應(yīng)的數(shù)據(jù)名稱,如果存在相同值，取最后一個(gè)數(shù)據(jù)名稱。

  • tuple元祖類型
    可以定義每個(gè)元素的數(shù)據(jù)類型；
    和數(shù)組類似，數(shù)組通常為相同類型的數(shù)據(jù)。
const person: [string, number, number] = ["mingming", 18, 1.88];
const p1 = person[0]; 
const p2 = person[1];
  • void類型
    方法/函數(shù)類型，表示沒(méi)有返回值return
function fun(): void {
  console.log(1);
}
  • never類型
    never 是其它類型（包括 null 和 undefined）的子類型，表示一種從來(lái)不會(huì)存在的值的類型
  • any任意類型
    參數(shù)可以是任何一種類型
let a: any = "string";
a = true;
a = 1;

函數(shù)function

  • 函數(shù)定義
function function_name():return_type { 
    // 語(yǔ)句
    return value; 
}
//return_type是返回值的類型
  • 帶參數(shù)函數(shù)
function getUserInfo(name: string, age?: number, height: number = 180) {
  return `name:${name}--age:${age}--height:${height}`;
}
//？代表這個(gè)參數(shù)為可選參數(shù)，可傳可不傳，不傳則為undefined
//默認(rèn)參數(shù)，如果沒(méi)有傳值，則使用默認(rèn)參數(shù)

//剩余參數(shù)，不知道傳入?yún)?shù)的個(gè)數(shù)
function buildName(firstName: string, ...restOfName: string[]) {
    return firstName + " " + restOfName.join(" ");
}
let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");
  • 函數(shù)重載
    重載是方法名字相同，而參數(shù)不同，返回類型可以相同也可以不同。
    注意：
    (1) 如果參數(shù)類型不同，則參數(shù)類型應(yīng)設(shè)置為 any。
    (2) 參數(shù)數(shù)量不同你可以將不同的參數(shù)設(shè)置為可選參數(shù)。
function disp(s1:string):void; 
function disp(n1:number,s1:string):void; 
 
function disp(x:any,y?:any):void { 
    console.log(x); 
    console.log(y); 
} 
disp("abc") 
disp(1,"xyz");

接口interface

接口是一系列抽象方法的聲明，是一些方法特征的集合，這些方法都應(yīng)該是抽象的，需要由具體的類去實(shí)現(xiàn)，然后第三方就可以通過(guò)這組抽象方法調(diào)用，讓具體的類執(zhí)行具體的方法。typescript中的接口類似于java，同時(shí)還增加了更靈活的接口類型，包括屬性、函數(shù)、可索引和類等。

  • 接口定義
    typescript接口定義如下：
interface interface_name { 
}

//接口最好以大寫的I開頭
interface IPerson { 
    firstName:string, 
    lastName:string, 
    sayHi: ()=>string,
    age?: number;      //可選參數(shù)
    readonly hobby: string;  //屬性前面加readonly為只讀屬性，不可修改
} 
 
var customer:IPerson = { 
    firstName:"Tom",
    lastName:"Hanks", 
    sayHi: ():string =>{return "Hi there"} 
} 

console.log(customer.firstName) 
console.log(customer.lastName) 
console.log(customer.sayHi())
  • 接口繼承

和類相似，繼承使用extends關(guān)鍵字

interface IBarkable {
  barking(): void;
}

interface IShakable {
  shaking(): void;
}

//可以同時(shí)繼承多個(gè)接口，以逗號(hào)分隔
interface IPetable extends IBarkable, IShakable {
  eating(): void;
}

實(shí)現(xiàn)接口使用implements關(guān)鍵字

class Dog implements Petable {
  barking(): void {
    console.log("汪汪叫");
  }

  shaking(): void {
    console.log("搖尾巴");
  }

  eating(): void {
    console.log("吃骨頭");
  }
}

模塊

模塊是在其自身的作用域里執(zhí)行，并不是在全局作用域，所以外部無(wú)法訪問(wèn)模塊內(nèi)定義的變量、函數(shù)等，可以使用export導(dǎo)出模塊、import導(dǎo)入模塊。（參考es6語(yǔ)法）

命名空間

命名空間一個(gè)最明確的目的就是解決重名問(wèn)題，作用類似于模塊。使用namespace來(lái)定義。

namespace SomeNameSpaceName { 
   export interface ISomeInterfaceName { }   //使用export導(dǎo)出里面的類或接口
   export class SomeClassName { }  
}

//如果一個(gè)命名空間在一個(gè)單獨(dú)的 TypeScript 文件中，則應(yīng)使用三斜杠 /// 引用它，語(yǔ)法格式如下：
/// <reference path = "SomeFileName.ts" />

//命名空間可以嵌套
namespace Runoob { 
   export namespace invoiceApp { 
      export class Invoice { 
         public calculateDiscount(price: number) { 
            return price * .40; 
         } 
      } 
   } 
}
//使用.來(lái)訪問(wèn)內(nèi)部成員
var invoice = new Runoob.invoiceApp.Invoice();

TypeScript 聲明文件

TypeScript 引用第三方j(luò)s庫(kù)：

  • 直接引用，但是無(wú)法使用typescript的特性功能；
  • 可以將這些庫(kù)里的函數(shù)和方法體去掉后只保留導(dǎo)出類型聲明，而產(chǎn)生了一個(gè)描述 JavaScript 庫(kù)和模塊信息的聲明文件。通過(guò)引用這個(gè)聲明文件，就可以借用 TypeScript 的各種特性來(lái)使用庫(kù)文件。
  • 使用declare來(lái)定義類型
declare var jQuery: (selector: string) => any;

jQuery('#foo');

個(gè)人小結(jié)

個(gè)人感覺(jué)ts和js基本區(qū)別不大，過(guò)了一遍目前認(rèn)識(shí)到的就是ts的類型檢測(cè)以及增加了元祖、枚舉等數(shù)據(jù)類型，以及接口的印象比較深一些（接口部分還需深入了解，筆記還需要完善），至于有些比如類、模塊、箭頭函數(shù)等都與ES6基本一致，剛好現(xiàn)在整理學(xué)習(xí)筆記，后續(xù)過(guò)ES6的時(shí)候鞏固一下。

現(xiàn)在技術(shù)更新迭代很快，只有不斷學(xué)習(xí)提升自身能力才不會(huì)落后。工作以來(lái)自己掌握的技術(shù)很雜亂也算不得精通，學(xué)習(xí)也是想到什么學(xué)什么。體系化學(xué)習(xí)的重要性不言而喻，平時(shí)工作學(xué)習(xí)還是要多思考，善于總結(jié)記錄。

現(xiàn)在開始體系化地重新學(xué)習(xí)整理鞏固前端知識(shí)，在這邊作個(gè)記錄以便隨時(shí)回顧，2021沖。

書山有路勤為徑，學(xué)海無(wú)涯苦作舟。為了更美好的明天而學(xué)習(xí)。

最后簡(jiǎn)單附一張網(wǎng)上找的前端學(xué)習(xí)階段圖，激勵(lì)下自己吧。


前端階段學(xué)習(xí).PNG
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容