typescript函数重载

发表于 | 阅读次数:

在使用ts中我们经常会需定义函数的接口，例如

1
2
3
4
5
6
7
8
9
10
11
12

interface GetParam {
(key:string):string;
}

const getParam:GetParam = function(key) {
    const config = {
        config1:'config1',
        config2:'config2',
    };
    return config[key];
}

但有时候我们需要我们的方法，根据我们传入的参数，来返回不同的类型,例如我们可以这样子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

interface GetParam {
  (key:string|string[]):string|string[];
}

const getParam:GetParam = function(key) {
  const config = {
    config1:'config1',
    config2:'config2',
  };
  if (typeof key === 'string') {
    return config[key];
  } else {
    const result:string[] = [];
    key.forEach((item) => {
      result.push(config[item]);
    });
    return result;
  }
}

这样写会存在一个问题，就是我们在使用这个方法的时候，我们是明确知道传入字符串的时候返回的是字符串，传入数组的时候返回的是数组。
但是这样写接口我们调用的时候ide并不能准确的帮我们识别类型。我们可能需要这样去调用方法才能让ide做类型推断。

1
2

const config1 = getParam('config1') as string;

为了应对这种情况，我们可以使用ts 的函数重载，虽然这不是正真意义上的重载，但是能够帮助ide更好的去做类型推断。

我们只需要把接口改成这样就可以了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
interface GetParam {
  (key:string):string;
  (keys:string[]):string[];
}

const getParam:GetParam = function(key:string|string[]) {
  const config = {
    config1:'config1',
    config2:'config2',
  };
  if (typeof key === 'string') {
    return config[key];
  } else {
    const result:string[] = [];
    key.forEach((item) => {
      result.push(config[item]);
    });
    return result;
  }
}


const config1 = getParam('config1');

这样当我们传入参数为字符串的时候，ide就能自动的帮我们推断出返回的值是字符串。