首页 前端知识 【TypeScript】TypeScript语法细节

【TypeScript】TypeScript语法细节

2024-06-17 09:06:18 前端知识 前端哥 101 835 我要收藏

💭💭

✨: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)
转载请注明出处或者链接地址:https://www.qianduange.cn//article/12502.html
标签
评论
发布的文章

HTML5 新增元素

2024-06-22 10:06:20

【前端】HTML5基础

2024-06-22 10:06:36

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!