【TypeScript】TypeScript语法细节

一、语法

⭐⭐⭐⭐

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)