ts之函数

最新推荐文章于 2024-06-20 23:44:15 发布

原创最新推荐文章于 2024-06-20 23:44:15 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ts函数

ts 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了TypeScript中的函数类型，包括如何规定参数与返回值类型，以及如何利用推断类型进行操作。同时，详细讨论了可选参数、默认参数和剩余参数的使用场景，并对比了传统函数与箭头函数中`this`关键字的不同之处。

1.函数类型

规定参数与返回值类型，如果没有返回值，那么返回值类型是null

    /**
     * @params value: Number|String 
     * 输入string或number，输出它的长度    
     */
    public numberStringGetLength(value: Number | String): Number {
        if ((<string > value).length) { // 此处如不加类型断言会报错
            return (<string > value).length;
        } else {
            return value.toString().length;
        }
    }

eg: 一个获取长度的函数

2.推断类型

function add(x: number, y: number) {
    return x + y
}
// ts会自动识别出返回类型为number

最常见的处理需求为，string与number，例如+ - * /，或者其他基本量类型间的运算，详见。。。

3.可选参数，默认参数，剩余参数

可选参数

function addParams(params1: string, params2?: string) {
    if (params2)
        return params1 + " " + params2;
    else
        return params1;
}

let result1 = addParams(p1");  // p1
let result2 = addParams("p1", "p2");  // p1p2

默认参数

function addParams(params1: string, params2: string = 'pre') {
    return params1 + " " + params2;
}

let result1 = addParams(p1");  // p1 pre
let result2 = addParams("p1", "p2");  // p1 p2

默认参数可传值也可不传，一般默认参数在必须参数之后，但也可以定义在默认参数之前，但此时必须明确传入undefined以获取默认值

剩余参数

用于参数个数不确定时

function addParams(params1: string, ...params2: string[]) {
    return params1 + " " + params2.join('');
}

let result1 = addParams('p1', 'p2', 'p3');  // p1 p2 p3

4.this与箭头函数

传统函数的this作用域是在函数调用时确定，但箭头函数的this作用域在创建时就已经确定

传统

let myobj = {
    person:["Bob","Fred","Smith"],
    myFn:function(){
        return this.person
    }
}

let test = myobj.myFn;
console.log(test()) //undefined

箭头

let myobj = {
    person: ["Bob", "Fred", "Smith"],
    myFn: function () {
        return () => {
           return this.person
        }
    }
}

let test = myobj.myFn();
console.log(test()) //[ 'Bob', 'Fred', 'Smith' ]