TypeScript5(类型断言|联合类型|交叉类型)

1.类型断言

当你比 TypeScript 编译器更清楚某个值的具体类型时,可以使用类型断言来"告诉"编译器。它不会执行任何运行时检查,仅仅是在编译阶段进行类型转换。

写法1:值 as 类型(推荐)

写法2:<类型>值

ts 复制代码
const getLength = (strOrArr: string | string[]): number => {
    if (typeof strOrArr === 'string') {
        // 在这个 if 块里,编译器已经知道它是 string 类型,不需要断言
        return strOrArr.length;
    } else {
        // 假设你知道它是一个数组,但为了类型安全,可以用断言
        return (strOrArr as string[]).length;
    }
}
// console.log(getLength("YaeZed"));//输出6

// console.log(getLength(["YaeZed", "YaeSakura"]));//输出2

2.联合类型

当一个变量可以是多种类型中的任意一种时,使用联合类型。这在处理可能返回不同类型值的函数或处理多种可能状态的变量时非常有用。

写法:类型 | 类型

ts 复制代码
/**
 * 联合类型
 */
let phoneNum: number | string;
// phoneNum = 1234567890;
phoneNum = '1234567890';
// console.log(phoneNum.length);//这里只在string类型时能用

/**
 * 函数使用联合类型
 */
const fn = (something: number | boolean): boolean => {
    return !!something//判断传入的是否为真值,两次非可以强转为布尔类型
}
// console.log(fn(true));

3.交叉类型

当你需要将多个类型组合成一个新类型时,使用交叉类型。新类型会拥有所有被组合类型的所有成员,就像是把它们的特性"融合"在了一起。这在组合对象类型时特别有用。

写法:类型 & 类型
举个栗子:将一个 User 接口和一个 Contact 接口合并成一个 UserContact 接口。

ts 复制代码
interface User {
  id: number;
  name: string;
}

interface Contact {
  phone: string;
  email: string;
}

// 交叉类型:新类型 UserContact 同时拥有 User 和 Contact 的所有属性
type UserContact = User & Contact;

let myProfile: UserContact = {
  id: 1,
  name: "Alice",
  phone: "123-456-7890",
  email: "alice@example.com",
};

参考文章

小满zs 学习typeScript6(类型断言|联合类型|交叉类型)xiaoman.blog.csdn.net/article/det...

相关推荐
烛阴6 小时前
用 MCP 调教 AI 代理:让 Cocos Creator 3.8.8 核心逻辑一键全自动生成
typescript·cocos creator
Rain50912 小时前
mini-cc 技术栈:跟着 Claude Code 先选 TypeScript + React + Ink
前端·javascript·react.js·typescript·node.js·ai编程
yantuguiguziPGJ12 小时前
WeMed:一个医疗垂直领域大模型 问答系统的 Taro 小程序
typescript·node.js
tedcloud1231 天前
wifi-densepose部署教程:构建无线人体感知系统
服务器·javascript·网络·typescript·ocr
奇奇怪怪的问题1 天前
学习ts笔记(二):属性修饰符,泛型,接口
前端·typescript
阿正的梦工坊1 天前
【Typescript】04-数组元组枚举与字面量类型
javascript·ubuntu·typescript
狼丶宇先森1 天前
vue-sign-canvas v2 重构复盘:从 Vue 2 签名板到 Vue 3 + TypeScript 组件库
前端·vue.js·重构·typescript·开源软件·canvas
muddjsv1 天前
前端开发语言使用流行度排行与分析
前端·javascript·typescript
Joy T2 天前
【Web3】Hardhat工程架构中Solidity与TypeChain的协作机制
git·架构·typescript·web3·智能合约·hardhat·typechain
烛阴2 天前
Cocos Creator 3.x 装饰器实战:让你的代码优雅 10 倍
typescript·cocos creator