擁抱TS（typescript）吧，面對疾風吧！！！

 

 

 

^前言

自從搭建了VUE和TS版本后，已經深深的愛上了這個TS啦，有着Java這中強勢類型聲明，

還能起到注釋的作用，當我們看到一函數后我們立馬就能知道這個函數的用法，需要傳什么值，

返回值是什么類型一目了然，對大型項目的維護性有很大的提升。

嗚嗚

面對疾風吧！！！

先來看下基礎 哈哈

當然官網也是可以看的 下面是鏈接 https://www.tslang.cn/

基礎總結

數據類型

• boolean 、number、string、null、 undefined、 Symbol
• undefined 和null 類型的數據只能被賦值undefined 和null， 但是這個類型是所有類型的子類型
• void 空類型

 // undefined和null是所有類型子類型，都可以賦值
    let num: Symbol = undefined;
    let num: number = undefined;
    // undefined類型， 只能給undefined
    let u: undefined = undefined; 
    let n: null = null

 其實基本類型都是 ：+它的類型 來定義 是不是更加吊了

any和類型推斷

// 在ts中，變量在聲明的時候，如果沒有定義其類型，會被識成默認類型 
   let str;
   str = 'I am strgting';
   str = 1024;
   // 未定義類型，直接賦值
   let num= 124; 
   // 等同於 let num:number = 124, 在后面代碼如果賦予num一個string會被報錯

多個可能屬性

 //只能訪問可能屬性的共有屬性
    function getLength(param: string| number) {
        return param.length;
    }
    // 會報錯， 因為 length不是 sting和number類型的共有屬性
    // 技巧--》 使用類型別名
    type possibleType = string | number;
    function getLength(param: possibleType) {
        return param.length;
    }

接口的概念

• 在ts中，interface包括對行為的抽象，由類去實現（implements）
• 也包括對對象輪廓的描述

對象interface -》動態屬性

必選參數和可選參數的類型是動態屬性類型的子集，所有在動態屬性類型設置的時候要設置上所有類型

 interface userinfo {
    "memberId": number,
    "uName": string,
    "employeeId": string,
    "datetime": string,
    "platformList"?: Array<platform>,
    [propName: string]: string | number | Array<platform> | undefined
  }

只讀屬性的約束力

注意點： 只讀屬性的約束力在於第一次給對象賦值的時候，

而不是給屬性賦值的時候 readonly和 const的區別： const是變量， readonly是屬性

