Bootstrap

第四章 React之Typescript

一、专栏介绍 🏈🏈

欢迎加入本专栏!本专栏将引领您快速上手React,让我们一起放弃放弃的念头,开始学习之旅吧!我们将从搭建React项目开始,逐步深入讲解最核心的hooks,以及React路由、请求、组件封装以及UI(Ant Design)框架的使用。让我们一起掌握React,开启前端开发的全新篇章。

二、Typescript是什么 🏀🏀

Typescript是微软开发的一个开源的编程语言,通过在JavaScript的基础上添加静态类型定义构建而成。它是JavaScript的一个超集,本质向这个语言添加了可选的静态类型和基于类的面向对象编程。

Typescript扩展了JavaScript的句法,所以任何现有的JavaScript程序可以不加改变的在Typescript下工作。 Typescript是为大型应用之开发而设计,编译时产生JavaScript以确保兼容性。

三、为什么要使用Typescript ⚽️⚽️

它可以检测出错误,避免在运行时出现不兼容的类型错误。这使得开发人员更容易理解和维护代码,降低了出错的风险。

它还支持接口定义,这使得开发人员可以更好地理解代码的结构,增强了代码的可读性和可维护性。

即使不显示的定义类型,Typescript也能够自动做出类型推论,这为开发人员节省了大量的时间和精力。

它可以与现有的JavaScript库一起使用,即使不是Typescript写的也可以编写单独的类型文件,这使得它能够被广泛地应用在各种项目中。

使用Typescript可以提高开发效率,因为它的类型系统可以减少在运行时出错的可能性,开发人员可以专注于编写业务逻辑,而不是花费大量时间在调试和测试上。

使用Typescript可以帮助团队重塑“类型思维”,使前端开发者从代码的编写者蜕变为代码的设计者。这对于团队协作和代码质量有很大的帮助。

所以不管你现在有没有接触到它,但是作为一个前端开发者,它必将是你的一门必修课。

四、什么是类型 ⚾️⚾️

Typescript,type就是我们所说的类型,那类型是什么。下面举两个列子。

案例一【变量】 👇👇

在下面的代码中,我定义了name和age两个遍历,并且初始值为""字符串和0。可以看到我标红的地方。编辑器自动识别到了这两个变量的类型。此时name后面的:string就是我们所有的类型。

f785759b391a464287ca63b7c8261f96.png

那它有什么用呢,上面的代码是正确的写法,所有不会出现什么异常,下面我在onClick事件中故意给它赋一些不支持的值看看会出现什么。

efa018ab93a742ce8385cbed10ae35af.png

我在点击事件中给age赋值了一个字符串。此时编辑器就会报TS2322: Type 'string' is not assignable to type 'number'。“string”不可分配给类型“number”。意思是age必须是一个number类型的值。不能使用string给它赋值。到这里我猜你大概知道类型是什么了吧。

案例二【函数】 👇👇

在函数中,参数也需要我们指定参数的类型,这样我们在开发的过程中,传入错误的值时编辑器能够及时的提醒我们。避免造成一些难以排除的问题出现。

9b60501bd41b41d38db867033715e3ff.png

五、基础类型、任意类型 🎾🎾

5.1、字符串(string)类型 👇👇

字符串是由单引号或双引号括起来的字符集。这是一种数据类型,用于处理文本数据。

0cd76324220347b2b0615111674ff1d9.png

5.1、数字(number)类型 👇👇

数字(number)类型是一种基本数据类型,用于表示数字,包括整数和浮点数。这意味着你可以使用数字类型来存储和操作任何数值,无论是整数还是小数。

40684d2b2f9c4353a2691c5ed340e368.png

5.1、布尔(boolean)类型 👇👇

布尔类型(boolean)是一种基本数据类型,用于表示真或假的值。布尔类型的值只能是 true 或 false。这种类型常用于条件判断和逻辑操作。

762b22ac815b434895af2ffc11ca5f98.png

5.1、空值(void)类型 👇👇

void类型表示一个空值,即该值被明确地设定为“无”。void类型主要用于表示一个函数没有返回值,或者一个变量没有赋值。使用void来声明一个变量,通常是为了表明该变量不会被赋值或使用。更多的地方是用在函数没有返回值。

3e063dfd28d44d26b4608664ceaea563.png

5.1、Null和undefined类型 👇👇

