前端系列三十：TS接口跟类型推断

接口：

当一个对象类型被多次使用时，一般都会使用'接口 (interface)' ；来描述对象的类型, 达到'复用'
的目的

解释：

1.使用' interface ' 关键字来声明接口。
    
    2.接口名称 （比如, 此处的 IPerson），可以是任意合法的变量名称

3.声明接口后，直接 ' 使用接口名称作为变量的类型 '。

4.因为每一行只有一个属性类型， 因此，属性类型后没有 ; （分号）

    写法：
    
        interface Iperson {
        name: string
       age: number
       sayHi( ): void
    }   

    let person: IPerson = {
      name: 'jack',
      age:19,
      sayHi( ) { }
    }
 

接口跟类型别名的区别：

interface  ( 接口 ) 和 type ( 类型别名 ) 的对比：

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

    不同点：

    接口，只能为对象指定类型

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

接口继承：

如果两个接口之间都有相同的属性和方法，可以' 将公共的属性和方法抽离出来，通过继承 '
来实现复用 ’。
    比如,这两个接口都有 x、y 两个属性，重复写两次，可以，但很繁琐

    
    写法：

    interface Point2D { x: number; y:number }

    interface Poinit3D extends Point2D { z: number }

    解释：

    1.使用extends( 继承 ) 关键字实现了接口 Point3D继承 Point2D。
    
    2.继承后，Point3D 就有了Point2D的所有属性和方法  

类型推断：

在TS中,某些没有明确指出类型的地方,TS的' 类型推论机制会帮助提供类型 '

换句话说，由于类型推断存在，这些地方，类型注解可以' 省略 ' 不写

发生类型推断的两种常见场景：

1.声明变量并初始化时
    
    写法：
        let age = 18;

2.决定函数返回值时

    写法：
        function add ( num1: number, num2: number ) {  return num1 + num2 }    

    这两种情况下类型注解可以不用写，'能省略类型注解的地方就省略'，充分利用TS类型推断的
能力

TS类型断言：

有时候你会比TS更加明确一个值的类型，此时，可以使用' 类型断言 '来指定更具体的类型

示例：

cosnt alink = document.getElementById( 'link' )

    注意：
             getElementById方法返回值的类型是HTMLElement,该类型只包含所有标签公共的属性或
方法，不包含特有的href等属性

    因此，这个'类型太宽泛 ( 不具体 )', 无法操作href等 a标签特有的属性或方法

    解决方式： 这种情况下就需要' 使用类型断言指定更加具体的类型 '

类型断言：

写法：

    const alink = document.getElementById( 'link' ) as HTMLAnchorElement

    使用as关键字实现类型断言

    关键字 as 后面的类型是一个更加具体，这样就可以访问a标签特有的属性或方法

    第二种写法： 使用<>语法

    cosnt alink = <HTMLAnchorElement> document.getElementById( 'link' )

技巧：

在浏览器控制台，点击标签元素，可以看到是 "$0" 通过console.dir( ) 打印DOM 元素，在属性列表最后对
应__proto__，即可看到该元素类型