《TypeScript初識》

安裝編譯

1. 安裝

   npm install -g typescript           

2. 編譯

   tsc 檔案名.ts           

配置自動編譯

有建構工具(

webpack

等)會自動建構

1. 在項目目錄中運作指令，生成ts配置檔案

   tsconfig.json

   tsc --init           

2. 打開

   tsconfig.json

   ， 修改輸出的目錄

   "outDir": "./js"           

3. 視窗選擇

   終端 --> 運作任務 --> 顯示所有任務 --> tsc:監視

資料類型和效驗

必須指定變量的類型

• boolean

  布爾類型

  var flag:boolean = true // 指定布爾類型           

• number

  數字類型

• string

  字元串類型

• array

  數組類型

  // 資料中的元素必須是number類型
  const abc:number[] = [1,21]
  
  const arr:Array<number> = [11,22]           

• null

  和

  undefined

  var num:undefined;
  
  // 可以為number或者undefined
  var num:number | undefined;           

• enum

  枚舉類型

  // 枚舉類型
  /**
   * enum 枚舉名 {
   *      辨別符[=整型常數]
   *      辨別符[=整型常數]
   * }
  */
  // 如果辨別符沒有指派則列印下标
  enum Flag {success=1,error=2}
  
  let s:Flag = Flag.success           

• tuple

  元組類型，數組的一種

  // 表示第一項為number，第二項為string
  const arrTuple:[number,string] = [123,'字元串']           

• any

  任意類型

  var num:any = 123           

• void

  // 沒有任何類型 用于定義方法 方法沒有傳回值
  function run():void{}           

• never

  // 其他類型 包含（null和undefined） 代表從不會出現的值
  var a:undefined;
  a=undefined // a 隻能等于undefined           

  var a:never;
  // 從不會出現的值
  a = (()=>{
     throw new Errorr('錯誤') 
  })()           

函數的定義

1. 函數聲明

   function run():string {
       return '字元串'
   }           

2. 匿名函數

   var fun2 = function():number {
       return 123
   }
   
   fun2() // 調用方法           

3. 定義方法傳參

   function getInfo(name:string, age:number):string{
       return name
   }           

4. 沒有傳回值的方法

   function run():void {
   }           

5. 可選參數方法

   ts形參實參需要統一，如果不同意需要在參數後面加上 ?

   function getInfo(name:string, age?:number):string{
       return name
   }           

6. 預設參數

   function getInfo(name:string, age:number=20):string{
       return name
   }           

7. 剩餘參數

   function sum (...data:number) { // 剩餘參數每一項都是number
       
   }           

8. 函數重載

   java中方法的重載：兩個或兩個以上同名函數，但是他們參數不一樣，這時會出現重載的情況

   typescript重載：通過為同一個函數提供多個函數類型定義來試下多種功能的目的

   ts為了相容es5 以及 es6 重載的寫法有差別

   function getInfo(name:string):string;
   function getInfo(age:number):number;
   function getInfo(str:any):any {
       if(typeof str === 'string'){ // 比對為字元串
           return str
       } else { // 比對為數字
           return str
       }
   }           

對類的定義

1. 定義一個類

   class Person{
       private name:string
       constructor(name:string) {
           this.name = name
       }
       getName():string{
           return this.name
       }
       setName(name:string):void{
           this.name = name
       }
   }
   var p = new Person('張三')
   p.getName           

2. 繼承

   class extends Person {
       constructor(name:string){
           super(name) // 傳入name給父級 初始化父類的構造函數
       }
   }           

3. 類的修飾符

   不加修飾符，預設就是公有

   • public：公有 都可以通路
   • protected：在類裡面、子類可以通路，類外部不行
   • private：私有 隻有類裡面可以通路
4. 多态

   父類定義一個方法不去實作，讓繼承他的子類去實作，每一個子類有不同的表現

   class Animal {
       name:string;
       custructor(name:string) {
           this.name = name
       }
       eat() {
           console.log('吃的什麼');
           
       }
   }
   
   class Dog extends Animal {
       custructor(name:string) {
           super(name)
       }
       eat () {
           return this.name + '吃餅幹'
       }
   }           

5. typescript中的抽象類，它是提供其他類繼承的基類，不能直接被執行個體化

   abstract

   抽象方法隻能放在抽象類中 抽象類中所有的東西都是抽象的

   abstract class Animal {
       abstract eat():ant; // 它的子類必須包含eact方法
   }           

泛型

可以支援不特定的資料類型 要求：傳入的參數和傳回的參數一緻

1. 泛型函數

   function getData<T>(value:T):T { // T表示泛型，傳入的是泛型，傳回的也是泛型
       return 'abc'
   }
   getData<number>(123)           

2. 泛型類

   class MinClass<T> {
       list:T[] = []
   }
   var m = new MinClass<number>()           

3. 泛型接口

   interface ConfigFn {
       <T>(value:T):T
   }
   var getData:ConfigFn = function<T>(value:T):T{
       return value
   }           

裝飾器

1. 普通裝飾器

   function logClass(params:any) {
       // params 就是目前類 
       // 給目前類擴充一個 變量
       params.prototype.apiUrl = 'xxx'
       
       // 擴充一個方法
       params.prototype.run = function() {
           
       }
   }
   
   @logClass // 調用logClass裝飾器
   class  HttpClient {
       constructor() {
           
       }
   }
   var http = new HttpClient()
   http.apiUrl // 調用擴充的變量           

2. 裝飾器工廠

   function logClass(params:string){
       return function(target:any){
           
       }
   }
   @logClass('hello') // 把hello傳給params HttpClent傳給target
   class HttpClient{
       constructor() {}
   }           

3. 在裝飾器中修改傳入類的資料

   function logClass(target:any){
       return class extends target{ // 繼承傳入的類後進行修改
           apiUrl:any = "修改後的apiUrl"
       }
   }
   
   @logClass
   class HttpClent {
       public apiUrl:string|undefined
       constructor(){
           this.apiUrl = '我是構造函數裡面的'
       }
   }           

4. 屬性裝飾器

   function logProperty(params:any){
       return function(target:any，attr:any) {
          //target 類的原型對象  attr:屬性名稱
           target[attr] = params // 表示把類的屬性指派傳入進來的params
       }
   }
       
   class HttpClient{
       @logProperty('abc')
       public url:any
   }           

5. 方法裝飾器

   function logMethod(params:any){
       return function (target:any,methodName:any,desc:any){
           
       }
   }
   class HttpClient{
       @logProperty('params參數')
       getData() {}
   }           

   • target

     對于靜态成員來說是類的構造函數，對于執行個體成員來說是原型對象

   • methodName

     成員的名字

   • desc

     成員對應的參數
6. 方法參數裝飾器

   function loParams(params:any) {
       return function (target:any,paramsName:any,paramsIndex:any){
           
       }
   }
   
   class HttpClient{
       public url:any
       constructor() {}
       getData(@logParams('params參數')){}
   }           

   • target

   • paramsName

     參數的名字

   • paramsIndex

     參數在函數清單中的索引
   本文為作者原創筆記~，喜歡記得給作者點贊、轉發支援一下哦~，轉載請注明出處！