【TypeScript】TypeScript语法细节

💭💭

✨：TypeScript语法细节

💟：东非不开森的主页

💜: 积极向上才是最好的状态💜💜

🌸: 如有错误或不足之处，希望可以指正，非常感谢😉

TypeScript

- 一、语法
- - 1.1.ts联合类型
  - 1.2.ts交叉类型
  - 1.3.ts类型别名
  - 1.4.ts接口声明使用
  - 1.5.ts类型断言
  - 1.6.ts非空类型断言
  - 1.7.ts中字面量类型
  - 1.8.ts类型缩小

一、语法

⭐⭐⭐⭐

1.1.ts联合类型

联合类型是由两个或者多个其他类型组成的类型,
使用 | 符号
联合类型中的每一个类型被称之为联合成员

let foo: number | string = 'aa'

1.2.ts交叉类型

交叉类似表示需要满足多个类型的条件
使用 & 符号

// 两种类型同时满足
interface KKPerson {
    name: string
    age: number
}
interface ZZPerson {
    name: string
    lover: () => void
}

type InfoType = KKPerson & ZZPerson
const info: InfoType = {
    name: "kk",
    age: 18,
    lover: function() {
        console.log("loving")
    }
}

1.3.ts类型别名

类型别名（Type）

可以给类型起一个别名
Type类型不能出现重复定义
接口类型定义的类型也可以使用Type定义

type kkNumber = number
const age: kkNumber = 18

1.4.ts接口声明使用

⭐⭐⭐
接口类型（Interface）

接口类型可以给对象 / 函数等定义类型
接口是可以实现多个接口
接口也可以被类实现（继承）

// 接口：interface
// 声明的方式
interface KKType {
    x: number
    y: number
    z?:number
}
function coord(point: KKType) {
    
}

类型别名type 和接口类型Intertype区别

type类型使用范围广，而接口类型只能用来声明对象
在声明对象式，interface可以多次声明
type不可以不允许两个相同的名称的别名同时存在
interface可以多次声明一个接口名称

interface KKType1  {
    x: number
    y: number
}
interface KKType1 {
    z: number
}

interface支持继承

// interface支持继承
interface KKPerson {
    name: string
    age: number
}
interface ZZPerson extends KKPerson {
    height: number
}

1.5.ts类型断言

TypeScript无法获取具体的类型信息，这个我们需要使用类型断言
断言只能断言成更加具体的类型，或者不太具体(any/unknown) 类型

const img = document.querySelector(".img") as HTMLImageElement
img.src = "x"
img.alt = "y"

1.6.ts非空类型断言

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

const info: KKPerson = {
    name: "kk",
    age: 18
}
console.log(info.lover?.name)

// 类型缩小
if (info.lover) {
    info.lover.name = "zz"
}
// // 非空类型断言，但是只有确保lover一定有值的情况。才能使用

1.7.ts中字面量类型

const name: "kk" = "kk"
let age: 18 = 18

1.8.ts类型缩小

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

typeof

function point(id: number | string) {
    if (typeof id === "string") {
        console.log(id.length, id.split(" "))
    } else {
        console.log(id)
    }
}

=== / !==

type Direction = "left" | "right" | "up" | "down"
function turnDir(direction: Direction) {
    if (direction === "left") {
        console.log("left")
    } else if (direction === "right") {
        console.log("right")
    }
}

instanceof
检查一个值是否是另一个值的“实例”

function printDate(date: string | Date) {
    if (date instanceof Date) {
        console.log(date.getTime())
    } else {
        console.log(date)
    }
}

in:判断是否有一个属性

interface KSing {
    sing: () => void
}

interface KCoding {
    code: () => void
}
function lover(love: KSing | KCoding) {
    if ("sing" in love) {
        love.sing()
    } else if ("code" in love) {
        love.code()
    }
}
const KK: KSing = {
    sing: function() {}
}
const ZZ: KCoding = {
    code: function() {}
}
lover(KK)
lover(ZZ)