TypeScript

ts的介绍

1、TypeScript是有微软开发的
2、一款开源的编程语言
3、TypeScript 是JavaScript的超级，遵循最新的ES6，ES5规范。TypeScript扩展了JavaScript的语法
4、TypeScript更像是后端java、C#这样的面向对象语言，可以让js开发大型企业项目
5、谷歌也在大力支持TypeScript的推广，谷歌的angular2.x+就是基于TypeScript语法
6、最新的Vue、React也可以集成TypeScript

作用

TypeScript的设计目应该是解决JavaScript的“痛点”：
1、弱类型和没有命名空间，导致很难模块化
2、不适合开发大型程序
3、提供了一些语法糖来帮助大家更方便地实践面向对象编程。（类、接口、枚举、泛型、方法重载等）
4、TypeScript的一个设计亮点就是它并没有抛弃JavaScript的语法另起炉灶，而是做成了JavaScript的超集（这个功劳应该记在Anders上），这样任何合法的JavaScript的语句在TypeScript下都是合法的，也就是说学习成本很低

ts的编译安装

# 安装typescript
npm install -g typescript
# 根据helloworld.ts创建转化一个helloworld.js文件
tsc helloworld.ts
# 创建tsconfig.json 
tsc --init
#修改tsconfig.json配置，输出文件
"outDir": "./js", 
#自动监听.ts文件，修改相应的.js文件
VsCode --> 导航栏Terminal --> Ran Task --> typescript --> tsc: watch - tsconfig.json

ts的数据类型

1、TypeScript 中为了使编写的代码更规范，更有利于维护，增加了类型校验
2、在TypeScript中主要给我们提供了一下数据类型

布尔类型（boolean）

let isDone:boolean = true;
isDone = false;
// 直接调用Boolean是可以的
let is:boolean = Boolean(1)
// 错误方式：因为 new Boolean 返回的是一个对象类型
 let isCheck:boolean = new Boolean(1)

数字类型（number）

 let num:number = 1;
 let num16:number = 0xf00a;
 let notNum:number = null;
 let infNum:number = Infinity;
 let undeNum:number = undefined;

字符串类型（string）

let userName:string = "gaoyangliu";
let age:number = 18;
let str:string = `我的年龄是${age}`

数组类型（array）

// 设定数组的类型
let arr:number[] = [1,2,3];
arr.push("1") # 会报错，不允许
// 数组泛型的定义方式
let arr2:Array<number> = [1,2,3]; # 元组类型
let arr3:any[] = [1,2,"3"];
// 接口表示数组类型
interface NumberArray {
  [index:number]:number
}
let arr4:NumberArray = [1,2,3]

元组类型（tuple）

枚举类型（enum）

随着计算机的不断普及，程序不仅只用于数值计算，还更广泛地用于处理非数值的数据，
例如：性别、月份、星期几、颜色、单位名、学历、职业等，都不是数值数据。
在其他程序是语言中，一般用一个数值来代表某一状态，这种处理方法不直观，易读性差
如果能在程序中用自然语言中有相应含义的单词来代表某一状态，则程序就很容易阅读和理解
也就是说，事先考虑得到某一变量可能取的值，尽量用自然语言中含义清楚的单词来表示它的每一个值
这种方法称为枚举方法，用这种方法定义的类型称为枚举类型

enum Num { a, b, c };
let a:Num = Num.a;
let b:Num = Num.b;
let c:Num = Num.c;
console.log(a,b,c)  # 0 1 2 打印下标

enum Num { a, b=3, c };d
let a:Num = Num.a;
let b:Num = Num.b;
let c:Num = Num.c;
console.log(a,b,c)  # 0 3 4 # 有赋值，则按照赋值延续

任意类型（any）

// 允许访问任意属性
#原生dom获取用的比较多
let oBox:any = document.getElementById('box');

null和undefined

