typescript-基础类型

一个精灵 發表於 2019-5-4 12:33:00

ts代码有类型校验，必须指定类型
<h1>一：JavaScript的基本类型</h1>
7种：(大小写敏感)
　　boolean:  true  和false
　　null
　　undefined:变量未定义时的属性
　　number
　　string
　　symbol：（es6新添加的），它的实例是唯一且不可改变的
 
<h1>二：TypeScript的基本类型</h1>
<h2>1：数据类型</h2>
 
<table class="reference">
<tbody>
<tr><th>数据类型</th><th>关键字</th><th>描述</th></tr>
<tr>
<td>任意类型</td>
<td>any</td>
<td>
声明为 any 的变量可以赋予任意类型的值。
举例：
<div>　　var oBox:any = document.getElementById('box');</div>
</td>
</tr>
<tr>
<td class="ts">数据类型</td>
<td class="ts">number</td>
<td>
双精度 64 位浮点值。它可以用来表示整数和分数。
<pre class="prettyprint prettyprinted">let binaryLiteral: number = 0b1010; // 二进制
let octalLiteral: number = 0o744; // 八进制
let decLiteral: number = 6; // 十进制
let hexLiteral: number = 0xf00d; // 十六进制</pre>
</td>
</tr>
<tr>
<td>字符串类型</td>
<td>string</td>
<td>
一个字符系列，使用单引号（'）或双引号（"）来表示字符串类型。反引号（`）来定义多行文本和内嵌表达式。
<pre class="prettyprint prettyprinted">let name: string = "Runoob";
let years: number = 5;
let words: string = `您好，今年是 ${ name } 发布 ${ years + 1} 周年`;</pre>
</td>
</tr>
<tr>
<td>布尔类型</td>
<td>boolean</td>
<td>
表示逻辑值：true 和 false。
<pre class="prettyprint prettyprinted">let flag: boolean = true;</pre>
</td>
</tr>
<tr>
<td>数组类型</td>
<td>无</td>
<td>
声明变量为数组。
<pre class="prettyprint prettyprinted">// 在元素类型后面加上[]
let arr: number[] = [1, 2];

// 或者使用数组泛型
let arr: Array<number> = [1, 2]; </pre>
<pre class="prettyprint prettyprinted">// 在元素类型后面加上[]
let arr: any[] = [1, 'gg'];</pre>
<pre class="prettyprint prettyprinted"> </pre>
</td>
</tr>
<tr>
<td>元组</td>
<td>无</td>
<td>
元组类型用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同。
<pre class="prettyprint prettyprinted">let x: [string, number];
x = ['Runoob', 1]; // 运行正常
x = [1, 'Runoob']; // 报错
console.log(x[0]); // 输出 Runoob</pre>
</td>
</tr>
<tr>
<td>枚举</td>
<td>enum</td>
<td>
枚举类型用于定义数值集合。（定义更多的其他非数值类型的数据）
定义：
　　enum 枚举名称{
　　　　标识符[=整型常数]，
　　　　.....
　　}
举例：
　　enum flag {success=1,error=0};
<pre class="prettyprint prettyprinted">enum Color {Red, Green, Blue};
let c: Color = Color.Blue;
console.log(c); // 输出 2,如果枚举类型没有赋值，那么输出的就是下标</pre>
</td>
</tr>
<tr>
<td class="ts">void</td>
<td class="ts">void</td>
<td>
用于标识方法返回值的类型，表示该方法没有返回值。
<pre class="prettyprint prettyprinted">function hello(): void {
alert("Hello Runoob");
}</pre>
</td>
</tr>
<tr>
<td>null</td>
<td>null</td>
<td>
表示对象值缺失。
</td>
</tr>
<tr>
<td>undefined</td>
<td>undefined</td>
<td>
用于初始化变量为一个未定义的值；
举例：
　下面这样定义最好。　
<pre class="prettyprint prettyprinted">let x: number | null | undefined;
x = 1; // 运行正确
x = undefined; // 运行正确
x = null; // 运行正确</pre>
</td>
</tr>
<tr>
<td>never</td>
<td>never</td>
<td>
never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。这意味着声明为 never 类型的变量只能被 never 类型所赋值，在函数中它通常表现为抛出异常或无法执行到终止点（例如无线循环）
举例：
<pre class="prettyprint prettyprinted">let x: never;

