湖州交通网站集约化建设项目,有部分网站打不开,网站开发工具有,多用户商城系统价格目录 1 TypeScript 介绍2、安装3、快速上手4、TypeScript 常用类型4.1 类型标注的位置4.2 字符串、数字、布尔类型4.3 字面量类型4.4 ⭐interface 类型4.5 class 类型 #x1f343;作者介绍#xff1a;双非本科大三网络工程专业在读#xff0c;阿里云专家博主#xff0c;… 目录 1 TypeScript 介绍2、安装3、快速上手4、TypeScript 常用类型4.1 类型标注的位置4.2 字符串、数字、布尔类型4.3 字面量类型4.4 ⭐interface 类型4.5 class 类型 作者介绍双非本科大三网络工程专业在读阿里云专家博主专注于Java领域学习擅长web应用开发、数据结构和算法初步涉猎Python人工智能开发和前端开发。 主页逐梦苍穹 所属专栏前端专栏的其他文章详见文末❀ 您的一键三连是我创作的最大动力 1 TypeScript 介绍
TypeScript简称TS 是微软推出的开源语言TypeScript 是 JavaScript 的超集JS 有的 TS 都有 TypeScript Type JavaScript在 JS 基础上增加了类型支持TypeScript 文件扩展名为 tsTypeScript 可编译成标准的 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 感谢您的支持
