深入学习TS的语法

CssHero

已于 2024-02-21 17:15:37 修改

阅读量869

点赞数 30

文章标签：学习前端 typescript javascript

于 2024-02-21 17:12:15 首次发布

本文链接：https://blog.csdn.net/CssHero/article/details/136216312

版权

文章目录

概要

本文主要深入学习TS的语法，了解type和interface的相同和不同点，对interface的特性进行解析，对联合类型和交叉类型进行学习还有类型断言和非空断言等知识进行解析学习

TS的语法深入

1.type和interface

– 类型别名 - type

type arrType = string[]
type objType = {
    name: string
    age: number
}

const arr: arrType = ['wuu']
const obj: objType = {
    name: 'wuu',
    age: 20
}

export{}

– 接口 - interface

// 接口只可以定义对象
interface IObj {
    name: string
    age: number
    height: number
}

const obj1: IObj ={
    name: 'wuu',
    age: 20,
    height: 176 
}

– interface的特性

- 接口实现继承

interface IPerson {
    name: string
    age: number
}


// IKun这个接口继承Person
// IKum，必须有IPerson的属性
interface IKun extends IPerson {
    slogan: string
}

const obj: IKun = {
    name: 'wuu',
    age: 20,
    slogan: '哎哟，你干嘛'
}

- 接口被类实现

interface IPerson {
    name: string
    age: number
}

// 类实现了接口IPerson
// 类必须有接口对应的属性和方法
class Person implements IPerson {
    constructor(public name: string, public age: number){

    }
}

– 二者的区别

接口只可以定义对象
接口可以进行继承等更多的特性（仅限对象）
接口可以命名重复，相当于加属性
在定义对象类型时，推荐interface，其他用type

2.联合类型和交叉类型

– 联合类型

◼ TypeScript的类型系统允许我们使用多种运算符，从现有类型中构建新类型

◼ 我们来使用第一种组合类型的方法：联合类型（Union Type）

 联合类型是由两个或者多个其他类型组成的类型；

 表示可以是这些类型中的任何一个值；

 联合类型中的每一个类型被称之为联合成员（union’s members）；

// 联合类型
// 表示类型可以是number或者string其中一个
type jointType = number | string

const message: jointType = 123
const message2: jointType = "123"

– 交叉类型

和联合类型相反
表示必须是俩个类型同时满足
使用 &

// 交叉类型
interface IPerson {
    name: string
}

interface IKun {
    age: number
}

// 表示obj同时满足IPerson和IKun
const obj: IPerson & IKun  = {
    name: 'wuu',
    age: 20
}

3.类型断言和非空断言

– 类型断言 as

可以通过as把类型转化为更具体或更不具体（any）的类型

// 类型断言

// 不使用as时的类型是never[]，表示数组为空
// const infoList = []

//把never[]转化为 string[] 
const infoList = [] as string[]

– 非空断言 !

◼ 确定传入的参数是有值的，这个时候我们可以使用非空类型断言：

 非空断言使用的是 ! ，表示可以确定某个标识符是有值的，跳过ts在编译阶段对它的检测；

和可选链的 ? ，只有值存在的时候才会取值
！表示肯定有值，不需要检查

4.字面量类型

◼ 字面量类型有什么意义呢？

 默认情况下这么做是没有太大的意义的，但是我们可以将多个类型联合在一起；

type Alignment = 'left' | 'right'

function changeAlign(align: Alignment){
    console.log('传递多个方向');
    if(align === 'left'){
        console.log('向左');
    }
}

5.类型缩小

◼ 什么是类型缩小呢？

 类型缩小的英文是 Type Narrowing（也有人翻译成类型收窄）；

 我们可以通过类似于 typeof padding === “number” 的判断语句，来改变TypeScript的执行路径；

 在给定的执行路径中，我们可以缩小比声明时更小的类型，这个过程称之为缩小（ Narrowing ）;

 而我们编写的 typeof padding === "number 可以称之为类型保护（type guards）；

◼ 常见的类型保护有如下几种：

 typeof

let info: unknown = "123"

info = 123

if(typeof info === 'string'){
    // 类型缩小后就可以操作
    console.log(info.length)
}

 平等缩小（比如===、!==）

type Alignment = 'left' | 'right'

function changeAlign(align: Alignment){
    console.log('传递多个方向');
    if(align === 'left'){
        console.log('向左');
    }
}