TypeScript 第二天,TypeScript中的类型(一)

number

number表示只能是字符串类型的,我们看下面例子

TypeScript 复制代码
let a : number;
a = 1;
a = 2;
a = 'hahaha'; //这里机会报错

原因是在TS中我们定义了变量的类型如果赋值其他类型的内容,就会报错。

string

string表示只能是字符串类型的,还拿上面的例子说明:

TypeScript 复制代码
let a : string;
a = 'a';
a = 'b';
a = 222; //这里机会报错

我们都知道222是字符类型,然而在TS中定义我们a变量的时候a的类型限定了只能是字符串,那么我们在最后一行赋值222就会报错。

boolean

boolean表示类型只能是true或者false,如下所示:

TypeScript 复制代码
let a : boolean;
a = true;
a = false;
a = 222; //这里机会报错

上面代码中我们可以看出来,定义a的类型是boolean,然而最后一行赋值了一个数字类型的,所以直接报错。

字面量

字面量类型,顾名思义就是说,如果我们一个变量要存储的类型有两种,可能是字符串也可能是数字,那么我们怎么办呢,就需要用到字面量了。如下示例:

TypeScript 复制代码
let a : number|string;
a = 111;
a = 222;
a = false; //这里机会报错

上面内容我们可以看到a变量定义的时候用number|string来修饰,其中number|string是我们的字面量,意思就是说支持数字类型或者字符串类型,最后一行因为赋值一个boolean类型从而报错。

any

any表示任意一个类型,不推荐随便使用,因为这样就和JavaScript没区别了,有些同学直接在TS中全部把变量定义为any类型,这里就不得不说你还不如直接别用TS类型约束呢。这里就不写示例代码了,和上面的都差不多,就是类型改为any然后赋任何值都不会报错。这里要注意显示any和隐式any

unknown

unknown表示不清楚这个变量的类型是什么,不会赋值给其他变量。这里我们要注意一下anyunknown的区别。然后我们看下面例子:

TypeScript 复制代码
// let d:any; //这里是显示定义any类型
let d; // 这里是隐式定义any类型

d = 1;
d = 'a';
d = false;

let e:unknown;

e = 1;
e = 'a';
e = false;

let s:string;
// d 的类型是any,他可以赋值给任意变量
// s=d; // 也就是说赋值之后s的类型也是any了

上面的s变量的下场肯定不是我们希望看到的,所以在我们TS中如果不知道变量的类型,建议直接用unknown,因为unknown不会传递定义的变量类型。 那假如我们非得使用any类型的变量,但是又不想将any类型赋值给变量,我们应该怎么办?方法如下:

TypeScript 复制代码
e = 'hello';

// unknown自己可以随便赋值,但是赋值到另外一个变量不可以 unknown实际上是安全的any。
if(typeof e === "string"){
    s = e;
}

可以判断一下类型,如果类型是字符串的话就可以正常赋值了。当然我们也可以使用类型断言,如下所示:

TypeScript 复制代码
// 类型断言,可以告诉解析器变量的实际类型
s = e as string;
s = <string>e;

上面代码中两种是一个效果。

void

void用来表示函数返回值为空或者没有返回值,下面我们来看一个例子:

TypeScript 复制代码
function fn(): void{}

never

never表示这个函数永远都不会有返回值,下面我们看示例:

TypeScript 复制代码
return fn2():never{
    throw new Error('出错了!');
}

好了,今天就先学习到这里,明天我们继续。TypeScriptobject,array,tuple,enum.感谢大家的观看,我们下次见。

相关推荐
AAA阿giao2 小时前
从零拆解一个 React + TypeScript 的 TodoList:模块化、数据流与工程实践
前端·react.js·ui·typescript·前端框架
hedley(●'◡'●)3 小时前
基于cesium和vue的大疆司空模仿程序
前端·javascript·vue.js·python·typescript·无人机
百锦再3 小时前
Vue高阶知识:利用 defineModel 特性开发搜索组件组合
前端·vue.js·学习·flutter·typescript·前端框架
小杨同学呀呀呀呀5 小时前
Ant Design Vue <a-timeline>时间轴组件失效解决方案
前端·javascript·vue.js·typescript·anti-design-vue
VT.馒头15 小时前
【力扣】2721. 并行执行异步函数
前端·javascript·算法·leetcode·typescript
guangzan19 小时前
为博客园注入现代 UI 体验:shadcn 皮肤上线
typescript·tailwindcss·shadcn ui·tona
VT.馒头1 天前
【力扣】2722. 根据 ID 合并两个数组
javascript·算法·leetcode·职场和发展·typescript
阿蒙Amon1 天前
TypeScript学习-第13章:实战与最佳实践
javascript·学习·typescript
止观止1 天前
TypeScript 5.9 终极实战:构建一个类型安全的 UI 组件库 (含多态组件实现)
ui·typescript
We་ct1 天前
LeetCode 1. 两数之和:两种高效解法(双指针 + Map)
前端·算法·leetcode·typescript·哈希算法