// 运行错误，数字类型不能转为 never 类型
x = 123;</pre>
 
</td>
</tr>
<tr>
<td> </td>
<td>Object  </td>
<td>
 Object是一种非<code style="padding: 2px 4px; border-radius: 4px; color: rgba(191, 65, 74, 1); text-transform: none; text-indent: 0; letter-spacing: normal; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 16px; font-style: normal; font-weight: 400; word-spacing: 0; white-space: normal; box-sizing: border-box; orphans: 2; widows: 2; background-color: rgba(255, 255, 255, 1); font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial">number</code>，<code style="padding: 2px 4px; border-radius: 4px; color: rgba(191, 65, 74, 1); text-transform: none; text-indent: 0; letter-spacing: normal; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 16px; font-style: normal; font-weight: 400; word-spacing: 0; white-space: normal; box-sizing: border-box; orphans: 2; widows: 2; background-color: rgba(255, 255, 255, 1); font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial">string</code>，<code style="padding: 2px 4px; border-radius: 4px; color: rgba(191, 65, 74, 1); text-transform: none; text-indent: 0; letter-spacing: normal; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 16px; font-style: normal; font-weight: 400; word-spacing: 0; white-space: normal; box-sizing: border-box; orphans: 2; widows: 2; background-color: rgba(255, 255, 255, 1); font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial">boolean</code>，<code style="padding: 2px 4px; border-radius: 4px; color: rgba(191, 65, 74, 1); text-transform: none; text-indent: 0; letter-spacing: normal; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 16px; font-style: normal; font-weight: 400; word-spacing: 0; white-space: normal; box-sizing: border-box; orphans: 2; widows: 2; background-color: rgba(255, 255, 255, 1); font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial">symbol</code>，<code style="padding: 2px 4px; border-radius: 4px; color: rgba(191, 65, 74, 1); text-transform: none; text-indent: 0; letter-spacing: normal; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 16px; font-style: normal; font-weight: 400; word-spacing: 0; white-space: normal; box-sizing: border-box; orphans: 2; widows: 2; background-color: rgba(255, 255, 255, 1); font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial">null</code>，或<code style="padding: 2px 4px; border-radius: 4px; color: rgba(191, 65, 74, 1); text-transform: none; text-indent: 0; letter-spacing: normal; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 16px; font-style: normal; font-weight: 400; word-spacing: 0; white-space: normal; box-sizing: border-box; orphans: 2; widows: 2; background-color: rgba(255, 255, 255, 1); font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial">undefined</code>的类型
