本文記錄了 TypeScript 中的基礎(chǔ)變量類型和使用方式媳搪，以及在 Vue2 框架中引入的調(diào)整畜埋。

類型

1. 布爾值

   let isDef: boolen = false
   

2. 數(shù)字

   let num: number = 0
   

3. 字符串

   let str: string = 'hello word'
   

4. 數(shù)組

   let nums: number[] = [1, 2, 3]
   
   let strs: Array<string> = ['s1', 's2', 's3']
   

5. 元組

   元組類型用來表示已知元素?cái)?shù)量和類型的數(shù)組笆载，各元素的類型不必相同，對(duì)應(yīng)位置的類型需要相同

   let list: [string, number] = ['hello', 1]
   

6. 枚舉

   枚舉類型用于定義數(shù)值集合模叙，默認(rèn)情況從 0 開始編號(hào)纬向，可手動(dòng)指定成員數(shù)值

   enum Color { Red, Green, Blue }
   
   let c: Color = Color.Red
   

7. Any

   聲明為 any 的變量可以賦予任意類型的值

   let key: any = 1
   
   let key1: any = 'hello'
   

8. Object

   表示非原始類型，除number伤靠，string捣域，boolean，symbol，null或undefined之外的類型

   declare function create(o: object | null ) : void
   
   create({ prop: 0 })
   

9. Null焕梅、Undefined

   指定了 --strictNullChecks 標(biāo)記迹鹅，null 和 undefined 只能賦值給 void 和它們各自

   let undef: undefined = undefined
   
   let nul: null = null
   

10. Never

    表示的是那些總是會(huì)拋出異常或根本就不會(huì)有返回值的函數(shù)表達(dá)式或箭頭函數(shù)表達(dá)式的返回值類型贞言；變量也可能是 never類型

    function error(message: string): never {
        throw new Error(message)
    }
    

11. Void

    表示沒有任何類型斜棚，當(dāng)一個(gè)函數(shù)沒有返回值時(shí)，返回值類型是 void该窗；聲明一個(gè)void類型的變量弟蚀，則只能為它賦予undefined和null

    function warnUser(): void {
        //無返回值
        console.log("This is my warning message")
    }
    
    let unusable: void = undefined
    

12. 類型斷言

    手動(dòng)指定一個(gè)類型的值，即允許變量從一種類型更改為另一種類型

    let value: any = 'hello word'
    
    let length: number = (<string>value).length
    
    let length1: number = (value as string).length
    

13. 聯(lián)合類型

    關(guān)鍵詞 | 表示或挪捕，類型選其一

14. 交叉類型

    關(guān)鍵詞 & 表示與粗梭，取類型交集

15. 類型別名

    關(guān)鍵詞 type

賦值

1. 變量聲明

   包含 let、const级零、var 三種方式

   	let	const	var
   作用域	當(dāng)前代碼塊	當(dāng)前代碼塊	當(dāng)前函數(shù)断医、模塊或全局
   重復(fù)賦值	否	否	是
   變量提升	否	否	是
   是否可修改	是	否	是

2. 解構(gòu)

   // 數(shù)組解構(gòu)
   let input = [1, 2]
   let [first, second] = input
   
   // 對(duì)象解構(gòu)
   let input = [1, 2]
   let [first, second] = input
   

類

1. 聲明

   通過關(guān)鍵詞 class 聲明一個(gè)類

   class Greeter ｛
    greeting: string; 
   
    constructor(message: string) {
        this.greeting = message;
    }
    
    greet() {
        // this 指向類實(shí)例
        return "Hello, " + this.greeting;
    }
   
   ｝
   

2. 實(shí)例創(chuàng)建

   let greeter = new Greeter('word')
   

3. 修飾詞

   對(duì)類的屬性和方法進(jìn)行訪問的定義，默認(rèn)只為 public

   	含義	描述
   readonly	只讀	只在構(gòu)造函數(shù)中可以賦值
   public	公共	可以在實(shí)例奏纪、實(shí)例方法和子類訪問
   private	私有	只在實(shí)例的方法中訪問
   protected	保護(hù)	可以在子類和實(shí)例方法中訪問
   static	靜態(tài)	通過類名訪問
   abstract	抽象

4. 繼承

   子類通過關(guān)鍵詞 extends 繼承父類：子類可以訪問父類中的公共和保護(hù)屬性鉴嗤、方法；子類可以賦值給父類

   // 父類 Animal
   class Animal {
       
   }
   
   // 子類 Dog
   class Dog extends Animal {
       
   }
   

5. 存取器

   類屬性的賦值和讀取方法

   class Employee {
       private _fullName: string;
   
       get fullName(): string {
           return this._fullName;
       }
   
       set fullName(newName: string) {        
           this._fullName = newName;
       }
   }
   