当一个变量被赋值为null时,它就被认为是一个Null类型的实例。null表示一个空值或不存在的值。在JavaScript和TypeScript中,null常常用于表示一个对象变量没有指向任何对象。

当一个变量被声明了,但没有被赋值时,它的值就是undefined。Undefined类型只有一个值,就是undefined。在JavaScript和TypeScript中,undefined常常用于表示一个变量没有赋值。

5.1、any任意类型 👇👇

任意类型(any)是一种特殊类型,表示可以接受任何类型的值。使用any关键字声明的变量或参数可以接受任何类型的赋值或传入值,而不会导致编译错误。

使用any类型可以避免在代码中因类型不匹配而导致的错误,但同时也可能会掩盖潜在的类型错误和代码可读性问题。因此,在实践中应谨慎使用任意类型,并尽量使用其他更具体的类型来描述变量和函数的参数。

144de20c639e433f85186054da3c11c7.png

六、数组、元组 🌐🌐

数组(Array)和元组(Tuple)都是用于处理一组值的类型。

数组是一种特殊的值类型,用于存储多个值作为一个有序的集合。数组中的每个元素可以是不同的类型,也可以是同一类型。可以使用方括号([])来创建数组,并使用索引访问数组中的元素。

元组是一种固定大小的集合,其中每个元素都可以是不同的类型。元组中的元素在声明时必须按照一定的顺序指定其类型。可以使用花括号({})来创建元组。

在实际项目开发中我们基本上不太会使用元组,因为数组就完全可以替代它,且更加灵活。

efb76ebde8744782bb5f6a3ec2f76dde.png

七、搭配操作符?🌞🌞

上面的案例中呢,函数或者对象数组中只要定义了变量,都是必须传入值。如果有的需求某一个或几个可以为空,那这个是操作符?就得上场了。

类型定义上

eaf88038668c47ed9785213abbbc5ad9.png

函数中

76a365755309438d85a6429aea997172.png

八、接口(Interface) 🌝🌝

接口是一种抽象类型,它定义了一组属性的集合,这些属性表示了对象的行为。接口定义了对象应该具有哪些属性,以及这些属性的类型。接口可以被用作类型声明,用于指定函数、变量或参数的类型。

da251a80c57647cb80774d8162cdcc76.png

九、断言、联合、交叉 🌚🌚

45c6022bf5c64c06a24049fca0b050b4.png

十、class类 🎁🎁

在TypeScript中,类(Class)是一种用于创建对象的模板。它允许您定义一个具有属性和方法的实例。类是面向对象编程(OOP)的基本概念之一,它提供了一种组织代码和封装数据的方式。

这里就随便说说,因为比较抽象,要说清楚的话内容比较多,自行去官网进行深入的了解吧。

下面这个示例中,我们定义了一个名为UserInfo的类,它有两个私有属性(private)name和age,一个构造函数(constructor)和一个公共方法(public)sayHello。通过使用这个类,我们可以创建一个具有名字和年龄的对象,并调用它的getUserInfo方法来打印出信息。

9cfc85f2e4af4572813808ab1752ff51.png

十一、枚举 🔔🔔

枚举(Enum)是一种特殊的类型,它允许您为一组相关的值赋予友好的名称。枚举在TypeScript中被视为数据类型,它允许您使用具有明确含义的常量值,可以提高代码的可读性和可维护性。

75efc05f4c6f42799551dad092c01cfc.png

十二、泛型 🎃🎃

泛型是一种允许开发者编写灵活且类型安全的代码的特性。泛型允许您创建可重用的组件,同时保持类型安全。

402efbab1de548f981adf737f8833616.png

十三、总结 ✅✅

这些只是TypeScript的一小部分知识。但是入门的话基本没啥问题了,后续在实际案例中我会逐一体现它在开发过程中的使用。

随着前端技术的不断发展,越来越多的企业开始采用TypeScript来开发Web应用。如果你想在这个领域有所发展,学习TypeScript是必须的。

TypeScript具有类型检查和代码提示功能,可以提高开发效率,减少错误。这样可以节省时间和精力,使你能够更快地完成任务。

学习TypeScript可以帮助你扩展知识面,了解更多的编程思想和技术。这对于个人职业发展和团队协作都非常有益。

所以,现如今它已经是前端开发工程师的一门必修课。

我是Etc.End。如果文章对你有所帮助,能否帮我点个免费的赞和收藏😍。

9d8c73c39a7643afaa54e2e4fd70f8db.jpeg

👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇

;