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

本文介绍了TypeScript中的接口(interface)用于描述对象类型,以及接口与类型别名(type alias)的区别。讲解了接口继承,展示了如何通过继承实现复用。详细阐述了类型推断的概念,并列举了类型推断在变量声明和函数返回值时的应用。同时,探讨了类型断言在处理特定情况下的作用,提供两种类型断言的写法,并给出了实际示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

接口:

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值