首页
技术小册
AIGC
面试刷题
技术文章
MAGENTO
云计算
视频课程
源码下载
PDF书籍
「涨薪秘籍」
登录
注册
第 1 章 准备知识
1.1 前端技术简介
1.2 HTML入门
1.2.1 准备开发工具
1.2.2 HTML中的基础标签
1.3 CSS入门
1.3.1 CSS选择器入门
1.3.2 CSS样式入门
1.4 JavaScript入门
1.4.1 我们为什么需要JavaScript
1.4.2 JavaScript语法简介
1.4.3 从JavaScript到TypeScript
1.5 渐进式开发框架Vue
1.5.1 第一个Vue应用
1.5.2 范例:一个简单的用户登录页面
1.5.3 Vue 3的新特性
1.5.4 我们为什么要使用Vue框架
第 2 章 TypeScript基础
2.1 重新认识TypeScript
2.1.1 安装TypeScript
2.1.2 TypeScript语言版本的HelloWorld程序
2.1.3 使用高级IDE工具
2.2 TypeScript中的基本类型
2.2.1 布尔、数值与字符串
2.2.2 特殊的空值类型
2.2.3 数组与元组
2.3 TypeScript中有关类型的高级内容
2.3.1 枚举类型
2.3.2 枚举的编译原理
2.3.3 any、never与object类型
2.3.4 关于类型断言
2.4 函数的声明和定义
2.4.1 函数的类型
2.4.2 可选参数、默认参数和不定个数参数
2.4.3 函数的重载
第 3 章 TypeScript中的面向对象编程
3.1 理解与应用“类”
3.1.1 类的定义与继承
3.1.2 类的访问权限控制
3.1.3 只读属性与存取器
3.1.4 关于静态属性与抽象类
3.1.5 类的实现原理
3.2 接口的应用
3.2.1 接口的定义
3.2.2 使用接口约定函数和可索引类型
3.2.3 使用接口来约束类
3.2.4 接口的继承
3.3 TypeScript中的类型推断与高级类型
3.3.1 关于类型推断
3.3.2 联合类型与交叉类型
3.3.3 TypeScript的类型区分能力
3.3.4 字面量类型与类型别名
当前位置:
首页>>
技术小册>>
TypeScript和Vue从入门到精通(一)
小册名称:TypeScript和Vue从入门到精通(一)
### 2.2 TypeScript中的基本类型 在TypeScript的世界里,类型系统是其强大特性的核心之一,它不仅帮助开发者在编写代码时捕获潜在的错误,还提升了代码的可读性和可维护性。本章我们将深入探讨TypeScript中的基本类型,这些类型构成了TypeScript类型系统的基石。 #### 2.2.1 布尔类型(Boolean) 布尔类型是TypeScript中最基础的数据类型之一,用于表示逻辑上的真(true)或假(false)。在TypeScript中声明布尔类型的变量非常直接: ```typescript let isDone: boolean = false; let canProceed: boolean = true; ``` 布尔类型在条件语句(如if-else、while循环等)中扮演着至关重要的角色,因为它们直接对应着逻辑上的真或假。 #### 2.2.2 数字类型(Number) 数字类型在TypeScript中用于表示所有类型的数字,无论是整数还是浮点数。与JavaScript类似,TypeScript中的所有数字都是浮点数,即使它们看起来像是整数。 ```typescript let age: number = 30; let pi: number = 3.14; let hex: number = 0xf00d; // 十六进制 let binary: number = 0b1010; // 二进制(ES6+特性,TypeScript支持) let octal: number = 0o744; // 八进制(ES6+特性,TypeScript支持) ``` TypeScript还允许使用科学记数法来表示数字: ```typescript let bigNumber: number = 1.23e+34; let smallNumber: number = 5.67e-32; ``` #### 2.2.3 字符串类型(String) 字符串类型用于表示文本数据。在TypeScript中,你可以使用单引号(')、双引号(")或模板字符串(使用反引号`)来定义字符串。 ```typescript let greeting: string = 'Hello, world!'; let name: string = "Alice"; let multiLineString: string = `This is a multi-line string example.`; ``` 模板字符串不仅可以跨越多行,还可以嵌入表达式,这些表达式会被计算结果并转换成字符串: ```typescript let name: string = 'TypeScript'; let message: string = `Hello, ${name}!`; console.log(message); // 输出: Hello, TypeScript! ``` #### 2.2.4 数组类型(Array) 数组类型用于表示一组有序的值。在TypeScript中,你可以通过两种方式来定义数组类型:使用数组泛型(推荐方式)或使用类型注解与索引签名。 **使用数组泛型**: ```typescript let numbers: number[] = [1, 2, 3, 4, 5]; let strings: string[] = ['a', 'b', 'c']; ``` **使用类型注解与索引签名(不常用,主要用于更复杂的数组类型定义)**: ```typescript let list: Array<number> = [1, 2, 3]; // 或者 let list: { [index: number]: number } = [1, 2, 3]; // 这种方式更复杂,不常用 ``` #### 2.2.5 元组类型(Tuple) 元组类型允许表示一个已知元素数量和类型的数组,各元素的类型不必相同。元组类型常用于表示固定长度的数据结构,如坐标点、颜色值(RGBA)等。 ```typescript let point: [number, number] = [10, 20]; console.log(point[0]); // 输出: 10 console.log(point[1]); // 输出: 20 // 访问越界的元素时,TypeScript会报错(如果开启了严格模式) // console.log(point[2]); // TypeScript 错误:元组类型 '[number, number]' 中不存在索引 2 的元素。 // 元组也可以定义不同类型的元素 let color: [string, number, number, number] = ['red', 255, 0, 0]; ``` #### 2.2.6 枚举类型(Enum) 枚举类型是一种特殊的类,它允许开发者定义一组命名的常量。使用枚举可以让代码更加清晰易读,特别是当需要处理一组固定的常量值时。 ```typescript enum Direction { Up, Down, Left, Right, } let direction: Direction = Direction.Up; console.log(direction); // 输出数字 0,因为Up是第一个枚举成员 // 也可以手动指定枚举成员的数值 enum Color { Red = 1, Green, Blue = 3, // 注意:Green会被自动赋值为2 } let myColor: Color = Color.Green; console.log(myColor); // 输出 2 ``` #### 2.2.7 任意类型(Any) 任意类型(Any)用于表示可以是任何类型的值。当你不知道一个变量的具体类型,或者不想在编译时进行类型检查时,可以使用任意类型。但是,过度使用任意类型会失去TypeScript提供的大部分优势,因此建议谨慎使用。 ```typescript let notSure: any = 4; notSure = "maybe a string instead"; notSure = false; // 可以是任何类型 // 当你只知道部分类型信息时,可以使用联合类型或类型守卫等特性,而不是直接使用any ``` #### 2.2.8 空值(Void) 在TypeScript中,`void`类型表示没有任何类型。它通常用于表示函数没有返回值。 ```typescript function warnUser(): void { console.log('This is a warning'); } // 返回值类型为void的函数不能返回除undefined或null之外的任何值 // 如果尝试返回其他值,TypeScript编译器会报错 // function warnUser(): void { // return true; // TypeScript 错误:不能将类型 'boolean' 分配给类型 'void'。 // } ``` #### 2.2.9 Null 和 Undefined 在TypeScript中,`null`和`undefined`都有它们各自的类型,分别是`null`和`undefined`。默认情况下,TypeScript中的变量可以自动赋值为`undefined`(如果未初始化),但在严格模式下(`--strictNullChecks`),需要显式地处理`null`和`undefined`,以避免潜在的错误。 ```typescript let u: undefined = undefined; let n: null = null; // 在严格模式下,必须显式处理null和undefined // function processValue(value: number | undefined) { // console.log(value.toFixed()); // TypeScript 错误:'value' 可能是 'undefined'。 // } // 需要进行类型检查或使用非空断言操作符 function processValue(value: number | undefined) { if (value !== undefined) { console.log(value.toFixed()); } // 或者使用非空断言操作符(谨慎使用) // console.log(value!.toFixed()); // !操作符告诉TypeScript编译器,开发者确信value不是null或undefined } ``` #### 2.2.10 Never 类型 `never`类型是TypeScript中一种特殊的类型,表示那些永不存在的值的类型。它通常用于表示那些总是抛出异常或根本不会有返回值的函数。 ```typescript // 抛出异常的函数 function error(message: string): never { throw new Error(message); } // 无限循环的函数 function infiniteLoop(): never { while (true) { // do nothing } } // 永不返回值的函数 function alwaysThrows(): never { return error("Something bad happened"); } ``` ### 结语 通过本章的学习,我们深入了解了TypeScript中的基本类型,包括布尔类型、数字类型、字符串类型、数组类型、元组类型、枚举类型、任意类型、空值、`null`和`undefined`以及`never`类型。这些基本类型是构建更复杂TypeScript程序的基础,掌握它们对于深入理解TypeScript的类型系统至关重要。在接下来的章节中,我们将继续探索TypeScript的高级特性,如接口、类、泛型等,以进一步提升我们的TypeScript编程能力。
上一篇:
2.1.3 使用高级IDE工具
下一篇:
2.2.1 布尔、数值与字符串
该分类下的相关小册推荐:
Vue面试指南
Vue3技术解密
Vue原理与源码解析
TypeScript和Vue从入门到精通(五)
Vue.js从入门到精通(三)
Vue.js从入门到精通(二)
Vue.js从入门到精通(一)
Vue源码完全解析
TypeScript和Vue从入门到精通(二)
Vue.js从入门到精通(四)
vue项目构建基础入门与实战
移动端开发指南