举例：
<span class="hljs-keyword" style="color: rgba(47, 79, 79, 1); text-transform: none; line-height: 1.6em; text-indent: 0; letter-spacing: normal; font-family: Menlo, Monaco, "Courier New", monospace; font-style: normal; font-weight: bold; word-spacing: 0; white-space: pre-wrap; box-sizing: border-box; orphans: 2; widows: 2; font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial">declare<span style="color: rgba(47, 79, 79, 1); text-transform: none; text-indent: 0; letter-spacing: normal; font-family: Menlo, Monaco, "Courier New", monospace; font-style: normal; font-weight: 400; word-spacing: 0; float: none; display: inline !important; white-space: pre-wrap; orphans: 2; widows: 2; background-color: rgba(234, 238, 243, 1); font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial"> <span class="hljs-function" style="color: rgba(47, 79, 79, 1); text-transform: none; line-height: 1.6em; text-indent: 0; letter-spacing: normal; font-family: Menlo, Monaco, "Courier New", monospace; font-style: normal; font-weight: 400; word-spacing: 0; white-space: pre-wrap; box-sizing: border-box; orphans: 2; widows: 2; font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial">function create(o: object | null): void<span style="color: rgba(47, 79, 79, 1); text-transform: none; text-indent: 0; letter-spacing: normal; font-family: Menlo, Monaco, "Courier New", monospace; font-style: normal; font-weight: 400; word-spacing: 0; float: none; display: inline !important; white-space: pre-wrap; orphans: 2; widows: 2; background-color: rgba(234, 238, 243, 1); font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial">; create({ prop: <span class="hljs-number" style="color: rgba(47, 79, 79, 1); text-transform: none; line-height: 1.6em; text-indent: 0; letter-spacing: normal; font-family: Menlo, Monaco, "Courier New", monospace; font-style: normal; font-weight: 400; word-spacing: 0; white-space: pre-wrap; box-sizing: border-box; orphans: 2; widows: 2; font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial">0<span style="color: rgba(47, 79, 79, 1); text-transform: none; text-indent: 0; letter-spacing: normal; font-family: Menlo, Monaco, "Courier New", monospace; font-style: normal; font-weight: 400; word-spacing: 0; float: none; display: inline !important; white-space: pre-wrap; orphans: 2; widows: 2; background-color: rgba(234, 238, 243, 1); font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial"> }); <span class="hljs-comment" style="color: rgba(115, 129, 145, 1); text-transform: none; line-height: 1.6em; text-indent: 0; letter-spacing: normal; font-family: Menlo, Monaco, "Courier New", monospace; font-style: normal; font-weight: 400; word-spacing: 0; white-space: pre-wrap; box-sizing: border-box; orphans: 2; widows: 2; font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial">// OK<span style="color: rgba(47, 79, 79, 1); text-transform: none; text-indent: 0; letter-spacing: normal; font-family: Menlo, Monaco, "Courier New", monospace; font-style: normal; font-weight: 400; word-spacing: 0; float: none; display: inline !important; white-space: pre-wrap; orphans: 2; widows: 2; background-color: rgba(234, 238, 243, 1); font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial"> create(<span class="hljs-literal" style="color: rgba(0, 72, 171, 1); text-transform: none; line-height: 1.6em; text-indent: 0; letter-spacing: normal; font-family: Menlo, Monaco, "Courier New", monospace; font-style: normal; font-weight: 400; word-spacing: 0; white-space: pre-wrap; box-sizing: border-box; orphans: 2; widows: 2; font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial">null<span style="color: rgba(47, 79, 79, 1); text-transform: none; text-indent: 0; letter-spacing: normal; font-family: Menlo, Monaco, "Courier New", monospace; font-style: normal; font-weight: 400; word-spacing: 0; float: none; display: inline !important; white-space: pre-wrap; orphans: 2; widows: 2; background-color: rgba(234, 238, 243, 1); font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial">); <span class="hljs-comment" style="color: rgba(115, 129, 145, 1); text-transform: none; line-height: 1.6em; text-indent: 0; letter-spacing: normal; font-family: Menlo, Monaco, "Courier New", monospace; font-style: normal; font-weight: 400; word-spacing: 0; white-space: pre-wrap; box-sizing: border-box; orphans: 2; widows: 2; font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial">// OK<span style="color: rgba(47, 79, 79, 1); text-transform: none; text-indent: 0; letter-spacing: normal; font-family: Menlo, Monaco, "Courier New", monospace; font-style: normal; font-weight: 400; word-spacing: 0; float: none; display: inline !important; white-space: pre-wrap; orphans: 2; widows: 2; background-color: rgba(234, 238, 243, 1); font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial"> create(<span class="hljs-number" style="color: rgba(47, 79, 79, 1); text-transform: none; line-height: 1.6em; text-indent: 0; letter-spacing: normal; font-family: Menlo, Monaco, "Courier New", monospace; font-style: normal; font-weight: 400; word-spacing: 0; white-space: pre-wrap; box-sizing: border-box; orphans: 2; widows: 2; font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial">42<span style="color: rgba(47, 79, 79, 1); text-transform: none; text-indent: 0; letter-spacing: normal; font-family: Menlo, Monaco, "Courier New", monospace; font-style: normal; font-weight: 400; word-spacing: 0; float: none; display: inline !important; white-space: pre-wrap; orphans: 2; widows: 2; background-color: rgba(234, 238, 243, 1); font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial">); <span class="hljs-comment" style="color: rgba(115, 129, 145, 1); text-transform: none; line-height: 1.6em; text-indent: 0; letter-spacing: normal; font-family: Menlo, Monaco, "Courier New", monospace; font-style: normal; font-weight: 400; word-spacing: 0; white-space: pre-wrap; box-sizing: border-box; orphans: 2; widows: 2; font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial">// Error<span style="color: rgba(47, 79, 79, 1); text-transform: none; text-indent: 0; letter-spacing: normal; font-family: Menlo, Monaco, "Courier New", monospace; font-style: normal; font-weight: 400; word-spacing: 0; float: none; display: inline !important; white-space: pre-wrap; orphans: 2; widows: 2; background-color: rgba(234, 238, 243, 1); font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial"> create(<span class="hljs-string" style="color: rgba(0, 72, 171, 1); text-transform: none; line-height: 1.6em; text-indent: 0; letter-spacing: normal; font-family: Menlo, Monaco, "Courier New", monospace; font-style: normal; font-weight: 400; word-spacing: 0; white-space: pre-wrap; box-sizing: border-box; orphans: 2; widows: 2; font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial">"string"<span style="color: rgba(47, 79, 79, 1); text-transform: none; text-indent: 0; letter-spacing: normal; font-family: Menlo, Monaco, "Courier New", monospace; font-style: normal; font-weight: 400; word-spacing: 0; float: none; display: inline !important; white-space: pre-wrap; orphans: 2; widows: 2; background-color: rgba(234, 238, 243, 1); font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial">); <span class="hljs-comment" style="color: rgba(115, 129, 145, 1); text-transform: none; line-height: 1.6em; text-indent: 0; letter-spacing: normal; font-family: Menlo, Monaco, "Courier New", monospace; font-style: normal; font-weight: 400; word-spacing: 0; white-space: pre-wrap; box-sizing: border-box; orphans: 2; widows: 2; font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial">// Error<span style="color: rgba(47, 79, 79, 1); text-transform: none; text-indent: 0; letter-spacing: normal; font-family: Menlo, Monaco, "Courier New", monospace; font-style: normal; font-weight: 400; word-spacing: 0; float: none; display: inline !important; white-space: pre-wrap; orphans: 2; widows: 2; background-color: rgba(234, 238, 243, 1); font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial"> create(<span class="hljs-literal" style="color: rgba(0, 72, 171, 1); text-transform: none; line-height: 1.6em; text-indent: 0; letter-spacing: normal; font-family: Menlo, Monaco, "Courier New", monospace; font-style: normal; font-weight: 400; word-spacing: 0; white-space: pre-wrap; box-sizing: border-box; orphans: 2; widows: 2; font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial">false<span style="color: rgba(47, 79, 79, 1); text-transform: none; text-indent: 0; letter-spacing: normal; font-family: Menlo, Monaco, "Courier New", monospace; font-style: normal; font-weight: 400; word-spacing: 0; float: none; display: inline !important; white-space: pre-wrap; orphans: 2; widows: 2; background-color: rgba(234, 238, 243, 1); font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial">); <span class="hljs-comment" style="color: rgba(115, 129, 145, 1); text-transform: none; line-height: 1.6em; text-indent: 0; letter-spacing: normal; font-family: Menlo, Monaco, "Courier New", monospace; font-style: normal; font-weight: 400; word-spacing: 0; white-space: pre-wrap; box-sizing: border-box; orphans: 2; widows: 2; font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial">// Error<span style="color: rgba(47, 79, 79, 1); text-transform: none; text-indent: 0; letter-spacing: normal; font-family: Menlo, Monaco, "Courier New", monospace; font-style: normal; font-weight: 400; word-spacing: 0; float: none; display: inline !important; white-space: pre-wrap; orphans: 2; widows: 2; background-color: rgba(234, 238, 243, 1); font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial"> create(<span class="hljs-literal" style="color: rgba(0, 72, 171, 1); text-transform: none; line-height: 1.6em; text-indent: 0; letter-spacing: normal; font-family: Menlo, Monaco, "Courier New", monospace; font-style: normal; font-weight: 400; word-spacing: 0; white-space: pre-wrap; box-sizing: border-box; orphans: 2; widows: 2; font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial">undefined<span style="color: rgba(47, 79, 79, 1); text-transform: none; text-indent: 0; letter-spacing: normal; font-family: Menlo, Monaco, "Courier New", monospace; font-style: normal; font-weight: 400; word-spacing: 0; float: none; display: inline !important; white-space: pre-wrap; orphans: 2; widows: 2; background-color: rgba(234, 238, 243, 1); font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial">); <span class="hljs-comment" style="color: rgba(115, 129, 145, 1); text-transform: none; line-height: 1.6em; text-indent: 0; letter-spacing: normal; font-family: Menlo, Monaco, "Courier New", monospace; font-style: normal; font-weight: 400; word-spacing: 0; white-space: pre-wrap; box-sizing: border-box; orphans: 2; widows: 2; font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial">// Error

