【零基础入门TypeScript】Union

目录

语法:Union文字

示例:Union类型变量

[示例:Union 类型和函数参数](#示例:Union 类型和函数参数)

Union类型和数组

示例:Union类型和数组


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

语法:Union文字

notranslate 复制代码
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);

其输出如下 -

notranslate 复制代码
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"]);

输出如下 -

notranslate 复制代码
Mark 
Printing names array.... 
Mark 
Tom
Mary
John 

Union类型和数组

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

示例:Union类型和数组

demo-code 复制代码
复制代码
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 代码。

just-code 复制代码
复制代码
//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]);
}

其输出如下 -

notranslate 复制代码
**numeric array** 
1 
2 
4 
**string array** 
Mumbai 
Pune 
Delhi
相关推荐
知识分享小能手14 小时前
微信小程序入门学习教程,从入门到精通,电影之家小程序项目知识点详解 (17)
前端·javascript·学习·微信小程序·小程序·前端框架·vue
Dever14 小时前
记一次 CORS 深水坑:开启 withCredentials 后Response headers 只剩 content-type
前端·javascript
Hilaku14 小时前
为什么我开始减少逛技术社区,而是去读非技术的书?
前端·javascript·面试
等风来不如迎风去15 小时前
用你本地已有的私钥(private key)去 SSH 登录远程 Ubuntu 服务器
服务器·ubuntu·ssh
猪哥帅过吴彦祖15 小时前
第 8 篇:更广阔的世界 - 加载 3D 模型
前端·javascript·webgl
Asort15 小时前
JavaScript设计模式(十二)——代理模式 (Proxy)
前端·javascript·设计模式
tangdou36909865515 小时前
可怕!我的Nodejs系统因为日志打印了Error 对象就崩溃了😱 Node.js System Crashed Because of Logging
前端·javascript·后端
lijunjun15 小时前
当ubuntu 系统的IP地址修改之后,gitlab服务应该如何修改?
tcp/ip·ubuntu·gitlab
Mintopia15 小时前
🎨 数据增强技术在 AIGC 训练中的应用:提升 Web 生成的多样性
前端·javascript·aigc
xiaohua0708day15 小时前
关于解决js中MediaRecorder录制的webm视频没有进度条的问题
javascript·音视频