TypeScript 类型

核酸赔我钱 發表於 2020-6-4 22:54:00

ES6的数据类型
<ul>
<li>Boolean</li>
<li>Number</li>
<li>String</li>
<li>Array</li>
<li>Function</li>
<li>Object</li>
<li>Symbol</li>
<li>undefined</li>
<li>null</li>
</ul>
TypeScript新加的数据类型
<ul>
<li>void</li>
<li>any</li>
<li>never</li>
<li>元组</li>
<li>枚举</li>
<li>高级类型</li>
</ul>
<h2>1，数组</h2>
<div class="cnblogs_code">
<pre>//数组两种等价声明
let arr1:number[] =
let arr2:Array<number> = </pre>
</div>
<h2>2，元组</h2>
<div class="cnblogs_code">
<pre>//元组 //是一种特殊的数组，限定了数组的类型和个数
let tuple: =
//为元组添加一个新的元素会怎样？允许添加
tuple.push(2)
console.log(tuple)
tuple[2] // 但是不能访问 //tuple type '' of length '2' has no element at index '2'.</pre>
</div>
所以非常不推荐通过push往元组里加元素。
<h2>3，函数类型</h2>
<div class="cnblogs_code">
<pre>//通常返回值的类型是可以省略的，可以看到返回值的类型仍然是number
let add=(x:number,y:number)=>x+y
//定义一种函数类型compute,没有具体实现
let compute:(x:number, y:number) =>number
compute=(a,b)=>a+b</pre>
</div>
<h2>4，对象类型</h2>
<div class="cnblogs_code">
<pre>//对象
let obj:object = {x:1, y:2}
//obj.x=3; //不能赋值，因为object类型
let obj2:{x:number,y:number} = {x:1, y:2}
obj2.x=3 //可以</pre>
</div>
<h2>5，Symbol类型</h2>
Symbol的含义是具有唯一的值。
<div class="cnblogs_code">
<pre>//symbol 
let s1: symbol=Symbol()
let s2=Symbol()
console.log(s1==s2) //false</pre>
</div>
 
<h2> 6，不能把其他类型赋值给undefined和null</h2>
<div class="cnblogs_code">
<pre>//undefined ,null
let un :undefined = undefined
let nu: null = null
// un = 1 //声明了undefined，就不能赋值为其他任何类型
let num2: number = 123
num2 = undefined //不能将类型“undefined”分配给类型“number”。
num2=null //不能将类型“null”分配给类型“number”。</pre>
</div>
TS中undefined和null是任何类型的子类型。
可以通过改配置把"strictNullChecks": false, 设置为false。
允许把undefined和null赋值给其他类型的值。
 
<h2> 7,void</h2>
JS中void是一种运算符，可以让任何表达式返回undefined.
<code>void</code> 运算符 对给定的表达式进行求值，然后返回 <code>undefined</code>。
void运算符通常只用于获取undefined的原始值，一般使用void(0)，等同于void 0。
 
<h2> 8,never类型</h2>
永远不会有返回值的类型
<div class="cnblogs_code">
<pre> //never
let error=()=>{
throw new Error('error')
}

let endless=()=>{
while(true){}
}</pre>
</div>
<h2> 9，枚举类型</h2>
<div class="cnblogs_code">
<pre>enum Role{
Reporter =1,
Developer,
Maintainer,
Owner,
Guest
}</pre>
</div>
实现原理：反向映射
<div class="cnblogs_code">
<pre>"use strict";
var Role;
(function (Role) {
Role = 1] = "Reporter";
Role = 2] = "Developer";
Role = 3] = "Maintainer";
Role = 4] = "Owner";
Role = 5] = "Guest";
})(Role || (Role = {}));</pre>
</div>
枚举分类：
常量枚举（编译时计算出结果，在运行时以产量出现）
Computed枚举：非常量表达式
<div class="cnblogs_code">
<pre>enum Char{
//const 编译时算出结果
 a,
b = Char.a,
c=1+3,
//computed 运行时才会计算
d=Math.random(),
e='123'.length
}</pre>
</div>
可以看到得到的js
<div class="cnblogs_code">
<pre>"use strict";
var Char;
(function (Char) {
//const 编译时算出结果
Char = 0] = "a";
Char = 0] = "b";
Char = 4] = "c";
//computed 运行时才会计算
Char = Math.random()] = "d";
Char = '123'.length] = "e";
})(Char || (Char = {}));</pre>
</div>
常亮枚举（用const声明的枚举）会在编译阶段被移除。不需要对象，只需要对象的值的时候用常量枚举，可以减少编译后的代码。
<div class="cnblogs_code">
<pre>const enum Month{
Jan,
Feb,
Mar
}

let month =</pre>
</div>
编译后的js
<div class="cnblogs_code">
<pre>"use strict";
let month = ;</pre>
</div>
 

</div>
<div id="MySignature" role="contentinfo">
如果觉得本文对您有帮助~可以支付宝(左)或微信支持一下：
 
看到小伙伴打赏时给我写一些鼓励的话，真的非常感动，谢谢你们。
 
我开了个微信公众号（第三个二维码）用来分享自己的职场英语相关学习经验，感兴趣可以关注，我会不断更新～ 
<div class="pay_img"><img style="display: none" class="alipay" src="http://files.cnblogs.com/files/starof/starof_zfb.bmp" alt="支付宝打赏"><img src="http://files.cnblogs.com/files/starof/starof_wx.bmp" alt="微信打赏"><img style="display: none" src="https://files.cnblogs.com/files/starof/starof_gzh.bmp" alt="微信公众号"></div> 
来源：https://www.cnblogs.com/starof/p/13043360.html

頁: [1]

琼殿技术论坛's Archiver

TypeScript 类型