TypeScript函数参数和返回类型定义

码字不易，有帮助的同学希望能关注一下我的微信公众号：Code程序人生，感谢！代码自用自取。

在这里插入图片描述

这节主要学习一下函数的参数类型定义和返回值的定义，学完这节内容后，你会对函数的参数和返回值类型定义都有通透的了解。

简单类型定义

上节课我们写了一个getTotal的函数，并且对传入的参数作了定义，我们再复习一遍。

新建一个文件demo5.ts,然后写入代码

function getTotal(one: number, two: number) {
  return one + two;
}

const total = getTotal(1, 2);

这时候我们写的代码其实是有一个小坑的，就是我们并没有定义getTotal的返回值类型，虽然TypeScript可以自己推断出返回值是number类型。但是如果这时候我们的代码写错了，比如写程了下面这个样子。

function getTotal(one: number, two: number) {
  return one + two + "";
}

const total = getTotal(1, 2);

这时候total的值就不是number类型了，但是不会报错。有的小伙伴这时候可能会说，可以直接给total一个类型注解，比如写成这个样子。

const total: number = getTotal(1, 2);

这样写虽然可以让编辑器报错，但是这还不是很高明的算法，因为你没有找到错误的根本，这时错误的根本是getTotal()函数的错误，所以合适的做法是给函数的返回值加上类型注解，代码如下：

function getTotal(one: number, two: number): number {
  return one + two;
}

const total = getTotal(1, 2);

这段代码就比较严谨了，所以小伙伴们在写代码时，尽量让自己的代码更加严谨。

有时候函数是没有返回值的，比如现在定义一个sayHello的函数，这个函数只是简单的terminal打印，并没有返回值。

function sayHello() {
  console.log("hello world");
}

这就是没有返回值的函数，我们就可以给他一个类型注解void，代表没有任何返回值。

function sayHello(): void {
  console.log("hello world");
}

如果这样定义后，你再加入任何返回值，程序都会报错。

如果一个函数是永远也执行不完的，就可以定义返回值为never，那什么样的函数是永远也执行不完的那?我们先来写一个这样的函数(比如执行执行的时候，抛出了异常，这时候就无法执行完了)。

function errorFuntion(): never {
  throw new Error();
  console.log("Hello World");
}

还有一种是一直循环，也是我们常说的死循环，这样也运行不完，比如下面的代码：

function forNever(): never {
  while (true) {}
  console.log("Hello JSPang");
}

这个坑有很多小伙伴掉下去过，就是当一个函数的参数是对象时，我们如何定义参数对象的属性类型。我先写个一般javaScript的写法。

function add({ one, two }) {
  return one + two;
}

const total = add({ one: 1, two: 2 });

在浏览器中你会看到直接报错了，意思是total有可能会是任何类型，那我们要如何给这样的参数加类型注解那？最初你可能会这样写。

function add({ one: number, two: number }) {
  return one + two;
}

const total = add({ one: 1, two: 2 });

你在编辑器中会看到这种写法是完全错误的。那正确的写法应该是这样的。

function add({ one, two }: { one: number, two: number }): number {
  return one + two;
}

const three = add({ one: 1, two: 2 });

如果参数是对象，并且里边只有一个属性时，我们更容易写错。错误代码如下：

function getNumber({ one }: number) {
  return one;
}

const one = getNumber({ one: 1 });

看着好像没什么问题，但实际这是有问题的，正确的代码应该时这样的。

function getNumber({ one }: { one: number }): number {
  return one;
}

const one = getNumber({ one: 1 });

这样写才是正确的写法，小伙伴们赶快动手练习一下吧，刚开始学你可能会觉的很麻烦，但是你写的时间长了，你就会发现有规矩还是好的。人向往自由，缺鲜有人能屈驾自由。

有微信小程序课设、毕设需求联系个人QQ：505417246

关注下面微信公众号，可以领取微信小程序、Vue、TypeScript、前端、uni-app、全栈、Nodejs、Python等实战学习资料
最新最全的前端知识总结和项目源码都会第一时间发布到微信公众号，请大家多多关注，谢谢

关注公众号后，回复前端面试题，领取大量前端面试题汇总pdf资料

在这里插入图片描述