Typescript

一、Typescript

1.介绍Typescript

1.1Typescript是什么

• TypeScript(简称：TS)是JavaScript的超集。
• js中操作的都是数据，ts中类型系统操作的是类型，js和ts中很多操作时类型，只是操作的对象不一样

1.2Typescript于JS的优缺点

• 优点：可以在不执行代码时发现错误，提高开发效率。
• 缺点：书写代码的时间会比JS时间长

1.3Typescript使用流程

1. 首先安装ts的工具包
2. tsc -v 查看是否安装成功
3. 使用循环 创建 ts 文件 → 编译 TS → 执行 JS

2.Typescript的数据类型

2.1基本数据类型

• 布尔类型boolean

• 数值类型number

• 大数值bigint

• 字符串类型string

• // boolean
  var flag: boolean = true
  
  // number
  var age: number = 18
  // age = '20'//不能将‘string’分配给‘number’
  
  var money:bigint = 10000000000000000000000000n
  
  var msg: string = 'hello world'
  msg = 'hello typescript'
  

• Array数组

• enum枚举：变量的值是固定的，比如性别。

• //Array方式一:数组元素类型[] 方式二：Array<数组元素的类型>
  var arr: number[] = [1, 2, 3, 4, 5] //大多数使用该方式
  var arr1: Array<string> = ['a', '11', '女'] //该功能功能是最强大的
  
  //enum 枚举：变量的值有限，比如性别
  enum Gender {
      MAN,
      WOMAN
  }
  console.log(Gender[0]);
  console.log(Gender[1]);
  console.log(Gender['MAN']);
  console.log(Gender['WOMAN']);
  

• 元组 Tuple 类似于数组，但里面的元素可以是不同类型的

• var user:[string,number,string,string[]] = ['成龙', 66, '男', ['html', 'css', 'javascript']]
  
  // void 无效，空白。代表没有任何类型，常见于函数的返回值
  // function fn():void{
  // }
  

• null 和 undefined

• 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类型的值赋给具体的类型，不能将类型“unknown”分配给类型
  
  
  //字面量类型，通常和联合类型一起使用，表示类型或的关系
  type EventType = 'click' | 'dblclick'
  var ev:EventType = 'click'
  document.body.addEventListener(ev,function(){  
      
  })
  

2.2高级类型

• 联合类型：就是 js 中的短路或

• function getSum(a:number | string, b:number | string): number {
      return +a + +b
  }
  

• 交叉类型：就是数据里的并集,既有A类型的属性或方法，也有B类型中的属性或方法。

• interface IUser{
      id:number
      name:string
  }
  interface IInfo {
      score:number
  }
  //这里使用 & 并集
  var user1 :IInfo & IUser= {
      id:0,
      name:'李四',
      score:99
  }
  

• 可选类型：使用工具类型中的Partial让对象的所有类型变成可选。

• interface IStudent{
      id:number
      name:string
      score:number
  }
  //这里使用Partial就可以让IStudent里的属性变为可写也可以不写
  var s1 :Partial<IStudent>  = {
      id:0,
      name:'ls',
  } 
  

• 条件类型：相当于js中的三元/三目表达式

• interface Fish{
      name1:string
  }
  interface Water{
      name2:string
  }
  interface Bird{
      name3:string
  }
  interface Sky{
      name4:string
  }
  
  //这里判断T这个类型 ，如果是Fish 就返回Water 否则返回 Sky
  type TAnimal<T> = T extends Fish ? Water : Sky
  var animal:TAnimal<Bird> = {
      // name1:'天空' //报错：对象字面量只能指定已知的属性，但“name1”中不存在类型“Sky”。是否要写入 name4
      name4:'天空'
  }
  

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

• 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]
      // -? 就是把所有属性变为必填
      //上面一行代码执行结果1就是下面三行代码
      // name:string
      // location:string
      // age:number
  }