接口:
当一个对象类型被多次使用时,一般都会使用'接口 (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__,即可看到该元素类型