从TS的类型开始了解TypeScript|以及你认为是否需要为函数设置返回值类型?

前言

在时隔好久之后,终于开始学习Typescript了,很多朋友都推荐使用 TS,所以就想学一下,但看了一些分享,有位友友说使用TS最重要的就是除了添加类型之外,不要做任何额外的事情,不要让自己误以为这不是JavaScrpit!好~ 好 ~好 ~

TS和JS都有的类型

JS类型(七上八下)

  • 七种基本类型:number,string,null,undefind,boolean,symbol,bigint
  • 复杂数据类型:object

TS作为js的超集这些类型在ts中也都存在。

TS特有的类型

any:当值的类型为any时,可以访问该对象的任何属性,即使有些属性不存在,其在编译时也不会报错。 这就是为什么有些友友说既然🐶老板一直催那就别怪我全any了! BUT这只是开玩笑,在实际开发中我们要避免使用any

ini 复制代码
let obj: any = { x: 0 };

obj.foo();

obj();

obj.bar = 100;

obj = "hello";

const n: number = obj;

可以看到当我们将变量obj设置为any类型时,在调用或赋值其时尽管有些属性和方法不存在ts也不会给我们错误提示。

还有一种和any类似的 unknow:被誉为安全版的any,unknow表示还未确定,两者都是可以控制任何类型,但是在对unknow操作之前必须先类型缩小才能安全使用。

ini 复制代码
let x: unknown ;
let y: any;
x=10;
y=10;
x.toString();
y.toString();
ini 复制代码
if(typeof x==="number"){
x.toString();
}
在做类型缩小之后就不会报错了。
也可以类型断言
(x as number).toString();

使用类型

在TS中无论何时声明变量和函数都可以在变量名和函数名后面使用:{type}格式注释其类型。

js 复制代码
let username: string = 'Chris';
const myName = (name: string) => {
  console.log(`Hello ${name}`);
};

但也不必明确指定username的类型,TS其足够智能,它可以自动判断username的类型。

可以看到当username的类型没有明确规定时,TS也知道发生了什么,可以给出调用中的错误。

我们还可以设置函数返回的数据类型通过在函数后面:{type}来定义函数返回值。

ts 复制代码
const numberToString = (number: number): string => {
  return number.toString();
};
const output = numberToString(123);

我们有一个函数接收一个类型为number的参数,返回一个string类型的值。 值得注意的是 :我们知道在js中就算没有设置函数返回值,其也会隐式返回undefined

javascript 复制代码
function name(person){
}
console.log( typeof(name("Bob")));

而在TS中有个特殊的类型 void: 用于函数无返回值,且调用该函数不会用到其返回值。我们知道在TS代码在编译的时候类型会被全部删掉,那么也就是说设置函数的返回值void,在编译为js代码时类型仍然是undefined。那么这二者有什么区别吗?

void在TS中的作用通常起标记的作用,告诉你或其他同事该函数不会有返回值,不用调用它。其一般用于函数签名、回调函数类型安全 场景中。

再来看一个例子:

ts 复制代码
const getFullName = (user: {firstname: string, lastname: string}): string => {
  return `${user.firstname} ${user.lastname}`;
};

getFullName({firstname: 'Chris', lastname: 'Bongers'});

在这里我们给函数传了一个user对象其有两个参数-姓和名,但有些时候我们只知道名不知道姓那要如何调用这个函数呢?

使类型可选

typescript 复制代码
const getFullName = (user: {firstname: string, lastname?: string}): string => {
  return `${user.firstname} ${user.lastname}`;
};

我们可以在:前面加上问号,使类型成为可选的。 需要注意的是,默认情况下,变量是必需的。我们必须明确指出哪些变量是可选的。

如果我的变量有多种类型怎么办?

联合类型 :我们可以使用管道|选项来定义这些联合类型。

typescript 复制代码
const getUserId = (id: number | string) => {
  return `Your ID is ${id}`;
};

getUserId(123);
getUserId('Chris123');

就比如我们的id有些时候可能是数字也可以是字符串,这时候就可以使用联合类型来定义一个包含多个元素类型的变量。

值得注意的是因为联合类型由两个或多个类型组合而成,其值可以是该联合类型的任意一个,但对该属性使用方法时不能使用其仅在一种类型才有用的方法,如toUpperCase()是string上的number并没有,所以这两种类型的联合类型不能使用。

类型别名

我们通过直接在类型注解中编写对象类型和联合类型来使用它们。 这很方便,但是常常会想要多次使用同一个类型,并且通过一个名称引用它。

typescript 复制代码
type Person {
  name: string;
  age: number;
}

类型别名其灵活度非常高,可以别名任何类型:对象,数组,函数都可以别名

与之类似的定义对象结构的方法--接口(interface)看起来很像,但其实各有特点,适用场景也略有不同。

接口

typescript 复制代码
interface Person {
  name: string;
  age: number;
}

在定义的时候几乎一样,但是接口可以继承,对于同名的接口TS会自动合并,但接口只能用于对象结构。

对比项 interface type
是否能扩展/继承 extends ✅ 用交叉类型(&
是否能声明合并
能否定义联合类型
能否表示函数、元组等非对象结构
更推荐用在哪 定义"对象结构"、接口扩展 联合类型、函数、类型组合等

最后补充一下

是否为函数和方法添加返回类型注解取决于代码作者。审阅者可能会要求使用注解来阐明难以理解的复杂返回类型。项目可能有本地策略要求始终提供返回类型,但这并不是 TypeScript 风格的通用要求。

明确输入函数和方法的隐式返回值有两个好处:

  • 更精确的文档有利于代码的读者。
  • 如果代码发生变化,改变了函数的返回类型,那么将来潜在的类型错误就会更快地显现出来。
相关推荐
摸鱼仙人~1 天前
如何创建基于 TypeScript 的 React 项目
javascript·react.js·typescript
一生躺平的仔2 天前
TypeScript入门(九)装饰器:TypeScript的"元编程超能力"
typescript
MiyueFE2 天前
让我害怕的 TypeScript 类型 — — 直到我学会了这 3 条规则
前端·typescript
前端拿破轮2 天前
😭😭😭看到这个快乐数10s,我就知道快乐不属于我了🤪
算法·leetcode·typescript
前端_ID林2 天前
每个开发人员都应该知道的 TypeScript 技巧
typescript
奋飛2 天前
TypeScript系列:第六篇 - 编写高质量的TS类型
javascript·typescript·ts·declare·.d.ts
BillKu12 天前
Vue3 + TypeScript + xlsx 导入excel文件追踪数据流转详细记录(从原文件到目标数据)
前端·javascript·typescript
小Lu的开源日常12 天前
Drizzle vs Prisma:现代 TypeScript ORM 的深度对比
数据库·typescript·前端框架
Shixaik13 天前
配置@为src
typescript·前端框架
BillKu13 天前
Vue3 + TypeScript合并两个列表到目标列表,并且进行排序,数组合并、集合合并、列表合并、list合并
vue.js·typescript·list