TypeScript基础零碎知识整理

1.类型注解

let age: number = 10\let names: number[] = []

代码: number为类型注解

作用:为变量添加类型约束

2.数据类型 undefined 可以声明注解以后不用赋值，let n:undefined,但是null必须赋值

3.浏览器运行ts文件，使用 tsc命令的监视模式，tsc --watch index.ts  自动将ts文件转化为js

4.类型推论：某些没有明确指出类型的地方，类型推论会帮助提供类型。（主要在1.声明变量并初始化时，2.决定函数返回值时可以省略类型注解，推荐能省略就省略）

5.类型断言：手动指定 Element 更加具体的类型,关键字 as,  let img = document.querSelect('#'ss) as HTMLImageElement.元素类型可以通多console.dir()获取属性、类型; 

6.TS基础类型下新增的类型：联合类型、类型别名（自定义类型）、接口、元组、字面量类型、枚举、void、any等

• 联合类型：由两个或多个其他类型组成的类型，表示可以是这些类型中的任意一种。关键词 |   ，比如数组中既有number又有string ,let arr:(string | number)[] = [1,'a']
• 类型别名：为任意类型起别名，为简化类型的使用，关键词type, type CustomArray = (number|string)[]     let arr1 :CustomArray  = [1,'a']
• 函数类型-void: 如果函数没有返回数值，那么函数返回值类型为 void
• 函数类型-可选参数：如果要设置参数可传可不传，可用可选参数，关键词？,可选参数只能在参数列表的最后。function(start:number,end?:number):void{}
• 接口:关键词 interface，接口名称约定以 I 开头 ，推荐使用接口作为对象的类型注解
• 元组：是另一种类型的数组， 它确切地知道包含多少个元素，以及特定索引对应的类型。let postion:[number,number] = [39.1234,115,1234]
• 枚举：表示一组明确的可选值，关键词 enum, enum Driection {Up,Down,Left,Right}，枚举类型转为js代码时会转换成对象，开销大些。（一般情况下推荐使用字面量+联合类型组合方式代替枚举）
• any: 类型为any时，可以对该值进行任意操作，并且不会有代码提示。（失去TS类型保护的优势，所以不推荐使用）（隐式具有any类型的情况：1.声明变量不提供类型和默认值  2.函数参数不加类型。  以上两种情况应避免）

7.interface  与 type 的区别：

相同点：都可以给对象指定类型

不同点：接口：只能给对象指定类型

              类型别名：不仅可以为对象指定类型，实际上可以为任意类型指定别名

8.接口继承：将公共属性或方法抽离，通过继承实现复用,关键词 extends

 9.typeof :可以在类型上下文中引用变量或属性的类型。只能查询变量和属性的类型，无法查询其他形式的类型，如：函数调用的类型

    使用场景：根据已有变量的值，获取该值的类型，简化类型书写

10.TS高级类型：class、类型兼容性、交叉类型、泛型和keyof、索引签名类型和索引查询类型、映射类型

• class: 全面支撑ES2015（ES6）引用的class关键字，并为其添加了类型注解和其他语法。 

          class的继承方式（1.extends (继承父类，js只有) 2.implements（实现接口,ts专有））

        

         可见性修饰符：1.public (公有的，默认)  2.protected(受保护的，仅对其声明所在类和子类中可见，对实例不可见) 3.private（私有的，仅在当前类中可见）

         只读修饰符：readonly:表示只读，防止在构造函数之外对属性进行赋值，只能修饰属性，不能修饰方法,   接口或者{}表示的对象类型，也可以用

• 类型兼容性：class兼容（成员多的可以给少的）、接口兼容（成员多的可以给少的）、函数兼容（1.参数：参数少的可以赋值给多的  2.返回值：如果是对象类型，成员多的可以给少的）

  

• 交叉类型：功能类似于接口继承（extends） ，用于组合多个类型为一个类型（常用于对象类型）

  

   

• 泛型： 可以保证类型安全的前提下，让函数等于多种类型一起工作，从而实现复用，常用于：函数、接口、class中
    funciton id(value: any) : any {return value}     类型不安全
    function id<Type>(value: Type): Type {return value}  泛型，类型安全 
  泛型约束：默认情况下，泛型函数的类型变量Type可以代表多个类型，但会导致无法访问任何属性，可以通过为泛型添加约束来收缩类型。
    两种方式：
    1.指定更加具体的类型
       function id<Type>(value: Type[]):Type[]{},比如，将类型改为Type[]，就可以访问其length属性
    2.添加约束
  

  

• 映射类型keyof:
• 索引签名类型和索引查询类型：
• 映射类型：

 11.交叉类型(&)和接口继承（extends）的对比:

• 相同点：都可以实现对象类型的组合。
• 不同点：实现组合时，对于同名属性之间，处理类型冲突的方式不同（接口继承会报错；交叉类型不会报错，类似fn:(value:string|numer)=>string）