TypeScript

概念：

TypeScript是一种由微软开发的自由和开源的编程语言，是JavaScript的一个超集

本质：

本质上向这个语言添加了可选的静态类型和基于类的面向对象编程

TypeScript 与 Javascript的区别

例如：Ts是：:给我买一双NIKE 而js是：买一双鞋具体什么鞋没要求是一双鞋，是我能穿上的鞋就行

一，基础类型

1,布尔类型boolean

 const bool1: boolean = false;
 // ES6：var bool1= false;

2,数值类型number

 const num: number = 10;
 // ES6：var num= 10

3,字符串类型string

const title: string = "你好，世界";
 // ES6：var title = '你好，世界';`

4,数组类型array 

两种方式：

1，数组类型后面加 [ ]

2,Array<数组元素类型>

var arr: number[] = [1,2,3,4]  //常用
var arr1: Array<number> = [1,2,3,4]   //该方法功能最强大
var arr2: Array<string> = ['11','你好','12']   //该方法功能最强大

5,枚举类型enum

//enum 枚举  变量的值是有限的数量，比如一年十二个月
enum Gender {
  MAN,
  WOMAN
}

console.log(Gender[0]);
console.log(Gender[1]);
console.log(Gender['MAN']);
console.log(Gender['WOMAN']);


enum Direct{
  N = 'north',
  S = 'south',
  W = 'west',
  E = 'east',
}
console.log(Direct['N']);

6,元组类型Tuple

/  元组类型Tuple
// 类似于数组，但是里面的元素可以是不同类型的
var user: [string,number,string,string[]] = ['成龙',66,'男',['html','css','js']]


//es6 //  元组类型Tuple
// 类似于数组，但是里面的元素可以是不同类型的
var user = ['成龙', 66, '男', ['html', 'css', 'js']];

7,void类型

声明一个 void 类型的变量没有什么用，因为你只能将它赋值为 1undefined 和 null 

// void  无效 空白 代表没有任何类型，常见于函数的返回值
function fn1(): void{
}

 function fn(): void { console.log('void意为空的，缺乏的，代表函数没有返回值'); }


 const nothing: void = undefined：

//es5
// void  无效 空白 代表没有任何类型，常见于函数的返回值
function fn1() {
}

8,never 与 unknown类型

// never 异常数据类型 unknown 是any的安全类型
var value: unknown 
value = 1
value = ''
value = true
value = []
value = {}
var value1: any = value;
var value2: unknown = value;
// var value3: string = value;   报错，不能把unknown类型的值赋值


//es5
// never 异常数据类型 unknown 是any的安全类型
var value;
value = 1;
value = '';
value = true;
value = [];
value = {};
var value1 = value;
var value2 = value;

8,字面量类型

// 字面量类型：通常和联合类型一起使用，表示类型或的关系
type EventType = 'click' | 'dblclick'
var ev: EventType = 'click'
document.body.addEventListener(ev,function(){

})
//es5
var ev = 'click';
document.body.addEventListener(ev, function () {
});

二，高级类型

1 联合类型

一个变量可能是A类型也可能是B类型，如果A类型不成立（null或undefined）就是B 类型。类似js中的短路或||

function getSum(a: string | number ,b: number | string){
  return +a + +b
}
// es5
function getSum(a, b) {
    return +a + +b;
}

2,交叉类型(取并集,运用短路与将两个接口合并使变量名可以同时又有两个接口的属性名)

// 交叉类型  并集
interface IUser {
  id:number
  name:string
}

interface IInfo{
  score:number
}
var user1: IInfo & IUser = {
  id:0,
  name:'李焕英',
  score:22
}

//es5
var user1 = {
    id: 0,
    name: '李焕英',
    score: 22
};

3，可选类型

把声明的类型变为可选的，可以使用Partial关键字，也可以使用?把属性变为可选的

// 可选类型：使用工具类型中的Partial让对象的类型变成可选
interface IStudent{
  id:number
  name:string
  score:number
}
var s1: Partial<IStudent> = {
  id:1,
  name:'李连杰'

}


//?表达
interface IStudent{
  id？:number
  name？:string
  score？:number
}
var s1: IStudent = {
  id:1,
  name:'李连杰'

}



//es5
var s1 = {
    id: 1,
    name: '李连杰'
};

4，条件类型 相当于js中的三元表达式/三目表达式 只不过求的是类型

// 条件类型 相当于js中的三元表达式/三目表达式 只不过求的是类型
interface Fish{
  name1:string
}
interface Water{
  name2:string
}
interface Bird{
  name3:string
}
interface Sky{
  name4:string
}


type TAnimal<T> = T extends Fish? Water : Sky
var animal: TAnimal<Bird> = {
  name4:'天空'
}

//es5
var animal = {
    name4: '天空'
};

5，映射类型 其实就是把一个对象属性的类型处理成另一个对象属性的类型，他们是一一对应的关系，

type User = {
  
  name?:string
  location: string
  age?:number

}
// keyof User => name | location |age
// p in keyof User : p是一个类型变量，判断是否属于 name | location |age
// 三个属性中的每一个

type MyPartial<T> = {
  [p in keyof T]-? : T[p]
}
// 上面的代码执行结果i就是下面三行代码
// name:string
// location: string
// age?:number

三，函数的类型签名：在函数中涉及到数据的地方只右形参和返回值，所以在ts中的函数就是对象参和返回值做类型签名

1，基本使用

// 基本使用：相当于把ts中的基础类型,高级类型结合使用
function fn(a: string | number , b: string | number){

}

//
interface IStudent1{
  id:number
  name: string 
  [a:string]:unknown //a是一个变量，代表的是属性的名称
}

var s2: IStudent1 = {
  id:0,
  name:'你好',
  gender:'女'
}

//es5
function fn(a, b) {
}
var s2 = {
    id: 0,
    name: '你好',
    gender: '女'
};