TypeScript函数参数和返回类型的注解方式
简单的类型定义
还是上次代码
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 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 });这样写才是正确的写法，小伙伴们赶快动手练习一下吧，刚开始学你可能会觉的很麻烦，但是你写的时间长了，你就会发现有规矩还是好的。人向往自由，缺鲜有人能屈驾自由。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了CesiumJS源码杂谈之从光到Uniform的使用示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
这篇文章主要为大家介绍了鲜为人知的JavaScript中5个JSON秘密功能详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
这篇文章主要介绍了Underscore.js常用方法总结,本文讲解了Underscore.js概述、在node.js下安装、与集合有关的方法、与对象有关的方法、与函数相关的方法等内容,需要的朋友可以参考下2015-02-02
这篇文章主要为大家介绍了自动生成typescript类型声明工具实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
本文给大家介绍基于Javascript实现页面商品个数增减功能，通过点击数量增减个数，代码分为前端页面，后台返回代码，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2019-07-07
这篇文章主要为大家介绍了TypeScript 基本数据类型实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
TypeScript使用命令行编译器tsc或其他工具手动执行编译,在html使用s时编译为JavaScript,那么有没有办法简化过程,不编译直接使用,本文介绍html中使用TypeScript的两种方法2024-07-07
这篇文章主要介绍了数据结构TypeScript之栈和队列详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要为大家介绍了Typescript 严格模式有多严格实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要为大家介绍了typescript类型体操及关键字使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-11-11
最新评论