</td>

</tr>

</tbody>

</table>
 
<h2>2：类型断言（相当于转换数据类型）</h2>
类型断言有两种形式。其一是“尖括号”语法：
<div class="cnblogs_code">
<pre>var str = '1'
var str2:number = <number> <any> str //str、str2 是 string 类型
console.log(str2)</pre>
</div>
 
另一个为<code>as</code>语法：
<div class="cnblogs_code">
<pre>let someValue: any = "this is a string";

let strLength: number = (someValue as string).length;</pre>
</div>
两种形式是等价的。至于使用哪个大多数情况下是凭个人喜好；然而，当你在TypeScript里使用JSX时，只有 <code>as</code>语法断言是被允许的。
 
 
<h1>三：变量声明</h1>
 
TypeScript 变量的命名规则：
<ul>
<li>
变量名称可以包含数字和字母。
</li>
<li>
除了下划线 _ 和美元 $ 符号外，不能包含其他特殊字符，包括空格。
</li>
<li>
变量名不能以数字开头。
</li>
</ul>
变量使用前必须先声明，我们可以使用 var 来声明变量。
<h2>1：var</h2>
<div class="cnblogs_code">
<pre>声明变量的类型及初始值：
var [变量名] : [类型] = 值;
例如：
var uname:string = "Runoob";
声明变量的类型及但没有初始值，变量值会设置为 undefined：
var [变量名] : [类型];
例如：
var uname:string;
声明变量并初始值，但不设置类型类型，该变量可以是任意类型：
var [变量名] = 值;
例如：
var uname = "Runoob";
声明变量没有设置类型和初始值，类型可以是任意类型，默认初始值为 undefined：
var [变量名];
例如：
var uname;</pre>
</div>
 
