typescript定义函数类型
<h2>函数类型</h2><h3>为函数定义类型</h3>
<p>给函数定义类型，包括对参数和返回值的类型定义：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> add(arg1: number, arg2: number): number {
</span><span style="color: rgba(0, 0, 255, 1)">return</span> arg1 +<span style="color: rgba(0, 0, 0, 1)"> arg2
}
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 箭头函数</span>
const add = (arg1: number, arg2:number):number =><span style="color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(0, 0, 255, 1)">return</span> arg1 +<span style="color: rgba(0, 0, 0, 1)"> arg2
}</span></pre>
</div>
<p>如果这里省略参数的类型，typescript 会默认这个参数是 any 类型；如果省略返回值的类型，那么当函数无返回值时，typescript 默认函数返回值是 void 类型，当函数有返回值时，typescript 会根据我们定义的逻辑推断出返回值的类型。</p>
<p> </p>
<h3>完整的函数类型</h3>
<p>可以定义一个完整的函数类型，它包括参数类型和返回值类型，如下：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 定义变量 add，指定类型为 (x: number, y: number)=> number</span>
let add:(x: number, y: number)=><span style="color: rgba(0, 0, 0, 1)"> number
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 给变量赋值函数，其符合上面定义的函数类型</span>
add = (arg1: number, arg2: number) => arg1 + arg2</pre>
</div>
<p>可以看到函数类型中的参数名和实际函数的参数名不一致，这里需要注意，只要参数类型是匹配的，那么就认为它是有效的函数类型，而不在乎参数名是否正确。</p>
<p> </p>
<h3>使用接口定义函数类型</h3>
<p>使用接口可以清晰地定义函数类型：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">interface Add{
(x: number, y: number): number
}
let add:Add </span>= (arg1: number, arg2: number): number => arg1 + arg2</pre>
</div>
<p> </p>
<h3>使用类型别名定义函数</h3>
<p>类型别名是使用 type 关键字定义一个类型，可以用来定义函数类型：</p>
<div class="cnblogs_code">
<pre>type Add = (x: number, y: number) =><span style="color: rgba(0, 0, 0, 1)"> number
let add:Add </span>= (arg1: number, arg2: number): number => arg1 + arg2</pre>
</div>
<p> </p>
<h2>函数参数</h2>
<h3>可选参数</h3>
<p>定义函数类型时，使用 ? 来指定可选参数，但需要注意的是，可选参数必须放在必须参数后面，这跟在接口中定义可选参数不一样，在定义接口时，可选参数的位置在前在后都无所谓。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> error，x 是可选参数，放在必选参数 y 之前是错误的</span>
type Add = (x?: number, y: number) => number</pre>
</div>
<p> </p>
<h3>默认参数</h3>
<p>默认参数与在 es6 中的实现一样，直接用 = 给出默认值。需要注意两个地方：一是默认参数的位置不讲究，它放在必选参数前后都行；二是当给默认参数指定默认值时，typescript 会识别默认参数的类型，当我们在调用函数时，如果给这个带默认值的参数传来别的类型的参数时则会报错：</p>
<div class="cnblogs_code">
<pre>let add = (x: number, y = 2) =><span style="color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(0, 0, 255, 1)">return</span> x +<span style="color: rgba(0, 0, 0, 1)"> y
}
add(</span>1, '2') <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> error，类型“"2"”的参数不能赋给类型“number”的参数</span></pre>
</div>
<p> </p>
<p>可以显示地给默认参数指定类型：</p>
<div class="cnblogs_code">
<pre>let add = (x: number, y: number = 2) =><span style="color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(0, 0, 255, 1)">return</span> x +<span style="color: rgba(0, 0, 0, 1)"> y
}</span></pre>
</div>
<p> </p>
<h3>剩余参数</h3>
<p>对于不知道会传入多少参数的函数来说，在 javascript 中会使用 arguments 来获取参数列表。在 typescript 中，使用跟 es6 中一样的 ... 来将剩余参数收集到一个变量中。</p>
<div class="cnblogs_code">
<pre>const handleData = (arg1, ...arg2) =><span style="color: rgba(0, 0, 0, 1)"> {
console.log(arg2)
}
handleData(</span>1,2,3,4,5,6) <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> </span></pre>
</div>
<p> </p>
<p>给参数指定类型：</p>
<div class="cnblogs_code">
<pre>const handleData = (arg1: number, ...arg2: number[]) =><span style="color: rgba(0, 0, 0, 1)"> {
console.log(arg2)
}</span></pre>
</div>
<p> </p>
<h2>函数重载</h2>
<p>在一些强类型语言中，函数重载是指定义几个函数名相同，但参数个数或类型不同的函数，在调用时传入不同的参数，编译器会自动调用适合的函数。而在 javascript 中，是没有函数重载的，我们可以在函数内部判断参数的个数和类型来指定不同的处理逻辑。</p>
<div class="cnblogs_code">
<pre>const handleData = (value: any)=><span style="color: rgba(0, 0, 0, 1)">{
</span><span style="color: rgba(0, 0, 255, 1)">if</span>(<span style="color: rgba(0, 0, 255, 1)">typeof</span> value === 'string'<span style="color: rgba(0, 0, 0, 1)">){
</span><span style="color: rgba(0, 0, 255, 1)">return</span> value.split(''<span style="color: rgba(0, 0, 0, 1)">)
}</span><span style="color: rgba(0, 0, 255, 1)">else</span><span style="color: rgba(0, 0, 0, 1)">{
</span><span style="color: rgba(0, 0, 255, 1)">return</span> value.toString().split('').join('_'<span style="color: rgba(0, 0, 0, 1)">)
}
}
console.log(handleData(</span>'hello')) <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> ["h", "e", "l", "l", "o"]</span>
<span style="color: rgba(0, 0, 0, 1)">
console.log(handleData(</span>123)) <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 1_2_3</span></pre>
</div>
<p> </p>
<p>我们需要将上面这种情况在类型系统中表示出来。在 typescript 中有函数重载的概念，但不是定义几个同名实体函数，而是通过为一个函数指定多个函数类型定义，从而对函数调用的返回值进行检查。代码如下：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> handleData(value: string): string[]
</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> handleData(value: number): string
</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> handleData(value: any):any {
</span><span style="color: rgba(0, 0, 255, 1)">if</span>(<span style="color: rgba(0, 0, 255, 1)">typeof</span> value === 'string'<span style="color: rgba(0, 0, 0, 1)">){
</span><span style="color: rgba(0, 0, 255, 1)">return</span> value.split(''<span style="color: rgba(0, 0, 0, 1)">)
}</span><span style="color: rgba(0, 0, 255, 1)">else</span><span style="color: rgba(0, 0, 0, 1)">{
</span><span style="color: rgba(0, 0, 255, 1)">return</span> value.toString().split('').join('_'<span style="color: rgba(0, 0, 0, 1)">)
}
}
console.log(handleData(</span>'hello')) <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> ["h", "e", "l", "l", "o"]</span>
<span style="color: rgba(0, 0, 0, 1)">
console.log(handleData(</span>123)) <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 1_2_3</span>
<span style="color: rgba(0, 0, 0, 1)">
console.log(handleData(</span><span style="color: rgba(0, 0, 255, 1)">false</span>)) <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> error，类型“false”的参数不能赋给类型“string”的参数，类型“false”的参数不能赋给类型“number”的参数</span></pre>
</div>
<p>首先使用 function 关键字定义了两个同名函数，这两个函数没有实际的函数体逻辑，只定义了函数名，参数及参数类型以及函数的返回值类型，这两个定义称为 “函数重载”。第三个使用 function 定义的同名函数，是一个完整的实体函数，它不算重载。这三个定义组成一个函数。当函数调用时，会从上到下匹配重载，当匹配不到时会报错。</p>
<p> </p><br><br>
来源：https://www.cnblogs.com/wjaaron/p/12851994.html
頁:
[1]