js语言进阶 - TypeScript

什么是TypeScript？

• TypeScript是微软公司开发的一款开源的JavaScript超集语言（JavaScript超集：当前的任何JavaScript都是合法的TypeScript代码）
• TypeScript主要为JavaScript提供了类型系统和ES6语法的支持
• Flow是一个类型检查工具，TypeScript是一种开发语言。TypeScript有自己的编译工具，我们写好的TypeScript代码最终会通过编译器编译成JavaScript代码进行运行

初始化

官方文档
安装 npm install -g typescript
使用 tsc greeter.ts

配置文件

tsc --init生成tsconfig.json

使用方法 tsc -p .\tsconfig.json

数据类型

// 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;

// 数组
// 1.Array<数据类型>
let list1: Array<number> = [1, 2, 3];
// 2.数据类型[]
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：用在不可能返回内容的函数的返回值类型设置
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
  // 声明属性，必须有默认值，或在构造函数中初始化
  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
  }
  // 重复定义，子类中的方法会覆盖
  bark() {
      console.log('我是dog中的叫');
  }
}

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

访问修饰符

在类的成员前通过添加关键字来设置当前成员的访问权限

// 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)

只读属性 参数属性

class Cat {
  readonly name: string
  // 构造函数中参数前加修饰符，相当于声明了该属性
  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) {
    // 设置器，可以做相关校验
    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)

接口

接口： 约定，规范
属性后面加?是只读属性

// 接口使用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 // 报错，只读属性

函数类型接口

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 {

  }
}