typescript从0到1全过程总结+vue整合typescript

TypeScript 是 JavaScript的一个超集

1. 下载：

npm install typescript -g

2. 生成配置文件（tsconfig.json）： 解决VsCode 红色下滑线警告

tsc --init

3. 运行：

tsc ts文件名.ts

可通过 -w 实时监听ts文件的改变，执行tsc ： tsc ts文件名.ts -w

注意事项：

TS 需要编译成 JS 才能被浏览器所解析
即使typescript编译报错，也可以生成js文件

数据类型：

字符串类型：

数字类型：

布尔类型：

数组类型：

元祖类型：

枚举类型：

any类型：（任何类型）

void类型：（空类型：用于函数是否有返回值）

undefined 和 null 类型：

联合类型：（可以是指定中的任何一种类型）

类型推论：（定义变量时没有赋值则推论为any类型，赋值则为初始时的类型）

类型断言：（当值的类型不确定时，手动指定一个值的类型）

函数

函数的参数

可选参数：（？）

剩余参数：（...）

函数的重载：

接口：（行为的抽象，对数据的约束）

接口的定义： interface 接口名 {} 规范的接口名： I接口名首字母大写（I：interface）

实现接口： implements 接口名

定义接口时，只需要声明即可，不包含具体的实现
实现接口时，必须实现接口中的内容

应用场景：当一个东西，必须有一个或多个功能时，即可定义为一个接口。

例如：打印机（每台打印机都有一个打印功能）

/** 定义一个打印机接口
 * 内部存在一个打印功能（函数） 只需要声明，不包含具体实现
 */
interface Iprint {
  printing(mes: string): string
}

// 对接口的继承
interface Ipeintmes extends Iprint {
  getMes(mes: string): void
}
// 实现 Ipeintmes 接口 ，必须实现 Ipeintmes接口中的方法和继承至 Iprint接口中的方法
class Printe implements Ipeintmes {
  printing(mes: string): string {
    return mes
  }
  getMes(mes: string) {
    console.log(mes)
  }
}
var printe = new Printe()
printe.getMes('HP1001-1')

// ----------------------- 对类的约束------------------------------
/**实现接口 : implements 接口名
 * 必须实现接口中的内容
 * (如果要实现多个接口，在接口名称后面逗号分隔即可)
 */
class Printer implements Iprint {
  printing(mes: string): string {
    return '打印了' + mes
  }
}

var pri = new Printer()
var value = pri.printing('简历')
console.log(value)

// ---------------------- 对函数的约束 ---------------------------
/** function 两个参数，第一个参数是字符串类型，第二个参数是数字类型，返回值是布尔类型 */
interface Ifunc {
  (a: string, b: number): boolean
}
var fun1: Ifunc
fun1 = (a: string, b: number) => {
  return false
}
// 函数 fun1 参数不能改变类型
// fun1 = (a: number, b: number) => {   无法编译
//   return false
// }

// -------------------- 对数组的约束 ---------------------------
interface Iarr {
  [index: number]: string
}
var array: Iarr
array = ['12', '2', '3']
// array = ['12', '2', '3', 1]  数组只能是字符串类型  无法编译

// ------------------- 对json 的约束 --------------------------
interface Ijson {
  name: string
  readonly age: number // 只读属性 readonly
  email?: string // 可选属性 ?
}
function showJson(data: Ijson) {
  // data.age = 16   age 为只读属性，不可被更改   无法编译
  console.log(JSON.stringify(data))
}
showJson({ name: 'vs', age: 18 })
showJson({ name: 'vs', age: 18, email: '110' })
// showJson({ name: 'vs', age: '18' })  age为number类型 无法编译

类

类的定义：（class）

类的继承：（extend）继承与上面的Person类

使用：

var stu1 = new Student(1)
console.log(stu1.getMes())

访问修饰符：

public（共有的/默认）可以在任意范围内使用
private（私有的）只能在当前类内部使用
protected（受保护的）只能在父类或继承父类的子类内部使用

class Father {
  public name: string
  private age: number
  protected email: string
  constructor(name: string, age: number, email: string) {
    this.name = name
    this.age = age
    this.email = email
  }
  getMyMes() {
    console.log(
      'name:' + this.name + ',age:' + this.age + ',email:' + this.email
    )
  }
}
class Child extends Father {
  getMes() {
    console
      .log
      //   'name:' + this.name + ',age:' + this.age + ',email:' + this.email
      // this.age 无法编译
      ()
  }
}
var child = new Child('吕布', 18, '123456@qq.com')
console.log(child)
console.log(child.name)
// console.log(child.age) // age 为 私有属性，无法在Father类外部访问
// console.log(child.email) // email 为 受保护属性，无法在Father类与Child类外部访问

