TypeScript 学习记录--函数中使用

最新推荐文章于 2024-08-20 15:14:39 发布

原创最新推荐文章于 2024-08-20 15:14:39 发布 · 173 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Typescript #Function #重载

TypeScript 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了TypeScript中函数类型的定义方法，包括参数类型、返回值类型、可选参数、默认参数、剩余参数及重载等内容，并通过实例展示了如何在实际开发中应用这些特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

TypeScript 学习记录–函数中使用

1. 给函数定义类型

函数类型包含两部分参数类型与返回值类型，如果函数没有返回值那么也要指定返回值为 void

function test(name: string, age: number): boolean {
  return name.length > 0 && age < 30;
}


interface ITest {
  test: (name: string, age: number) => boolean,
  name: string
}

const a: ITest = {
  name: 'oo',
  test(name, age) { // 不会报错，TypeScript 会自动识别出类型，这种行为称为类型推论
    return !name;
  }
}

const b: ITest = {
  name: 'oo',
  test(name: boolean) { // 错误 name 属性不兼容
    return !name;
  }
}


const c: ITest = {
  name: 'oo',
  test(name: string) { // 虽然少写了一个参数但是没有报错
    return !name;
  }
}

c.test('name'); // 报错， 缺少第二个参数 age

2. 函数的可选参数和默认参数

可选参数必须在必选参数后边

interface ITest {
  test: (name: string, age?: number) => boolean, // age 变为了可选参数
  name: string
}

const a: ITest = {
  name: 'oo',
  test(name, age) {
    if (!age) {
      return false;
    }

    return name.length > 0 && age < 30;
  }
}

a.test('xxx') // 正确

带默认值的参数可以放在必选参数前

function test1(age = 50, name: string): boolean { // age 默认值 50 其类型因此为 number | undefined
  return age === 50 && name.length > 3;
}

test1(undefined, 'xxxx'); // 正确
test1(false, 'xxxx'); // 报错 age 的类型需要是 number | undefined

3. 剩余参数

实参数量不确定时，我们可以用剩余参数的方式将一部分参数收集为一个变量

function test1(age = 50, name: string, ...extraProps: any[]): boolean { // 展开操作符用于收集剩余参数
  console.log(extraProps);
  return age === 50 && name.length > 3 && extraProps.length > 2;
}

test1(undefined, 'xxxx', null, 'sss', false);

4. 重载

针对根据传入参数不同返回不同的类型数据的需求，可以使用重载的方式定义多中类型

function test(name: string): boolean;
function test(name: {value: string, key: number}): string;
function test(name: any): any {
  if (typeof name === 'string') {
    return name.length > 2;
  } else {
    return name.value;
  }
}

console.log(test('world'));
console.log(test({value: 'allValue', key: 90}));