TypeScript 联合类型

2023-11-12

联合类型

联合类型(Union Types)可以通过管道(|)将变量设置多种类型,赋值时可以根据设置的类型来赋值。

语法:

Type1|Type2|Type3 

实例:

let res: string|number 
res = 12 
console.log("数字为: "+ res) 
res = "abcdefg" 
console.log("字符串为: " + res)

编译成 js:

var res;
res = 12;
console.log("数字为: " + res);
res = "abcdefg";
console.log("字符串为: " + res);

如果赋值其他类型会报错:

script.ts(6,1): error TS2322: Type 'true' is not assignable to type 'string | number'.

也可以讲联合类型作为函数参数使用:

function show(str:string|string[]) { 
     if(typeof str == "string") { 
          console.log(str) 
     } else { 
          var i; 
          for(i = 0;i<str.length;i++) { 
             console.log(str[i])
          } 
     } 
} 
show("string") // string
show(["abc","def","efg","hij"])
// abc
// def
// efg
// hij

编译成js:

function show(str) {
    if (typeof str == "string") {
        console.log(str);
    }
    else {
        var i;
        for (i = 0; i < str.length; i++) {
            console.log(str[i]);
        }
    }
}
show("string"); // string
show(["abc", "def", "efg", "hij"]);
// abc
// def
// efg
// hij

联合类型数组

可以将数组声明为联合类型。

实例:

let arr:number[]|string[]
let i:number
arr = ["abc","def","efg","hij"]
for (let item of arr){
  console.log(item)
}
// abc
// def
// efg
// hij
arr = [1, 2, 3, 4]
for (let item of arr){
  console.log(item)
}
// 1
// 2
// 3
// 4

编译成js:

var arr;
var i;
arr = ["abc", "def", "efg", "hij"];
for (var _i = 0, arr_1 = arr; _i < arr_1.length; _i++) {
    var item = arr_1[_i];
    console.log(item);
}
// abc
// def
// efg
// hij
arr = [1, 2, 3, 4];
for (var _a = 0, arr_2 = arr; _a < arr_2.length; _a++) {
    var item = arr_2[_a];
    console.log(item);
}
// 1
// 2
// 3
// 4
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

