《TypeScript教学指南》是一本全面介绍TypeScript编程语言的学习手册,适合JavaScript开发者进阶使用。书中详细讲解了TypeScript的基础语法、高级特性和项目实战技巧,帮助读者轻松掌握强类型开发技能,提升代码质量和维护性。
### TypeScript 数据类型详解
#### 基础数据类型
在 TypeScript 中,基础数据类型是构建更复杂类型的基础。这些类型包括但不限于布尔值、数字、字符串等。
##### 布尔值(boolean)
布尔值用于表示逻辑实体,在 TypeScript 中只有两个可能的值:`true` 和 `false`。
```typescript
let isDone: boolean = false;
```
##### 数字(number)
TypeScript 中的数字类型支持整数和浮点数。值得注意的是,TypeScript 没有像 Java 那样的严格区分整型和浮点型,所有的数值都用 `number` 类型表示。
```typescript
let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744;
```
##### 字符串(string)
字符串类型用来表示文本数据。可以使用单引号或双引号来定义字符串。
```typescript
let myName: string = Tom;
let age: string = 25;
```
##### 数组(Array)
数组是一种存储多个相同类型数据的数据结构。在 TypeScript 中有两种方式定义数组:
- 使用类型后跟方括号 `[]`
- 使用 `Array<类型>`
```typescript
let list1: number[] = [1, 2, 3];
let list2: Array = [1, 2, 3];
```
##### 元组(Tuple)
元组允许表示一个已知元素数量和类型的数组,各元素的类型不必相同。
```typescript
let x: [string, number];
x = [hello, 10]; // OK
x = [10, hello]; // Error
```
#### 枚举(Enum)
枚举类型为一组命名常量创建了一个新的类型。枚举类型使代码更易于阅读和维护。
```typescript
enum Color {Red, Green, Blue}
let c: Color = Color.Green;
```
##### 外部枚举
外部枚举可以让你将已有的 JavaScript 枚举提升到 TypeScript 中。
```typescript
declare enum Fish {
Shark = 1,
Tuna
}
// 在另一个文件中
import { Fish } from ./fish;
console.log(Fish.Shark); // 输出:1
```
#### 接口(Interface)
接口是一个非常重要的概念,它为对象结构提供了一种定义的方式。通过接口可以定义出符合某种契约的对象,从而达到统一代码的目的。
##### 接口初探
```typescript
interface LabelledValue {
label: string;
}
function printLabel(labelledObj: LabelledValue) {
console.log(labelledObj.label);
}
```
##### 可选属性
在接口定义的时候,可以使用 `?` 来标记可选属性。
```typescript
interface SquareConfig {
color?: string;
width?: number;
}
function createSquare(config: SquareConfig): {color: string; area: number} {
let newSquare = {color: white, area: 100};
if (config.color) {
newSquare.color = config.color;
}
if (config.width) {
newSquare.area = config.width * config.width;
}
return newSquare;
}
```
##### 函数类型
函数也可以视为一种特殊类型。在 TypeScript 中,可以使用接口来定义函数的形状。
```typescript
interface SearchFunc {
(source: string, subString: string): boolean;
}
let mySearch: SearchFunc = function(source: string, subString: string) {
let result = source.search(subString);
return result > -1;
};
```
##### 数组类型
数组类型的定义方式类似于基本类型,但是使用了泛型来指明数组元素的类型。
```typescript
let fibonacci: number[] = [1, 1, 2, 3, 5];
```
##### 类类型
类类型可以通过接口来定义。这样就可以在类实现接口时,确保类具有某些特定的属性和方法。
```typescript
interface ClockInterface {
currentTime: Date;
tick(): void;
}
class Clock implements ClockInterface {
currentTime: Date;
constructor(h: number, m: number) { }
tick() {
this.currentTime = new Date();
}
}
```
##### 实现接口
实现接口意味着类必须具备该接口所描述的所有属性和方法。如果类没有完全实现接口,则编译器会报错。
```typescript
interface ClockConstructor {
new (hour: number, minute: number): ClockInterface;
}
function createClock(ctor: ClockConstructor, hour: number, minute: number): ClockInterface {
return new ctor(hour, minute);
}
class DigitalClock implements ClockInterface {
currentTime: Date;
constructor(h: number, m: number) { }
tick() {
this