什么是TypeScript？

• TypeScript是微軟公司開發(fā)的一款開源的JavaScript超集語言（JavaScript超集：當前的任何JavaScript都是合法的TypeScript代碼）
• TypeScript主要為JavaScript提供了類型系統(tǒng)和ES6語法的支持
• Flow是一個類型檢查工具，TypeScript是一種開發(fā)語言。TypeScript有自己的編譯工具，我們寫好的TypeScript代碼最終會通過編譯器編譯成JavaScript代碼進行運行

初始化

官方文檔
安裝 npm install -g typescript
使用 tsc greeter.ts

配置文件

tsc --init生成tsconfig.json

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

// number
let decimal: number = 6;
let decimal2: number = NaN;
let decimal3: number = Infinity;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

// string
let color: string = "blue";
color = 'red';
let str: string = `hello${color}`;

// boolean
let isDone: boolean = false;

// 數(shù)組
// 1.Array<數(shù)據(jù)類型>
let list1: Array<number> = [1, 2, 3];
// 2.數(shù)據(jù)類型[]
let list2: number[] = [1, 2, 3];

// 元祖
let x: [string, number];
x = ["hello", 10]; // OK
x[3] = "world"; // OK, 'string' can be assigned to 'string | number'
x[6] = true; // Error, 'boolean' isn't 'string | number'

// void 空值
let unusable: void = undefined;

// undefined
let u: undefined = undefined;

// null
let n: null = null;

// any：任意類型
let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false;

// never：用在不可能返回內(nèi)容的函數(shù)的返回值類型設(shè)置
function test(): never {
  while (true) {

  }
}
// object類型
let o: object = {}
let obj: object = []

// 對象類型
let Person: {name: string, age: number} = {name: 'fxd', age: 22}

// 枚舉類型，沒賦值就是 0 1 2
enum Gender {
  male = 1,
  female = 0,
  unknow = -1
}
let gender: Gender = Gender.male
let sss = {
  gender: Gender.male
}

// 類型推斷
let strr: any = 'fxxxxx'
let len: number = (<string>strr).length

類

class PersonA {
  // ts中屬性必須聲明，必須指定類型
  name: string
  // 聲明屬性，必須有默認值，或在構(gòu)造函數(shù)中初始化
  age: number = 10
  constructor (name: string) {
    this.name = name
  }
  sayHi(msg: string):void {
    console.log(msg)
  }
}

類的繼承

class Animal {
  age: number
  constructor (age: number) {
    this.age = age
  }
  move(distance: number = 0) {
      console.log(`運動距離是 ${distance}`);
  }
  bark() {
    console.log('我是animal中的叫');
}
}

class Dog extends Animal {
  type: string
  constructor (age: number, type: string) {
    super(age)
    this.type = type
  }
  // 重復(fù)定義，子類中的方法會覆蓋
  bark() {
      console.log('我是dog中的叫');
  }
}

const dog = new Dog(2, "拉布拉多");
dog.bark();
dog.move(10);
dog.bark();

訪問修飾符

在類的成員前通過添加關(guān)鍵字來設(shè)置當前成員的訪問權(quán)限

// public: 公開的，所有人都可訪問
// private: 私有的，當前類能訪問
// protected: 受保護的，當前類或子類能訪問
enum Color {
  red,
  yellow,
  blue
}
// 父類
class Car {
  color: Color
  constructor () {
    this.color = Color.red
  }
  private run () {
    console.log('run')
  }
  protected move () {
    console.log('move')
    this.run()
  }
}
// 子類
class Audi extends Car {
  moveSon () {
    this.move()
  }
}
// 實例
let myCar = new Car()
console.log(myCar.color)

只讀屬性 參數(shù)屬性

class Cat {
  readonly name: string
  // 構(gòu)造函數(shù)中參數(shù)前加修飾符，相當于聲明了該屬性
  constructor(public type: string) {
    this.name = '納豆'
  }
}
let nd = new Cat('英短')
// nd.name = 'ndd'  // 報錯，只讀屬性不能被賦值

存取器

class Human {
  private _name: string = ""
  // 存取器
  get name (): string{
    return this._name
  }
  set name (value: string) {
    // 設(shè)置器，可以做相關(guān)校驗
    if (value.length < 3 || value.length > 8) {
      throw new Error("3-8位才行?。。?)
    }
    this._name = value
  }
}
let fxd = new Human()
fxd.name = "hhhh"
console.log(fxd.name)

接口

接口： 約定，規(guī)范
屬性后面加?是只讀屬性

// 接口使用interface進行生命
interface AjaxOptions {
  url: string,
  // 可選屬性
  type?: string,
  data: object,
  success(data: object): void
}

function ajax(options: AjaxOptions) {

}

ajax({
  url: 'http://www.baidu.com',
  // type: 'get',
  data: {},
  success(data) {

  }
})

屬性前面加readonly是只讀屬性
額外的屬性檢查

interface Point {
  readonly x: number,
  y: number,
  // 額外的屬性檢查
  [propName: string]: any
}
let poi: Point = {
  x: 10,
  y: 20,
  z: 100
}
// poi.x = 20 // 報錯，只讀屬性

函數(shù)類型接口

interface SumInterface {
  (a: number, b: number): number
}
let sum: SumInterface = function (a: number, b: number) {
  return a + b
}

類類型接口

interface PersonInterface {
  name: string,
  age: number,
  eat(): void
}
class XiaoMing implements PersonInterface {
  name: string = "小明"
  age: number = 20
  eat () {
    console.log('eat')
  }
}

接口的繼承

接口繼承接口

interface TwoPoint {
  x: number,
  y: number
}
interface ThreePoint extends TwoPoint {
  z: number
}
let point: ThreePoint = {
  x: 100,
  y: 200,
  z: 333
}

混合繼承

interface TwoPoint {
  x: number,
  y: number
}
interface ThreePoint {
  z: number
}
interface FourPoint extends TwoPoint, ThreePoint {
  time: Date
}
let point: FourPoint = {
  x: 100,
  y: 200,
  z: 333,
  time: new Date()
}

接口繼承類

class Bird {
  type: string = "布谷鳥"
  fly(): void {

  }
}
interface Fly extends Bird {

}
let flyingBird: Fly = {
  type: "布谷鳥",
  fly(): void {

  }
}