6. 抽象類

   通過關(guān)鍵詞 abstract 創(chuàng)建序调，不能被實(shí)例化醉锅，可以被繼承；

函數(shù)

1. 類型定義

   函數(shù)的類型包括參數(shù)類型和返回值類型发绢；傳遞給一個(gè)函數(shù)的參數(shù)個(gè)數(shù)必須與函數(shù)期望的參數(shù)個(gè)數(shù)一致

   function add(x: number, y: number): number {
       return x + y;
   }
   
   let add1: (x: number, y: number) => number = 
       function(x: number, y: number): number { return x + y; }
   

2. 可選參數(shù)

   可以通過 ? 實(shí)現(xiàn)可選參數(shù)功能硬耍；可選參數(shù)必須在必須參數(shù)之后

   function add(x: number, y?: number): number {
       return y ? (x + y) : x;
   }
   

3. 默認(rèn)參數(shù)

   在函數(shù)聲明的時(shí)候，設(shè)置參數(shù)的值边酒。函數(shù)調(diào)用時(shí)经柴，不傳入該參數(shù)或傳入 undefined 時(shí)，參數(shù)取設(shè)置的默認(rèn)值

   function add(x = 1, y: number): number {
       return x + y;
   }
   

4. 剩余參數(shù)

   剩余參數(shù)的接收方式為數(shù)組

   function add(x: number, ...rest: number[]): number {
       return rest.reduce((acc, cur) => acc + cur, x)
   }
   

5. this 參數(shù)

   this參數(shù)是個(gè)假的參數(shù)墩朦，它出現(xiàn)在參數(shù)列表的最前面坯认，指向當(dāng)前作用域?qū)ο?/p>

   interface Deck {
       suits: string[];
       createCardPicker: (this: Deck) => void;
   }
   
   let deck: Deck = {
       suits: ["hearts", "spades", "clubs", "diamonds"],
       createCardPicker: function (this: Deck) {
           console.log(this.suits[0])
       }
   }
   
   deck.createCardPicker()  // 輸出：hearts
   

6. this 指向

   	指向
   普通函數(shù)	函數(shù)所在作用域?qū)ο?/td>
   匿名函數(shù)	全局對(duì)象
   箭頭函數(shù)	函數(shù)所在作用域指向的對(duì)象

7. 函數(shù)重載

   函數(shù)名相同，參數(shù)個(gè)數(shù)或類型不同氓涣；調(diào)用時(shí)會(huì)匹配第一個(gè)符合條件的函數(shù)

   function add(x: number): number {
       return x + 1
   }
   
   function add(x: number, y: number): number {
       return x + y
   }
   

接口

不會(huì)檢查屬性的順序牛哺，只需相應(yīng)的屬性存在且類型正確即可

1. 可選屬性

   interface LabelledValue {
       label: string;
   }
   

2. 只讀屬性

   interface SquareConfig {
    color?: string;
    width?: number;
   }
   

3. 額外屬性檢查

   interface SquareConfig {
       color?: string;
       width?: number;
       [propName: string]: any;
   }
   

4. 函數(shù)類型

   包含參數(shù)列表和返回值類型的函數(shù)定義，參數(shù)列表里的每個(gè)參數(shù)都需要名字和類型

   interface SearchFunc {
    (source: string, subString: string): boolean;
   }
   
   let mySearch: SearchFunc;
   mySearch = function(source: string, subString: string) {
       let result = source.search(subString);
       return result > -1;
   }
   

5. 可索引的類型

   支持兩種索引簽名：字符串和數(shù)字劳吠，可以同時(shí)使用兩種類型的索引引润，但是數(shù)字索引的返回值必須是字符串索引返回值類型的子類型

   interface StringArray {
       [index: number]: string;
   }
   
   let myArray: StringArray;
   myArray = ["Bob", "Fred"];
   
   let myStr: string = myArray[0];
   

6. 類類型

   類可以通過 implements 實(shí)現(xiàn)一個(gè)接口規(guī)范，接口只對(duì)類實(shí)例進(jìn)行約束

   interface ClockInterface {
       currentTime: Date;
       setTime(d: Date);
   }
   
   class Clock implements ClockInterface {
       currentTime: Date;
       setTime(d: Date) {
           this.currentTime = d;
       }
       constructor(h: number, m: number) { }
   }
   

泛型

1. 泛型使用

   在函數(shù)和類聲明的時(shí)候赴背，以占位符的形式定義參數(shù)類型椰拒，在調(diào)用時(shí)傳入具體的參數(shù)

   function add<T>(x: T, y: T): T {
       return x + y;
   }
   
   let acc = add<number>(2, 3)
   

   class Arithmetic<T> {
       add(x: T, y: T): T {
        return x + y;
    }
   }
   
   let arithmetic = new Arithmetic<number>()
   let acc = arithmetic.add(2, 3)
   