// 在ts中如果想定义变量但是不复制，可以使用undefined
let num:number;
console.log(num) # 错误
let num:undefined;
console.log(num) # 正确
let num:number | undefined;
console.log(num) # 正确

// null和undefined可以互相复制，但是不可以复制其他类型
 let a:undefined = undefined;
 a = null;
 let b:null = null;
 b = undefined;
// null和undefined是所有类型的子类型,void类型是不能复制给其他类型的，虽然他也只有null和undefined
let userName:string = "gaoyangliu";
userName = undefined;
userName = null;

let a:undefined = undefined;
let b:void = undefined;
userName = a;
userName = b; # 这是不允许，因为b是void类型

void类型

function get():number{
    return 1
}
//  空值，一般用于定义方法没有返回值，
function get():void{
    console.log("没有返回值")
}
// 一般不用于定于变量，因为一旦定义变量为void类型，那么就只能复制undefined，null
 let unable:void = undefined;
 unable = null;

never类型

// 代表从来不会出现的值（报错，抛出异常）
let a:never;
a = (()=>{
    throw new Error('这是一个错误')
})()

函数的定义

// TypeScript会对函数输入输出有约束，输入和输出会定义类型，参数传入（参数定义类型），返回值（定义类型）
function sum(x:number, y:number):number{
  return x+y;
}
sum("1", 2) # 报错
sum(1, 2)
// 函数表达式， 这种写法实质上仅将右侧的匿名函数进行了类型的定义，对于左边sum这个变量没有实质的定义
let sum = function(x:number, y:number):number{
    return x+y;
}
// => 在TypeScript中用于函数的定义，左边是输入的类型，右边是输出的类型
let sum2:(x:number, y:number) => number = function(x:number, y:number):number {
  return x+y
}
// 在TypeScript中函数的参数，是不能随意传任意数量的值
sum(2,1)

函数的传参

function getInfor(name:string, age:number):string{
    return `${name} --- ${age}`
}
console.log(getInfor("张三", 10))

方法的可选参数

// 注意可选参数必须配置到参数的最后面，可选参数后面不允许放置必须要的参数
// 正确写法
function getInfor(name:string, age?:number):string{
    return age ? `${name} --- ${age}` : `${name} --- 年龄保密`
}
console.log(getInfor("张三"))
// 错误写法
function getInfor(name?:string, age:number):string{
    return age ? `${name} --- ${age}` : `${name} --- 年龄保密`
}

参数的默认值

function sum(x:number=1, y:number=2):number{
  return x+y;
}

剩余参数

function sum(...items){
// es6正常模式
}
function sum(...items:any[]){
}

重载

允许一个函数，接受不同数量或者类型的参数

function setA(x:number|string):number|string{
  return x;
}

TypeScript接口

什么是接口，行为的抽象，具体行为需要由类去实现（接口抽象出来的内容），相当于定义类的描述。

// 约束tom这个对象，必须和接口一致属性，
// 一般接口的首字母大写。
// 用接口定义的对象，属性不能多写，也不能多写
interface Person {
  name: string;
  age: number;
}
let tom:Person = {
  name: "gaoyangliu",
  age: 18
}

// 接口属性可选，该属性可写，可不写，但是不能多写属性
interface Student {
  name: string;
  age?: number;
}
let s1:Student = {
  name: "gaoyangliu"
}

// 任意属性
interface Teacher {
  name: string;
  [propName:string]:any
}
let t1:Teacher = {
  name: "gaoyangliu",
  age: 18
}

// 只读属性，只能进行一次赋值，不能修改
interface Cat {
  readonly name: string;
  color: string
}
let c1:Cat = {
  name: "橘猫",
  color: "橘色"
}
c1.name = "波斯猫"; # 报错，因为c1.name是只读属性
c1.color = "白色";

// implements，类实现接口的关键词
class SmallCat implements Cat {
  name:string = "小猫";
  color:string = "黑色";
  constructor(){
  }
}
let c2 = new SmallCat();
console.log(c2.name)