【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)复制