<div class="cnblogs_code">
<pre> // var 的变量提升的问题
console.log(a);//undefined ##如何看是否是提升变量---》局部作用域前后打印看看
 {
var a = 10;
}
console.log(a) //10</pre>
</div>
 
<h2>2：let  （es6新增）</h2>
let不存在变量提升，作用域是局部作用域
 
<h2>3：<code>const</code> 声明（es6新增）</h2>
<code>const</code> 声明是声明变量的另一种方式。
它们与<code>let</code>声明相似，但是就像它的名字所表达的，它们被赋值后不能再改变。换句话说，它们拥有与 <code>let</code>相同的作用域规则，但是不能对它们重新赋值。
这很好理解，它们引用的值是不可变的。
<div class="cnblogs_code">
<pre>const numLivesForCat = 9;
const kitty = {
name: "Aurora",
numLives: numLivesForCat,
}

// Error
kitty = {
name: "Danielle",
numLives: numLivesForCat
};

// all "okay"
kitty.name = "Rory";
kitty.name = "Kitty";
kitty.name = "Cat";
kitty.numLives--;</pre>
</div>
除非你使用特殊的方法去避免，实际上<code>const</code>变量的内部状态是可修改的。幸运的是，TypeScript允许你将对象的成员设置成只读的。
 
