TypeScript使用

TS（TypeScript）學習筆記

• • ts-變量的定義
  • 類型别名
  • 類 ----- calss
  • 修飾符
  • 類實作接口

安裝

npm install -g typescript

編譯

在指令行上，運作TypeScript編譯器： tsc 檔案名.ts

ts-變量的定義

與js相比對變量做了一些類型限制

• 布爾類型

• 數值類型

• 字元串類型

• 任意類型

• 聯合類型

• 數組類型 定義： 類型+[]

let arr:number[] = [1,2,3];
let arr1:string[] = ['1','2','3'];
var arr2:any[] = [1,'1', true]; // arr2可以為任意類型
           

• 對象類型 使用接口-- interface

interface Person {
    firstName: string;
    lastName?: string; // 表示不是必須參數， 如果不加？ 必須傳入lastName 否則報錯
    [propName:string]:any; // 任意屬性
}
function greeter(para: Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}
let user = { firstName: "Jane", lastName: "User" };
document.body.innerHTML = greeter(user);
           

• 函數的類型 輸入類型 輸出類型

function sum(x:number,y:number):number { // 第三個number指定的輸出類型
 	return x+y
 }
 sum(2,3)
 // 可以為參數傳入預設值  
 function(x:number=1, y:number=1) {}
           

類型别名

• 類型别名 type

// 類型别名  type
  function fn(i: number): number {
    return i
  }
  // ==> 等價于
  type n = number
  function fn1(i: n): n {
    return i
  }

  // 聯合類型别名
  type a = string | number[]

  var x1: a = [2]
  var x2: a = 'aaa'
           

類 ----- calss

類(class)：定義了一件事物的抽象特點，包括它的屬性和方法

• 之前ES5 中的寫法

function Person(name, age) {
    this.name = name
    this.age = age
  }
  Person.prototype.toString = function () {
    return this.name
  }
  var p = new Person('小明', 18)
  console.log(p.name) // 小明
  p.toString()

           

• ES6 中 用類的寫法

class Person1 {
    name1: any // 提前定義值類型
    age1: number
    constructor(name1, age1) {
      this.name1 = name1
      this.age1 = age1
    }
    toString() {
      return this.name1
    }
  }
  var p2 = new Person1('小王', 18)
           

• 類的繼承（extends）

super 關鍵字 子類繼承父類中構造函數的屬性和方法

class A {
    a: String
    constructor() {
      this.a = 'aa'
    }
  }

  class B extends A {
    b: number
    constructor() {
      super()
      this.b = 222
    }
  }
  var a = new A()
  var b = new B()
  console.log(b.a) // aa
           

修飾符

• static

靜态方法 修飾符 不需要執行個體化 可以直接通過類來調用

class Animal2 {
    static animalName: string = '狗'
    static eat() {
      // 添加修飾符
      return '吃肉'
    }
  }
  Animal2.eat() //  吃肉   // 不需要執行個體化(不需要new Animal2())
  Animal2.animalName
           

• public ------ private ------ protected

public 修飾的屬性或者方法是公有的，可以在任何地方被通路到，預設所有的屬性和方法都是 public

private 修飾的屬性和方法是私有的，不能在聲明它的類的外部通路

protected 修飾的屬性或者方法是受保護的，它和private 類似， 差別是它在子類中也是允許被通路的

// private
  class A3 {
    private eat() {
      // 無法通路
      return '吃肉'
    }
    public eat1() {
      return '吃火燒肉'
    }
  }

  var p3 = new A3()
  // p3.eat()   // 通路報錯  但部影響正常編譯
  p3.eat1() // 正常通路
}

// protected

class A4 {
 protected eat() {
    return '吃羊肉'
  }
  public eat1() {
    return '吃豬肉'
  }
  private eat2() {
    return '吃驢肉'
  }
}

class D1 extends A4{
  constructor() {
    super()
  }
  fun() {
    return this.eat()    // 可以在内部通路到
  }
  fun1() {
    // return this.eat2()  // 不能通路
  }
}

var d4 = new D1();
d4.eat1(); // 可以通路  // 吃豬肉
// d4.eat()  // 無法通路  因為protected
           

類實作接口

// 接口
interface Obj {
  name: string;
  action(): string;
}
// 類實作接口 implements實作
class A8 implements Obj {
  name: string;
  constructor() {
    this.name = name
  }
  action() {
    return '字元串'
  }
  // action() {   // 報錯  傳回值必須是string
  //   return 1111
  // }
}