对typescript的认知

介绍

1. 微软开发
2. 开源
3. js的超集
4. 扩展了js的语法
5. 浏览器不能直接解析
6. 编写代码更加规范，增加了类型校验
7. 代码更有利于维护
8. 写ts代码必须指定类型

安装
npm i -g typescript

编译指令
tsc hello.ts

配置vscode，自动编译ts文件
1.tsc --init，改tsconfig.json的outDir
2.点击菜单 任务-运行任务 点击tsc：监视-tsconfig.json 然后就可以自动生成代码了

hbuilder如何配置
1.菜单 工具-插件安装
2. 安装typescript插件

数据类型
1.布尔 boolean
var flag:boolean = true

2.字符串 string
var str:string = 'hello ts'

3.数组 array

// 第一种：
var arr:number[] = [1,2,3]
// 第二种：
var arr:Array<number> = [1,2,3]
// 第三种
var arr:any[] = [1, 'hello']

4.number
var num:number = 123

5.元组类型tuple-属于数组的一种
var arr:[number, string] = [1,2,3,'hello'] // 顺序不能乱

6.枚举enum

enum Flag {success = 1, error = 2}
let s:Flag = Flag.success; // s = 1
// 如果标识符没有赋值，它的值就是下标，下标从0开始，也可以指定下标开始数值
enum 枚举名{
	标识符[=整型常数]
	...
}

7.任意类型any
var num:any = 'hello'； 应用场景：var oBox:any = document.getElementById('box'); oBox.style.color = 'red';

8.null和undefined
var num:number | undefined;

9.void类型，一般用于定义方法时，方法没有返回值
function run():void{}

10.never类型：是其他类型(包括null和undefined)的子类型，代表从不会出现的值

var a:never;
a = (() => {throw new Error('error')})()

函数

1. function fun():string {}
2. var fun = function():string{}
3. function fun(name:string):number {}
4. es5里面的方法的实参和形参可以不一样，但是ts中必须一样，如果不一样就需要配置可选参数
5. function func(name:string, age?:number):string{}
6. es5没法设置默认参数，es6和ts中可以设置
7. 可选参数必须配置到参数的最后面
8. 剩余参数，三点运算符，接受形参传过来的值，function sum(...result:number[]):number{}
9. 函数重载，ts为了兼容es5以及es6，重载的写法和java中有区别，es5中出现同名方法，下面的会覆盖上面的，function getInfo(name:string):string; function getInfo(age:number):string; function(str:any):any {if (typeof str === ‘string’) {} else {}}
   10.箭头函数的this指向上下文

类

可索引接口
1.数组、对象的约束
2.不常用
3.interface UserArr {[index:number]:string}, var arr:UserArr = ['test']
4.interface UserObj {[index:string]:string }, var arr:UserObj = {name: 'test'}
5.

interface Animal {
  name:string,
  eat(name:string):void;
}

class Dog implements Animal {
  name: string;
  constructor(name:string) {
    this.name = name
  }
  eat() {
    console.log(this.name + 'test')
  }
}

const dog = new Dog('haha')
dog.eat()

接口扩展
1.接口继承接口

泛型
1.解决类接口的可复用性
2.对不特定数据类型的支持
3.any可以解决这个问题，但是放弃了类型检查
4.传入什么类型，函数返回什么类型----泛型
5.function getData<T>(value:T):T{return value}；getData<number>(123) // T表示泛型，具体什么类型是调用这个方法的时候决定的
6.还可以这么写：function getData<T>(value:T):any{retrun '123'}

泛型类

class MinClass<T>{
	public list:T[] = []
	add(value:T):void {
		this.list.push = value
	}
	min():T{
		var tmp = this.list
		var min = tmp[0]
		  for(var i = 0;  i < tmp.length;i ++) {
		  		if(min > tmp[i]) {
		  				min = tmp[i]
		  		}
		  }
		  return min
	}
}