【零基础入门TypeScript】Union

news2024/10/6 22:23:48

目录

语法:Union文字

示例:Union类型变量

示例:Union 类型和函数参数

Union类型和数组

示例:Union类型和数组



TypeScript 1.4 使程序能够组合一种或两种类型。Union类型是表达可以是多种类型之一的值的强大方法。使用管道符号 (|) 组合两个或多个数据类型以表示Union类型。换句话说,Union类型被写为由竖线分隔的类型序列。

语法:Union文字

Type1|Type2|Type3 

示例:Union类型变量

var val:string|number val = 12
console.log("numeric value of val "+val)
val = "This is a string"
console.log("string value of val "+val)

在上面的示例中,变量的类型是 union。这意味着变量可以包含数字或字符串作为其值。

编译时,它将生成以下 JavaScript 代码。

//Generated by typescript 1.8.10
var val; val = 12;
console.log("numeric value of val " + val);
val = "This is a string";
console.log("string value of val " + val);

其输出如下 -

numeric value of val  12 
string value of val this is a string 

示例:Union 类型和函数参数

function disp(name:string|string[]) { 
   if(typeof name == "string") { 
      console.log(name) 
   } else { 
      var i; 
      
      for(i = 0;i<name.length;i++) { 
         console.log(name[i])
      } 
   } 
} 
disp("mark") 
console.log("Printing names array....") 
disp(["Mark","Tom","Mary","John"])

函数 disp() 可以接受字符串类型或字符串数​​组类型的参数。

编译时,它将生成以下 JavaScript 代码。

//Generated by typescript 1.8.10
function disp(name) {
   if (typeof name == "string") {
      console.log(name);
   } else {
      var i;
      for (i = 0; i < name.length; i++) {
         console.log(name[i]);
      }
   }
}

disp("mark");
console.log("Printing names array....");
disp(["Mark", "Tom", "Mary", "John"]);

输出如下 -

Mark 
Printing names array…. 
Mark 
Tom
Mary
John 

Union类型和数组

Union类型还可以应用于数组、属性和接口。下面说明了Union类型与数组的使用。

示例:Union类型和数组


var arr:number[]|string[]; 
var i:number; 
arr = [1,2,4] 
console.log("**numeric array**")  

for(i = 0;i<arr.length;i++) { 
   console.log(arr[i]) 
}  

arr = ["Mumbai","Pune","Delhi"] 
console.log("**string array**")  

for(i = 0;i<arr.length;i++) { 
   console.log(arr[i]) 
} 

该程序声明了一个数组。该数组可以表示数字集合或字符串集合。

编译时,它将生成以下 JavaScript 代码。


//Generated by typescript 1.8.10
var arr;
var i;
arr = [1, 2, 4];
console.log("**numeric array**");

for (i = 0; i < arr.length; i++) {
   console.log(arr[i]);
}
arr = ["Mumbai", "Pune", "Delhi"];
console.log("**string array**");

for (i = 0; i < arr.length; i++) {
   console.log(arr[i]);
}

其输出如下 -

**numeric array** 
1 
2 
4 
**string array** 
Mumbai 
Pune 
Delhi

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1433653.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【动态规划】【状态压缩】【2次选择】【广度搜索】1494. 并行课程 II

作者推荐 视频算法专题 本文涉及知识点 动态规划汇总 状态压缩 广度优先搜索 LeetCode1494. 并行课程 II 给你一个整数 n 表示某所大学里课程的数目&#xff0c;编号为 1 到 n &#xff0c;数组 relations 中&#xff0c; relations[i] [xi, yi] 表示一个先修课的关系&am…

关于在大模型中遇到的6(colab)

来源&#xff1a;免费的GPU——colab使用教程 - 知乎 作者&#xff1a;焦龙 首先你得注册一个google账号才能用google的这些东西&#xff0c;然后你需要科学上网才能去注册google账号&#xff0c;这些我就不说了。 colab网址&#xff1a;运行代码的地方 https://colab.rese…

Hack The Box-Challenges-Misc-M0rsarchive

解压压缩包&#xff0c;里面是一张图片和一个新的zip文件 图片放大后的图案是----. 考虑到为莫斯密码&#xff0c;将其解密 密码为9&#xff0c;继续解压缩包 又是一张莫斯密码图加压缩包&#xff0c;写一段脚本去解密图片中的莫斯密码&#xff0c;并自动解压缩包 import re i…

cesium-测量高度垂直距离

cesium做垂直测量 完整代码 <template><div id"cesiumContainer" style"height: 100vh;"></div><div id"toolbar" style"position: fixed;top:20px;left:220px;"><el-breadcrumb><el-breadcrumb-i…

情人节送什么礼物合适?情人节礼物最佳排行榜

​马上就要到情人节了&#xff0c;大家是否已经选好了送给爱人的礼物呢&#xff1f;如果没有&#xff0c;或许可以考虑一些优质的数码产品。随着科技的发展&#xff0c;数码产品已经成为我们生活中不可或缺的一部分。接下来&#xff0c;我将为大家推荐几款非常适合作为情人节礼…

LeetCode:2.两数相加

目录 题目&#xff1a;​编辑2. 两数相加 - 力扣&#xff08;LeetCode&#xff09; 分析问题&#xff1a; 官方的优秀代码博主的注释&#xff1a; 博主的辣眼代码&#xff0c;无注释&#xff0c;拉出来拷打自己&#xff1a; 每日表情包&#xff1a; 2. 两数相加 - 力扣&am…

什么是信创业态支持?支持信创的数据库防水坝哪家好?