TypeScript 联合类型 的相关文章

  • 如何删除除任何特定 id 之外的元素

    假设有一个父 id 其中包含许多元素 我想删除除一个元素之外的所有元素 ex parent id children not id n remove
  • 显示具有多个父代的 D3 树

    我目前有this http bl ocks org mbostock 4339083图已实现 我希望在描述具有多个父节点的子节点时保持结构和可折叠性 有没有办法做到这一点 我研究了力图 但我也想保留一组层次结构 这意味着 1 级的父级可以有
  • 位置特征检测:固定

    我正在尝试找到一个脚本来检测设备是否放置position fixed元素相对于视口而不是整个文档 目前 标准桌面浏览器和 Mobile Safari 适用于 iOS 5 都是这样做的 而 Android 设备则相对于整个文档放置固定元素 我
  • 使用 Node.js 构建网站的最佳实践

    这个问题的答案是社区努力 help privileges edit community wiki 编辑现有答案以改进这篇文章 目前不接受新的答案或互动 我想知道如何使用 Node js 从头开始 开发一个网站 我明白我怎么能possibly
  • 为什么 window 与 Internet Explorer 中的 window.self 不同?

    关于我如何遇到这个问题有一个复杂的背景故事 但为什么self属性不完全等于窗口本身 在 Safari 和 Firefox 及其朋友中 结果如我所料 gt window window self true gt window window se
  • 如何使用 Playwright 使用选择器查找框架 (iframe)

    我有一个小问题 无法找到使用 Microsoft Playwright 框架的答案 根据您可以使用以下代码获取 iframe const frame page frame frame login 但是如何使用选择器来查找 iframe 并与
  • 如何使用角度材料在具有可扩展行的表格中创建嵌套垫表

    我有以下数据 id c9d5ab1a subdomain wing domain aircraft part id c9d5ab1a info mimetype application json info dependent parent
  • IE 中的 XPath 查询使用从零开始的索引,但 W3C 规范是从一开始的。我应该如何处理差异?

    问题 我正在转换目前仅适用于 Internet Explorer 的相对较大的 Javascript 代码 以便使其也适用于其他浏览器 由于代码广泛使用 XPath 我们做了一些兼容性功能以使事情变得更容易 function selectN
  • 改变 JavaScript 中的顶部填充

    以下是我在 css 中设置顶部填充的方法 body font size font size px margin 0 padding 100px 0 20px 0 width 100 important 如何使用最简单的 javascript
  • 聆听 Angular 2 中的元素可见性

    我正在为我的网络应用程序使用 Bootstrap 和 Angular 2 v4 我想监听指令中的元素以了解可见性变化 我的元素有一个可以隐藏其子元素的父元素hidden sm up我需要在每次隐藏或显示时触发一个函数 div hidden
  • 使用 Javascript 设置 cookie [重复]

    这个问题在这里已经有答案了 我正在尝试构建我的第一个移动应用程序 它需要连接到我的 mysql 数据库并使用 json 返回数据 这很好 目前我有一个登录系统 一旦确定用户名和密码存在 它就会返回一条成功消息 对于下一步 我想在我的页面上使
  • 用于选择特定 div 中具有特定类的锚元素的 jQuery 选择器是什么

    我有一些这样的代码 我想选择每个 a 带有类的标签status在 div 中foo div a class status a div 你可以这样做 foo find status a
  • 使用javascript动态更新css内容

    需要将 css 更新为动态值 我不确定最好的方法是什么 div style zoom 1 div 缩放级别将根据窗口大小调整触发 应用程序将相应缩放 我将此应用程序加载到 cordova 中并让它在 iPAD 中运行 然后我意识到需要使用
  • Rails 3.1+ 的 Jasmine 与 Mocha JavaScript 测试 [已关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我对茉莉花有经验并且非常喜欢它 有谁有 Jasmine 和 Mocha 的经验 特别是 Rails 的经验吗 我想知道是否值得转用 我已经在 J
  • Highcharts jQuery 渲染问题 - 所有浏览器

    我在尝试使用构建堆积柱形图时遇到了一个奇怪的问题高图表 http www highcharts com 当图表呈现时 在您调整浏览器大小之前 不会显示列无论如何 导致图表重绘 我认为 图表的其余部分显示 轴 标题等 但不显示列本身 我在 I
  • 使用 next.js 进行服务器端渲染与传统 SSR

    我非常习惯 SSR 意味着页面得到完全刷新并从服务器接收完整 HTML 的方法 其中根据后端堆栈使用 razor pub other 进行渲染 因此 每次用户单击导航链接时 它只会向服务器发送请求 整个页面将刷新 接收新的 HTML 这就是
  • 有没有办法使用 ko.observableArray 作为地图?

    有没有办法使用ko observableArray http knockoutjs com documentation observableArrays html像地图 字典一样 例如 var arr ko observableArray
  • 如何从 json 文件创建模型? (ExtJS)

    这是我想使用 json 文件创建的模型 Ext define Users extend Ext data Model fields name user id type int name user name type string 为了根据服
  • 如何通过索引访问 JSON 对象中的字段

    我知道这不是最好的方法 但我别无选择 我必须通过索引访问 JSONObject 中的项目 访问对象的标准方法是只写this objectName or this objectName 我还找到了一种获取 json 对象内所有字段的方法 fo
  • 没有输入的 jQuery 日期选择器

    我有一个相当复杂的网络应用程序 我想向其中添加一些日期选择 UI 我遇到的问题是我无法从文档中弄清楚如何真正控制日期选择器的出现方式和时间 不涉及任何表单元素 不 我不会添加秘密表单字段 因此简单的开箱即用方法根本行不通 我希望有人可以提供

随机推荐

  • VM虚拟机下 Ubuntu下摄像头显示安装

    安装 可通过PPA进行安装 ffmpeg sudo add apt repository ppa kirillshkrogalev ffmpeg next sudo apt get update sudo apt get install f
  • 浅谈Router和Route

    router 和 route 是在前端框架中用于管理和处理路由的两个关键概念 这两者之间的关系可以通过具体的代码来解释 在本示例中 我将使用 React 和 React Router 来说明它们之间的关系 Router 路由器 Router
  • DataPipeline丨DataOps的技术考量

    作者 DataPipeline CEO 陈诚 从 数据的资产负债表与现状 到 DataOps理念与设计原则 直至 DataOps的组织架构与挑战 我们对于DataOps的讨论已经进行了三周 不难发现 在此期间 我们探讨的话题始终围绕在上层建
  • SSR、SSE、SST、R2

    在MATLAB中 计算回归问题的拟合优度 或判定系数 可用 B BINT R RINT STATS regress Y X 指令 其中的STATS的第一个返回值即为R2 R2约接近于1 拟合效果越好 SSR为回归平方和 SSE为残差平方和
  • React官网入门项目井字棋游戏

    React官网里有很详细的教程 也有在线沙盒 但是写的东一榔头西一棒槌的 不适合新手入门 所以我还是建议大家可以先去看看阮一峰大神的React博客或者某硅谷的网课 这个网课讲的很详细 甚至详细到有些啰嗦 我大概是用20天把网课看完 然后再看
  • 进程信号(信号产生、注册、注销、处理),信号阻塞和volatile关键字

    文章目录 进程信号 信号产生 信号在进程中注册 信号在进程的注销 信号的处理 信号的处理方式 信号阻塞 如何阻塞一个信号 int sigprocmask int how sigset t set sigset t old int sigem
  • 从零开始制作Linux

    提到制作Linux 大家都能想到如雷贯耳 大名鼎鼎的Linux from scratch 但Linux from scratch的复杂性不是普通人能轻易掌握的 对于初学者来说 任何步骤出现不一致 会让初学者遇到挫拆 攻破LFS的信心越来越低
  • 【Linux命令】Linux复制时显示进度

    sudo rsync av progress src dest 效果如下图 更详细的使用 linux 命令 rsync 详解 yspg 217的博客 CSDN博客 linux rsync命令详解
  • 十四、计算机网络--iptables

    iptables只是个传参的工具 真正起作用的内核中的netfilter 1 默认的五种规则链 INPUT OUTPUT FORWARD POSTROUTING PREROUTING 2 默认的4个规则表 raw表 确定是否对该数据包进行状
  • 一文带你了解socket网络编程以及详解过程和原理

    创作不易 期望亲友们给个免费的就行 文章目录 一 什么是socket 二 TCP IP 三 socket原理 四 代码说明 五 API函数 一 什么是socket Socket 套接字 是计算机网络编程中的一种抽象概念 它提供了在网络上进行
  • OpenGL ES着色器语言(GLSL ES)规范 ——上篇

    文章目录 前言 OpenGL ES基础 一段基本的着色器代码 大小写和分号 数据值类型 命名规范 类型转换 运算符 矢量和矩阵 矢量和矩阵类型 矢量构造 访问 矩阵构造 访问 矢量矩阵运算规则 特殊类型 结构体和数组 结构体 数组 取样器
  • android 自动换行布局

    此方法是固定每行居中 使用 android paddingLeft dimen margin common 10 android paddingRight dimen margin common 15 进行调整左右间距 import and
  • PannoOccUnified Occupancy Representation for Camera-based 3D Panoptic Segmentation

    中科院 摘要 周围三维世界的综合建模是自主驾驶成功的关键 然而 现有的感知任务 比如目标检测 道路结构分割 深度和高度估计以及开放式对象定位 都只关注于整体三维场景理解任务的一小部分 这种分而治之的策略简化了算法开发过程 但代价是失去了问题
  • 地理坐标系_GCS汇总

    地理坐标系 GCS汇总 4001 GCS Airy 1830 GEOGCS GCS Airy 1830 DATUM D Airy 1830 SPHEROID Airy 1830 6377563 396 299 3249646 PRIMEM
  • Flutter学习二:最简单的Material Flutter应用

    import package flutter material dart void main 顶层容器 相当于rootview runApp new MaterialApp 标题 title Flutter Application 主题 t
  • lcov和gcov的使用错误

    编译使用的gcc版本和gcov的版本对不上的话 使用lcov和gcov的时候会报错 lcov的错误 xx localhost XXX lcov capture directory cov output file xxx info test
  • 程序员:腾讯32k,16个月+5万签字费,美团35k,15.5个月,怎么选

    腾讯和美团都是国内非常知名的互联网公司 是很多程序员非常向往的公司 最近有一位java程序员同时拿到了这两个公司的offer 却不知道应该选哪一个好 腾讯这边给的offer是32k一个月 一年16个月工资 另外还有5万块钱签字费 美团的of
  • vue中methods一个方法调用另外一个方法

    vue在同一个组件内 methods中的一个方法调用methods中的另外一个方法 可以在调用的时候 this options methods test2 this options methods test2 一个方法调用另外一个方法 ne
  • 今天我们来分享一下著名的分布式存储项目IPFS吧嘻嘻(最近在金融科技大赛,有相关的了解调用)

    我们先来了解一下HTTP的机制和原理吧 对于我们现在的网页协议来说 所有的HTML等前端的页面结构显示和文件都是通过HTTP请求来进行对中心化服务的访问 就像某一些时候 我们会发现自己的网页是不存在 是因为在服务器的中间无法的接受到我们的请
  • TypeScript 联合类型

    联合类型 联合类型 Union Types 可以通过管道 将变量设置多种类型 赋值时可以根据设置的类型来赋值 语法 Type1 Type2 Type3 实例 let res string number res 12 console log