2. 泛型約束

   通過 extends 可以對(duì)泛型進(jìn)行類型限制

   interface Lengthwise {
       length: number
   }
   
   function computeLength<T extends Lengthwise>(value: T): number {
       return value.length
   }
   

裝飾器

1. 裝飾器是一種特殊類型的聲明晶渠，本質(zhì)上就是一個(gè)方法凰荚，可以注入到類燃观、方法、屬性便瑟、參數(shù)上缆毁，擴(kuò)展其功能；在運(yùn)行時(shí)會(huì)執(zhí)行該方法

   @f x
   

   	簽名
   類裝飾器	declare type ClassDecorator = <TFunction extends Function>(target: TFunction) => TFunction
   方法裝飾器	declare type MethodDecorator = <T>(target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | void
   屬性裝飾器	declare type PropertyDecorator = (target: Object, propertyKey: string | symbol) => void
   參數(shù)裝飾器	declare type ParamDecorator = (target: Object, propertyKey: string | symbol, index: number) => void

   target 當(dāng)前對(duì)象原型到涂；propertyKey 方法脊框、屬性、參數(shù)名稱践啄；descriptor 方法的屬性描述符浇雹；index 參數(shù)數(shù)組中的位置

2. 裝飾器工廠

   通過閉包的形式，返回一個(gè)函數(shù)屿讽，實(shí)現(xiàn)向裝飾器傳入?yún)?shù)

   function color(value: string) {
       return function (target: Function){
           //TODO
       }
   }
   
   @color('red')
   class ColorRed {
       
   }
   

3. 執(zhí)行順序

   裝飾器工廠：先執(zhí)行工廠函數(shù)昭灵，然后執(zhí)行裝飾器函數(shù)

   多個(gè)裝飾器：裝飾工廠函數(shù)有上向下執(zhí)行；裝飾器函數(shù)由下向上執(zhí)行

   function f() {
       console.log("f(): evaluated");
       return function (target, propertyKey: string, descriptor: PropertyDescriptor) {
           console.log("f(): called");
       }
   }
   
   function g() {
       console.log("g(): evaluated");
       return function (target, propertyKey: string, descriptor: PropertyDescriptor) {
           console.log("g(): called");
       }
   }
   
   class C {
       @f()
       @g()
       method() {}
   }
   

   執(zhí)行結(jié)果

   f(): evaluated
   g(): evaluated
   g(): called
   f(): called
   

4. Vue2 使用

   需要安裝 vue-property-decorator 插件

   npm install vue-property-decorator --save
   

   import { Vue, Component, Prop, Watch, Ref, Emit } from 'vue-property-decorator'
   
   @Component // 組件伐谈，引入組件時(shí) @Component({ components: { ... } })
   export default class CommonMenu extends Vue {
       // 生命周期
       created(){
           
       }
    // 屬性
       @Prop({ type: String, default: '' }) readonly name?: 'Li';
       // 響應(yīng)式數(shù)據(jù)
       message: string = 'hello';
    // 計(jì)算屬性
    get greet() {
           return `${this.message},${this.name}`;
       }
       // 數(shù)據(jù)監(jiān)聽
       @Watch('name', {})
       changeName(val: String, oldVal: String) {
           console.log(`watch: ${val}/${oldVale}`)  
       }
       // 方法
       hello() {
           console.log(`hello word`)
       }
       // ref
       @Ref('header') readonly headerRef!: any;
    // 向父組件傳值：接收方式 @change-msg=""烂完，默認(rèn)為方法名稱
    @Emit('changeMsg')
    handleMsg() {
           return this.message // 要傳遞的值
       }
   }
   

命名空間

1. 通過代碼塊的形式分割變量、函數(shù)和類的聲明诵棵，以 export 形式導(dǎo)出可訪問項(xiàng)

   namespace Validation {
       export interface StringValidator {
           isAcceptable(s: string): boolean;
       }
   }
   

2. 導(dǎo)入

   通過 /// <reference path="xxx.ts" /> 形式引入命名空間

   // shapes.ts
   namespace Shapes {
       export namespace Polygons {
           export class Square {
               readonly name: string
               constructor() {
                   this.name = 'Square';
               }
           }
       }
   }
   

   /// <reference path="shapes.ts" />
   
   import polygons = Shapes.Polygons;
   let sq = new polygons.Square();
   

3. 別名

   通過 import q = x.y.z 形式對(duì)常用對(duì)象進(jìn)行重新命名

   import polygons = Shapes.Polygons;
   

   原文鏈接：TypeScript初學(xué)