05. TypeScript 函数参数和返回类型定义
本文主要学习一下函数的参数类型定义和返回值的定义,学完这节内容后,你会对函数的参数和返回值类型定义都有通透的了解。
简单类型定义
上节我们写了一个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 返回值类型
如果一个函数是永远也执行不完的,就可以定义返回值为never
,那什么样的函数是永远也执行不完的呢?我们先来写一个这样的函数(比如执行执行的时候,抛出了异常,这时候就无法执行完了)。
function errorFuntion(): never { throw new Error(); console.log("Hello World"); }
还有一种是一直循环,也是我们常说的死循环,这样也运行不完,比如下面的代码:
function forNever(): never { while (true) {} console.log("Hello mybj"); }
函数参数为对象(解构)时
这个坑有很多小伙伴掉下去过,就是当一个函数的参数是对象时,我们如何定义参数对象的属性类型。我先写个一般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 });
这样写才是正确的写法,小伙伴们赶快动手练习一下吧,刚开始学你可能会觉的很麻烦,但是你写的时间长了,你就会发现有规矩还是好的。
码云笔记 » 05. TypeScript 函数参数和返回类型定义