[VUE]5-TypeScript

?🍃作者介绍：双非本科大三网络工程专业在读，阿里云专家博主，专注于Java领域学习，擅长web应用开发、数据结构和算法，初步涉猎Python人工智能开发和前端开发。
🦅主页：@逐梦苍穹
📕所属专栏：前端（专栏的其他文章，详见文末?）
🍔您的一键三连，是我创作的最大动力🌹

1 TypeScript 介绍

• TypeScript（简称：TS） 是微软推出的开源语言
• TypeScript 是 JavaScript 的超集（JS 有的 TS 都有）

• TypeScript = Type + JavaScript（在 JS 基础上增加了类型支持）
• TypeScript 文件扩展名为 ts
• TypeScript 可编译成标准的 JavaScript，并且在编译时进行类型检查

主要特性：
1. 静态类型检查：TypeScript 在编译阶段进行类型检查，可以在代码运行前发现并纠正错误。
2. 类和接口：TypeScript 提供了基于类的面向对象编程语法，使得代码的组织和重用更加方便。
3. 模块系统：TypeScript 支持 ES6 的模块系统，可以更好地组织和管理代码。
4. 泛型：TypeScript 支持泛型，提供了更强大的代码重用和类型检查能力。
5. 装饰器：TypeScript 支持装饰器，可以用来修改类、方法、属性等的行为。

2、安装

在前端项目中使用TS，需要进行安装，命令为：npm install -g typescript

查看TS版本：

3、快速上手

①创建 hello.ts 文件，内容如下：

//定义一个函数 hello，并且指定参数类型为string
function hello(msg:string) {
      console.log(msg)
}
//调用上面的函数，传递非string类型的参数
hello(123)

②使用 tsc 命令编译 hello.ts 文件

可以看到编译报错，提示参数类型不匹配。这说明在编译时TS会进行类型检查。
需要注意的是在编译为JS文件后，类型会被擦除。

思考：TS 为什么要增加类型支持 ？

• TS 属于静态类型编程语言，JS 属于动态类型编程语言
• 静态类型在编译期做类型检查，动态类型在执行期做类型检查
• 对于 JS 来说，需要等到代码执行的时候才能发现错误（晚）
• 对于 TS 来说，在代码编译的时候就可以发现错误（早）
• 配合 VSCode 开发工具，TS 可以提前到在编写代码的同时就发现代码中的错误，减少找 Bug、改 Bug 的时间

在前端项目中使用TS，需要创建基于TS的前端工程：

工程目录如下：

4、TypeScript 常用类型

TS中的常用类型如下：

类型	例	备注
字符串类型	string
数字类型	number
布尔类型	boolean
数组类型	number[],string[], boolean[] 依此类推
任意类型	any	相当于又回到了没有类型的时代
复杂类型	type 与 interface
函数类型	() => void	对函数的参数和返回值进行说明
字面量类型	“a”|“b”|“c”	限制变量或参数的取值
class 类	class Animal

4.1 类型标注的位置

基于TS进行前端开发时，类型标注的位置有如下3个：

• 标注变量
• 标注参数
• 标注返回值

4.2 字符串、数字、布尔类型

字符串、数字、布尔类型是前端开发中常用的类型

4.3 字面量类型

字面量类型用于限定数据的取值范围，类似于java中的枚举

4.4 ?interface 类型

interface 类型是TS中的复杂类型，它让 TypeScript 具备了 JavaScript 所缺少的、描述较为复杂数据结构的能力。

可以通过在属性名后面加上？，表示当前属性为可选，如下：

4.5 class 类型

使用 class 关键字来定义类，类中可以包含属性、构造方法、普通方法等

在定义类时，可以使用 implments 关键字实现接口，如下：

在定义类时，可以使用 extends 关键字 继承其他类，如下：

????????????????????前端的其他文章：
📕 1-创建vue工程
📕 2-vue的基本使用
📕 3-路由vue-router
📕 4-状态管理vuex
🌻感谢您的支持🌹