随着国产化信创化的崛起&#xff0c;出现了很多新名词&#xff0c;例如信创业态支持、国产信创化等等。今天我们就来聊聊什么是信创业态支持&#xff1f;支持信创的数据库防水坝哪家好&#xff1f; 什么是信创业态支持&#xff1f; 大范围而言&#xff0c;信创业态支持可以理解…

【404App】一篇文章搞定SSL证书更换,赶紧收藏吧!

场景:阿里云服务器,nginx 第一步:下载免费证书,登录购买域名的阿里云账户,选择免费证书申请、下载(https://yundun.console.aliyun.com/?spm=5176.12818093_-1363046575.ProductAndResource–ali–widget-product-recent.2.3be916d0qj5Z8O&p=cas#/certExtend/free/…

uniapp中配置开发环境和生产环境

uniapp在开发的时候&#xff0c;可以配置多种环境&#xff0c;用于自动切换IP地址&#xff0c;用HBuilder X直接运行的就是开发环境&#xff0c;用HBuilder X发布出来的&#xff0c;就是生产环境。 1.使用HBuilder X创建原生的uniapp程序 选择vue3 2.什么都不改&#xff0c;就…

ChatGPT辅助编程,一次有益的尝试

如果大家想学习PCIe&#xff0c;搜索网上的信息&#xff0c;大概率会看到chinaaet上Felix的PCIe扫盲系列的博文 Felix-PCIe扫盲 每次看这个系列博文的时候&#xff0c;我都在想有没有什么方法可以把这个系列的博文都保存到一个pdf文件中&#xff0c;这样方便阅读。于是有了下…

嵌入式 - UART Flow Control

简介 / Introduction UART 流量控制是一种让慢速和快速设备通过 UART 相互通信而不会丢失数据的方法。 考虑两个设备通过 UART 通信的情况。发送器 T 正在向接收器 R 发送一长串字节。R 是一个比 T 慢的设备&#xff0c;在某些时候 R 无法跟上。它需要对数据进行一些处理或清空…

项目02《游戏-07-开发》Unity3D

基于 项目02《游戏-06-开发》Unity3D &#xff0c; 接下来做UI框架的逻辑系统&#xff0c;管理器和UI背包&#xff0c; 首先闯将UI框架的两个重要脚本 BasePanel.cs 和 UIManager.cs &#xff0c; 双击BasePanel.cs脚本修改代码&#xff1a; using UnityEngine; pu…

基于Java SSM框架实现网上租车系统项目【项目源码+论文说明】计算机毕业设计

基于java的SSM框架实现网上租车系统演示 摘要 随着现在网络的快速发展&#xff0c;网上管理系统也逐渐快速发展起来&#xff0c;网上管理模式很快融入到了许多商家的之中&#xff0c;随之就产生了“网上租车系统”&#xff0c;这样就让网上租车系统更加方便简单。 对于本网上…

架构篇33:传统的可扩展架构模式-分层架构和SOA

文章目录 分层架构SOA小结相比于高性能、高可用架构模式在最近几十年的迅猛发展来说,可扩展架构模式的发展可以说是步履蹒跚,最近几年火热的微服务模式算是可扩展模式发展历史中为数不多的亮点,但这也导致了现在谈可扩展的时候必谈微服务,甚至微服务架构都成了架构设计的银…

Undertow使用详解

简介 Undertow是一个开源的、灵活的、高性能的非阻塞性应用服务器&#xff0c;由JBoss提供。它可以用作嵌入式服务器&#xff0c;也可以用作大型项目的全功能应用服务器。Undertow的设计以提供最高的性能和最大的灵活性为主要目标&#xff0c;支持非阻塞性和阻塞性处理方式&…

乐意购项目前端开发 #6

一、商品详情页面 代码模版 创建Detail文件夹, 然后创建index.vue文件 <script setup> import { getDetail } from "/api/goods/index"; import { ref, onMounted } from "vue"; import { useRoute } from "vue-router"; import { useCar…

手写分布式存储系统v0.3版本

引言 承接 手写分布式存储系统v0.2版本 &#xff0c;今天开始新的迭代开发。主要实现 服务发现功能 一、什么是服务发现 由于咱们的服务是分布式的&#xff0c;那从服务管理的角度来看肯定是要有一个机制来知道具体都有哪些实例可以提供服务。举个例子就是&#xff0c;张三家…

《大魔界村》中的人物性格——亚瑟

《大魔界村》作为一款经典的街机动作游戏,其主角——勇敢的骑士亚瑟,以其独特的性格特点和坚定的信念,在玩家心中留下了深刻印象。本文将深入探讨亚瑟这一角色的性格特质,通过分析他在游戏中的行为表现及决策过程,展现他身上的勇气、坚韧与智慧三大要点。 一、无畏挑战的…

全套电气自动化样例图纸分享,使用SuperWorks自动化版免费设计软件!

今天给大家分享一套完备的电气自动化样例图纸&#xff0c;结构准确、内容清晰&#xff0c;适合初学者入门操作练习。 整套图纸包含图纸目录、原理图、端子列表、连接列表、元件列表、接线图&#xff0c;具有较高的参考价值&#xff0c;请大家点击自行下载文件&#xff01; 1e8…

【51单片机】直流电机实验和步进电机实验

目录 直流电机实验直流电机介绍ULN2003 芯片介绍硬件设计软件设计实验现象 步进电机实验步进电机简介步进电机的工作原理步进电机极性区分双极性步进电机驱动原理单极性步进电机驱动原理细分驱动原理 28BYJ-48 步进电机简介软件设计 橙色 直流电机实验 在未学习 PWM 之前&…