TypeScript - 数组 - Powered by Discuz! Archiver

谢小平 發表於 2019-5-17 16:43:00

TypeScript - 数组

在 TypeScript 中，数组类型有多种定义方式，比较灵活。
<div class="blockHeadingContent-756c9114">
<div class="cnblogs_code">
<pre>let fibonacci: number[] = [1, 1, 2, 3, 5];</pre>
</div>
数组的项中不允许出现其他的类型：
</div>
<div class="codeBlock-18b09018">
<div class="codeHeader-e3625762--codeHeaderFloating-7f73cde3">
<div class="cnblogs_code">
<pre>let fibonacci: number[] = [1, '1', 2, 3, 5];

// index.ts(1,5): error TS2322: Type '(number | string)[]' is not assignable to type 'number[]'.
// Type 'number | string' is not assignable to type 'number'.
// Type 'string' is not assignable to type 'number'.</pre>
</div>
上例中，<code class="code-81e98f88" data-slate-leaf="true"></code> 的类型被推断为 <code class="code-81e98f88" data-slate-leaf="true">(number | string)[]</code>，这是联合类型和数组的结合。数组的一些方法的参数也会根据数组在定义时约定的类型进行限制：
</div>
</div>
<div class="codeBlock-18b09018">
<div class="codeHeader-e3625762--codeHeaderFloating-7f73cde3">
<div class="cnblogs_code">
<pre>let fibonacci: number[] = [1, 1, 2, 3, 5];
fibonacci.push('8');

// index.ts(2,16): error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.</pre>
</div>
</div>
</div>
上例中，<code class="code-81e98f88" data-slate-leaf="true">push</code> 方法只允许传入 <code class="code-81e98f88" data-slate-leaf="true">number</code> 类型的参数，但是却传了一个 <code class="code-81e98f88" data-slate-leaf="true">string</code> 类型的参数，所以报错了。
<div class="blockHeadingContent-756c9114">接口也可以用来描述数组：</div>
<div class="codeBlock-18b09018">
<div class="codeHeader-e3625762--codeHeaderFloating-7f73cde3">
<div class="cnblogs_code">
<pre>interface NumberArray {
: number;
}
let fibonacci: NumberArray = [1, 1, 2, 3, 5];</pre>
</div>
</div>
</div>
<code class="code-81e98f88" data-slate-leaf="true">NumberArray</code> 表示：只要 <code class="code-81e98f88" data-slate-leaf="true">index</code> 的类型是 <code class="code-81e98f88" data-slate-leaf="true">number</code>，那么值的类型必须是 <code class="code-81e98f88" data-slate-leaf="true">number</code>。
any 在数组中的应用，一个比较常见的做法是，用 <code class="code-81e98f88" data-slate-leaf="true">any</code> 表示数组中允许出现任意类型：
<div class="cnblogs_code">
<pre>let list: any[] = ['Xcat Liu', 25, { website: 'http://xcatliu.com' }];</pre>
</div>
<div class="blockHeadingContent-756c9114">类数组</div>
<div class="codeBlock-18b09018">
<div class="codeHeader-e3625762--codeHeaderFloating-7f73cde3">
<div class="cnblogs_code">
<pre>function sum() {
let args: number[] = arguments;
}

// index.ts(2,7): error TS2322: Type 'IArguments' is not assignable to type 'number[]'.
// Property 'push' is missing in type 'IArguments'.</pre>
</div>
事实上常见的类数组都有自己的接口定义，如 <code class="code-81e98f88" data-slate-leaf="true">IArguments</code>, <code class="code-81e98f88" data-slate-leaf="true">NodeList</code>, <code class="code-81e98f88" data-slate-leaf="true">HTMLCollection</code> 等：
<div class="cnblogs_code">
<pre>function sum() {
let args: IArguments = arguments;
}</pre>
</div>
 数组里的元素也可以是接口里定义的
<div class="cnblogs_code">
<pre>app: Info[] = []; //这里数组的每一项需要满足{a: number, b: string}这种类型，这里定义app是一个空数组
app = [{a: 1, b: 'b'}]

interface info{ // info是一个接口
 a: number
b: string
}</pre>
</div>
 
</div>
</div> 
来源：https://www.cnblogs.com/xjy20170907/p/10882147.html

頁: [1]

琼殿技术论坛's Archiver

TypeScript - 数组