静态属性和静态方法（当一个属性或方法不依赖与实例化出来的一个实例，即可使用静态）

多态：（同一个父类中的方法，不同子类有不同的实现）

class Animal {
  eat() {
    console.log('animal eat')
  }
}
class Cat extends Animal {
  eat() {
    console.log('猫吃鱼')
  }
}
class Dog extends Animal {
  eat() {
    console.log('狗吃骨头')
  }
}
var dog = new Dog()
dog.eat()

抽象类和抽象方法：

抽象类是提供其他类继承的基类（父类），不能直接被实例化
抽象方法只能包含在抽象类中，但是抽象类中可以包含抽象方法和非抽象方法
子类继承抽象类时，必须实现抽象类中的抽象方法（除非子类自身也是一个抽象类）
抽象方法只提供一个方法，没有具体的实现，如同接口一般

抽象类的定义： abstract class { }

abstract class Animal0 {
  abstract eat(): void // 抽象方法，只提供了一个方法，并没有具体实现
  run() {
    console.log('run run run ')
  }
}
class Rabbit extends Animal0 {
  eat() {
    console.log('兔子吃草')
  }
}
class Cattle extends Animal0 {
  eat() {
    console.log('牛吃草')
  }
}
var rabbit = new Rabbit()
rabbit.eat()
var cattle = new Cattle()
cattle.eat()

内置对象

/** JS的内置对象
 * Boolean
 * Number
 * String
 * Date
 * RegExp
 * Error
 */
// 大写的声明类型 是 需要 new 的一个对象
let b: Boolean = new Boolean(1)
// let b1:boolean = new Boolean(0) // 编译失败
let n: Number = new Number(3)
let s: String = new String('111')
let d: Date = new Date()
let r: RegExp = /^1/
let e: Error = new Error('error message')

/**DOM 和 BOM 的内置对象*/
const div: HTMLElement = document.getElementById('test')
const divs: NodeList = document.querySelectorAll('p')
document.addEventListener(
  'click',
  (event: MouseEvent) => {
    console.log(event.target)
  },
  false
)
const fragment: DocumentFragment = document.createDocumentFragment()

声明文件

当使用第三方库时，需要引用它的声明文件，才能获得对应的代码补全、接口提示等功能
声明语句：如果需要ts对新的语法进行检查，需要加载对应的类型说明代码
declare var jQuery:(selector:string) => any
声明文件：把声明语句放到一个单独的文件(jQuery.d.ts)中，ts会自动解析到项目中所有的声明文件
下载声明文件 npm install @types/jquery(第三方库名) --save-dev

泛型

泛型是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的使用再指定类型中的一种特性

定义泛型： < T > T(泛型名称，默认统一为T)

使用泛型

泛型函数：

function itemValue<T>(arr: T[]): void {
  for (var item of arr) {
    console.log(item)
  }
}
itemValue<number>([11, 22, 33])  // 指定泛型为number ；函数中的参数，数组中的每一个元素必须是数字类型
itemValue(['aa', 'bb', 'cc'])

泛型类：

class ArrList<T> {
  list: T[] = []
  add(val: T): void {
    this.list.push(val)
  }
}
var arrlist = new ArrList()
arrlist.add(1)
arrlist.add(23)
console.log(arrlist)

泛型接口：

interface Iport<T> {
  (x: T, y: T): T
}
var iport1: Iport<number>
iport1 = function(x: number, y: number) {
  return x + y
}
console.log(iport1(6, 1))
// console.log(iport1())

命名空间：

为了避免各种变量命名冲突，可将相似功能的函数、类、接口等放置到命名空间
定义命名空间 namespace 名称 { }
访问命名空间内部的成员，需要 export 将其导出

模块定义：

export namespace A {
  interface IAnimal {
    name: string
    eat(): void
  }
  export class Dog implements IAnimal {
    name: string
    constructor(name: string) {
      this.name = name
    }
    eat() {
      console.log(`${this.name}啃骨头`)
    }
  }
  export class Cat implements IAnimal {
    name: string
    constructor(name: string) {
      this.name = name
    }
    eat() {
      console.log(`${this.name}吃鱼`)
    }
  }
}
export namespace B {
  interface IAnimal {
    name: string
    eat(): void
  }
  export class Dog implements IAnimal {
    name: string
    constructor(name: string) {
      this.name = name
    }
    eat() {
      console.log(`${this.name}吃肉`)
    }
  }
  export class Cat implements IAnimal {
    name: string
    constructor(name: string) {
      this.name = name
    }
    eat() {
      console.log(`${this.name}吃老鼠`)
    }
  }
}

使用模块：