接口-》抽象方法的實現

 export interface ISRequest {
      fetch(url: string, arg?: Object, callback?: Function): Promise<Object>;
    }
    
 export class SafeRequest implements ISRequest {
      public async fetch(url: string, arg, callback?: Function): Promise<Object> {
          return new Promise((resolve, reject) => {      
       })
  }

用接口表示數組

  interface NumberArray {
        [index: any]: number
    }
  let numArr: NumberArray = [1, 2, 3]

函數的類型

• 可選參數, 必須在必選參數后面
• 參數默認值

function buildName(firstName: string, lastName?: string) {
        
}

類型斷言

一共2種寫法：尖括號<>和 as :

let someValue: any = "this is a string";
 
let strLength: number = (<string>someValue).length;
let strLength: number = (someValue as string).length;

 

類型斷言的用法如上，在需要斷言的變量前加上 <Type> 即可。
類型斷言不是類型轉換，斷言成一個聯合類型中不存在的類型是不允許的：

function toBoolean(something: string | number): boolean {
    return <boolean>something;
}

 

枚舉--》 數據的雙向映射

枚舉按照枚舉成員的類型可歸為兩大類：數字枚舉類型和字符串枚舉類型；

// 枚舉使用 enum 關鍵詞來聲明一個枚舉，數字枚舉和字符串枚舉的區別
// 就是枚舉成員是常數還是字符串；還是以十二生肖為例：
// 01-數字枚舉，聲明了一個枚舉成員均不帶初始化器的枚舉,
// 該枚舉的成員值從 0 開始，依次遞增
enum NumChineseZodiac {
  rat,
  cattle,
  tiger,
  rabbit,
  dragon
}
// 02-字符串枚舉
enum StrChineseZodiac {
  rat = 'rat',
  cattle = 'cattle',
  tiger = 'tiger',
  rabbit = 'rabbit',
  dragon = 'dragon'
}

泛型： Generics

軟件工程的一個主要部分就是構建組件，構建的組件不僅需要具有明確的定義和統一的接口，同時也需要組件可復用。

支持現有的數據類型和將來添加的數據類型的組件為大型軟件系統的開發過程提供很好的靈活性。

在 C# 和 Java 中，可以使用"泛型"來創建可復用的組件，並且組件可支持多種數據類型。這樣便可以讓用戶根據自己的數據類型來使用組件

1. 泛型方法

在TypeScript里， 聲明泛型方法 有以下兩種方式：

function gen_func1<T>(arg: T): T {
 return arg;
}
// 或者
let gen_func2: <T>(arg: T) => T = function (arg) {
 return arg;
}

調用方式也有兩種：

gen_func1<string>('Hello world');
gen_func2('Hello world'); 
// 第二種調用方式可省略類型參數，因為編譯器會根據傳入參數來自動識別對應的類型。

2. 泛型與 Any

Ts 的特殊類型 Any 在具體使用時，可以代替任意類型，咋一看兩者好像沒啥區別，其實不然：

// 方法一：帶有any參數的方法
function any_func(arg: any): any {
 console.log(arg.length);
        return arg;
}
 
// 方法二：Array泛型方法
function array_func<T>(arg: Array<T>): Array<T> {
     console.log(arg.length);
        return arg;
}

方法一，打印了 arg 參數的 length 屬性。因為 any 可以代替任意類型，所以該方法在傳入參數不是數組或者帶有 length 屬性對象時，會拋出異常。

方法二，定義了參數類型是 Array 的泛型類型，肯定會有 length 屬性，所以不會拋出異常。

 

3. 泛型類型

泛型接口：

interface Generics_interface<T> {
 (arg: T): T;
}
  
function func_demo<T>(arg: T): T {
 return arg;
}
 
let func1: Generics_interface<number> = func_demo;
func1(123); // 正確類型的實際參數
func1('123'); // 錯誤類型的實際參數

 

 

Vue in Typescript

三大利器

• vue-component-class
  • 方法可以直接聲明為類成員方法。
  • 可以將計算屬性聲明為類屬性訪問器。
  • 默認data被當作類屬性
  • data ， render 和vue的生命周期的鈎子直接是類成員的方法，保留這些命名，不要沖突
  • 對於其他的配置項，例如prop、componets等傳遞給裝飾器函數

- vue-property-decorator(依賴vue-component-class提供了更多了裝飾器，代碼更加顯示 )
    - @Emit
    - @Inject
    - @Prop
    - @Provide
    - @Watch
- vuex-class（連接了vue和vuex）
    

從 vue2.5 之后，vue 對 ts 有更好的支持。比較喜歡下面這個寫法

import { Component, Vue, Prop } from 'vue-property-decorator'
 
@Component
export default class Test extends Vue {
 @Prop({ type: Object })
 private test: { value: string }

 

在這里列舉幾個常用的@Prop/@Watch/@Component, 更多信息，詳見官方文檔

import { Component, Emit, Inject, Model, Prop, Provide, Vue, Watch } from 'vue-property-decorator'

@Component
export class MyComponent extends Vue {
  
  @Prop()
  propA: number = 1

  @Prop({ default: 'default value' })
  propB: string

  @Prop([String, Boolean])
  propC: string | boolean

  @Prop({ type: null })
  propD: any

  @Watch('child')
  onChildChanged(val: string, oldVal: string) { }
}

上面的代碼相當於：

export default {
  props: {
    checked: Boolean,
    propA: Number,
    propB: {
      type: String,
      default: 'default value'
    },
    propC: [String, Boolean],
    propD: { type: null }
  }
  methods: {
    onChildChanged(val, oldVal) { }
  },
  watch: {
    'child': {
      handler: 'onChildChanged',
      immediate: false,
      deep: false
    }
  }
}

 

這些就是一些簡單的基礎，還是需要多多練習，我也就舉例了常用的那種，

我准備把我寫的demo 上傳到 GitHub上，

加油啊 騷年 哈哈