<h1>四：泛型</h1>
<h2>1：泛型函数---泛型的作用</h2>
当我们需要给一个函数传入一个数字时（需要参数和返回值是同一类型），
<div class="cnblogs_code">
<pre>function hello(arg: number): number {
return arg;
}</pre>
</div>
 
当我们需要给一个函数传入一个字符串时，
<div class="cnblogs_code">
<pre>function hello(arg: string): string {
return arg;
}</pre>
</div>
 
这样是不是很麻烦呢？看下面写法：
<div class="cnblogs_code">
<pre>function hello(arg: any): any {
return arg;
}</pre>
</div>
 
这样写的缺点：any类型不能明确地表达参数与返回值必须是相同类型。因此泛型是能明确控制参数、返回值数据类型相同的方式
泛型如下写法：
<div class="cnblogs_code">
<pre>function hello<T>(arg: T): T {
return arg;
}</pre>
</div>
 
<h2>2：泛型变量</h2>
<img src="https://img2018.cnblogs.com/blog/1451394/201906/1451394-20190628231205571-1130900653.png" alt="">
为什么上面的变量会报错呢？因为   T   只是捕捉传入的数据类型，并不能确定数据是number  还是  string还是什么。
 <img src="https://img2018.cnblogs.com/blog/1451394/201906/1451394-20190628231521472-596030065.png" alt="">
像泛型数组就没有问题了
<h1>五：枚举</h1>
 为什么会有枚举呢？举个例子：后端开发约定订单的开始是0，未结账是1，运输中是2，运输完成是3，已收货是4.这样的纯数字会使得代码缺乏可读性。枚举就用于此场景。
<h2>1：数字枚举</h2>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">enum OrderStatus {
Start = 1,
Unpaid,
Shipping,
Shipped,
Complete,
}
</pre>
</div>
就像上面我们就可以直接通过　OrderStatus.Start来代替原来的数字1，这样使得代码具备了可读性。
（上面Start = 1时，后面的枚举变量就是递增的）
<div class="cnblogs_code">
<pre>enum OrderStatus {
Start,
Unpaid,
Shipping,
Shipped,
Complete,
}</pre>
</div>
 
　（上面Start就是0，后面的枚举变量就是递增的。我们虽然不在意后面的这些值，但这些值必须是确定的。）
<h2>2：字符串枚举</h2>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">enum OrderStatus {
Start = 'Start',
Unpaid = 'Unpaid',
Shipping = 'Shipping',
Shipped= 'Shipped',
Complete = 'Complete',
}
</pre>
</div>
这样的可读性是不是更高了呢。　　
 
<h1>六：symbol</h1>
 自es6起，symbol 是类似于number、string的基本类型。
symbol的特点：symbol是唯一的，即使是使用同样的方式生成的两个symbol
 
 
<h1>七：iterator 和 generator</h1>
 
 
 
<h1> </h1>
<h1> </h1>
 
 
 
 
 
<pre> </pre>
 

</div>
<div id="MySignature" role="contentinfo">
或许你没有发现，你认真学习的样子总是最美的 
来源：https://www.cnblogs.com/lilz/p/10808139.html

頁: [1]

琼殿技术论坛's Archiver

typescript-基础类型