简单了解TS的基本作用和数据类型

拉布拉多拉的多
151 阅读4分钟

前言

hello大家好，很久没写文章了，今天突然来了兴致，想简单的记录一下JS的超集 — TS，这样我们既学到了有用的知识，又对我们熟悉公司的项目也是很有作用的。 不知道你的项目中有没有TS加持呢？反正我这边很多项目都用到了TS。索性，今天就来过一遍TS的基本用法以及它的一些特殊的类型吧。

正文

对于学习一个新知识，自然少不了看官方文档了，下面是我会找一些TS的资料，用来简单介绍一下TypeScript这门编程语言吧。

TypeScript 与 JavaScript 有着不同寻常的关系。TypeScript 提供了 JavaScript 的所有功能，以及在这些功能之上的附加层：TypeScript 的类型系统。

例如，JavaScript 提供像 string 和 number 这样的语言基础类型，但它不会检查你是否一致地分配了这些。TypeScript 可以。

这意味着你现有的工作 JavaScript 代码也是 TypeScript 代码。TypeScript 的主要好处是它可以高亮代码中的意外行为，从而降低出现错误的可能性。所以接下来我们看看ts如何进行类型约束吧!

  • TS的基本类型：

  1. 这一类是js中常见的基本数据类型：
    • string
    • number
    • boolean
    • undefined
    • null
    • symbol
    • bigint

它的声明基本是长成这样，其实TS的作用就是这样对某一个变量进行规定的限定，如果设定的值不是与设定的类型不符合，就会提前报错，在不同的人去操作的时候，可以达到类型一致的效果。 image.png

如果类型不一致，会出现如下错误：

image.png

  • object 对象类型 在TS内也叫基本类型，这是js原有的，它在ts中可以代表（对象{}、数组[]、函数function）

image.png

在 TS中还分为小写的 string 和 大写的 String 的规定：小写的叫字面量， 大写的叫包装类，不知道包装类的可以去看我之前写的文章，可能会提到包装类的概念。也就是像下面这样的，它们虽然都是指定的字符串类型。

image.png

大写的Object类型 是广义上的对象（它可以被赋值成 基本类型，也可以是对象object的类型），小写的object只包含狭义的对象，也就是上面说的那几种。

还有一个就是在ts中，任意的值都可以是一个类型。

image.png

下面介绍一些TS的联合类型：就是使用一个符号 |，使用方法就是下面这样的：

这里我们是使用了TS的一个 类型约束的关键字 type 去声明一个类型，而这个|你可以认为它是或的意思，比如下面这个，Color 它可以是红，可以是橙，也可以是黄，有三种选择，只要满足一项就符合条件。

image.png

  1. 这一类是TS的高级类型：
    • unknown
    • any

区别如下： unknown可以赋任何类型的值，而any也可以赋任何类型的值，unknown类型不可以赋值给其他类型。

image.png

  • 数组：数组中的元素可以是相同类型的多个值，或者如果使用联合类型，也可以是多种类型的组合，但是没有固定的位置或数量要求。例如，number[] 表示一个所有元素都必须是数字的数组，而 (string | number)[] 则表示一个可以包含字符串或数字的数组。

image.png

  • 元组：元组是具有已知数量和顺序的类型集合。每个位置上的元素都有特定的类型，并且这些类型可以不同。例如，你可以定义一个元组类型为 [string, number]，这意味着第一个元素必须是字符串，第二个元素必须是数字。
let tuple: [string, number];
tuple = ["hello", 42]; // 正确
tuple = [42, "hello"]; // 错误

image.png

下面就是元组和数组的定义区别了

image.png

再看下面这个例子，一个数组内可能存在很多的类型，但是你不知道会不会放入这样的类型，也就是说，这个类型在数组内可能存在，也可能不存在，我们可以在类型后面加上 ? 符号，代表这个类型可能存在，可能不存在。

如果加了，那么就不能出现下面的情况，因为必选元素不能位于可选元素后。

image.png

  • 下面就是看一看函数上如何使用TS了：

由于函数的参数类型识别发生在函数声明的时候，而不是调用的时候，所以当你在声明函数参数时，需要给你的参数选择类型。

函数也有类型，它的类型是函数返回值的类型，如果一个函数没有返回值，那么它的类型就是 void 类型。

下面就是一个简单的函数的类型声明方式了。 image.png

好了，今天的内容就到这里吧，下一篇我会记录一下泛型的使用，以及常见的使用泛型去定义接口和函数的方式，敬请期待吧！

avatar
文章
阅读
粉丝