首页手记 TypeScript进阶：从入门到初级应用教程

TypeScript进阶：从入门到初级应用教程

标签：

Typescript

本文详细介绍了TypeScript进阶内容，包括联合类型与字面量类型、枚举类型、类型保护与类型断言等重要概念。此外，还探讨了TypeScript高级特性如模块与命名空间、高阶函数和回调函数以及装饰器的使用。文章还涵盖了TypeScript在项目中的应用，包括构建过程配置、代码规范与Linting以及单元测试的实施。

TypeScript基础回顾

变量和类型

在TypeScript中，所有变量都有类型。类型可以是基本类型，如数字、字符串、布尔值，也可以是复杂类型，如数组、元组、枚举、对象等。类型信息帮助编译器进行静态类型检查，增强代码的可维护性和健壮性。

定义变量时，可以显式指定类型，也可以使用类型推断。以下是一个简单的例子：

let age: number = 25;
let name: string = "Alice";
let isStudent: boolean = true;

// 类型推断
let message = "Hello, TypeScript!";
console.log(message);  // 输出: Hello, TypeScript!

类型推断是指当变量被赋值时，编译器能够根据赋值自动推断出变量的类型。例如，上述 message 变量，其类型被推断为 string。

函数定义

函数在TypeScript中可以具有类型注解，包括参数类型、返回类型等。定义函数时，可以明确指定参数类型和返回类型，如下所示：

function greet(name: string): string {
    return `Hello, ${name}!`;
}

console.log(greet("Alice"));  // 输出: Hello, Alice!

在上面的代码中，函数 greet 接收一个 string 类型的参数，并返回一个 string 类型的结果。

类和接口

类是面向对象编程的核心概念，用于封装数据和代码。接口用于定义对象的行为，通常用于定义对象的结构，或作为类的继承。

以下是一个简单的类和接口的例子：

interface Person {
    name: string;
    age: number;
}

class Employee implements Person {
    name: string;
    age: number;
    position: string;

    constructor(name: string, age: number, position: string) {
        this.name = name;
        this.age = age;
        this.position = position;
    }
}

let employee = new Employee("Bob", 30, "Developer");
console.log(employee.name);  // 输出: Bob
console.log(employee.age);   // 输出: 30

在这个例子中，接口 Person 定义了一个对象的结构，类 Employee 实现了这个接口，定义了 name、age 和 position 三个属性。

泛型

泛型允许编写更具通用性的代码，能够处理各种类型的数据，而无需为每个类型重复定义。通过使用泛型，开发者可以创建灵活且可重用的代码。以下是一个简单的泛型类的例子：

class GenericBox<T> {
    content: T;

    constructor(content: T) {
        this.content = content;
    }
}

let numberBox = new GenericBox<number>(10);
let stringBox = new GenericBox<string>("Hello");

console.log(numberBox.content);   // 输出: 10
console.log(stringBox.content);   // 输出: Hello

在上面的代码中，GenericBox 类使用泛型 T，可以存储任何类型的数据。

TypeScript进阶类型

联合类型与字面量类型

联合类型允许变量同时拥有多个类型，例如，一个变量可以是 string 或 number。字面量类型则进一步限制变量只能是特定的一组值。

以下是一个联合类型的例子：

let value: string | number;
value = "Hello";  // 正确
value = 123;      // 正确
value = true;     // 错误，布尔类型不符合联合类型

在该例子中，value 变量可以是 string 或 number 类型，但不能是其他类型。

以下是一个字面量类型的例子：

type Color = "red" | "green" | "blue";
let color: Color = "red";  // 正确
color = "orange";          // 错误，只能是预定义的值

在这个例子中，color 变量只能是 "red"、"green" 或 "blue" 中的一个。

枚举类型

枚举类型用于定义一组命名的常量。枚举类型可以是数值型或字符串型，也可以是混合型。以下是一个数值型枚举的例子：

enum ColorEnum {
    Red,
    Green,
    Blue
}

console.log(ColorEnum.Red);  // 输出: 0
console.log(ColorEnum.Green);  // 输出: 1
console.log(ColorEnum.Blue);   // 输出: 2

在这个例子中，ColorEnum 枚举类型定义了三个值，每个值对应一个数字。

以下是一个字符串型枚举的例子：

enum ColorStr {
    Red = "red",
    Green = "green",
    Blue = "blue"
}

console.log(ColorStr.Red);  // 输出: "red"
console.log(ColorStr.Green);  // 输出: "green"
console.log(ColorStr.Blue);   // 输出: "blue"

在这个例子中，ColorStr 枚举类型定义了三个值，每个值对应一个字符串。

类型保护与类型断言

类型保护是一种函数，用于确保某个变量具有特定类型。类型断言是另一种机制，用于临时改变编译器对变量类型的推断。

以下是一个类型保护的例子：

function isNumber(value: any): value is number {
    return typeof value === "number";
}

let value = "Hello";
if (isNumber(value)) {
    console.log(value.toFixed(2));  // 不会执行到这里
} else {
    console.log(typeof value);      // 输出: string
}

在这个例子中，isNumber 函数用于判断某个值是否为 number 类型。

以下是一个类型断言的例子：

let unknownVar: any = "Hello";
let name = unknownVar as string;  // 类型断言为 string
console.log(name.length);          // 输出: 5

unknownVar = 123;
let numberValue = unknownVar as number;  // 类型断言为 number
console.log(numberValue.toFixed(2));     // 输出: 123.00

在这个例子中，使用 as 关键字进行类型断言，确保 unknownVar 被视为特定类型。

TypeScript高级特性

模块与命名空间

TypeScript 支持 ES6 模块系统，允许将代码组织成模块，以实现更好的管理和重用。命名空间则用于在代码中创建封闭的命名空间，避免名称冲突。

以下是一个简单的模块例子：

// greeter.ts
export function greet(name: string) {
    return `Hello, ${name}!`;
}

// main.ts
import { greet } from "./greeter";
console.log(greet("Alice"));  // 输出: Hello, Alice!

在这个例子中，greeter.ts 文件导出了一个 greet 函数，main.ts 文件导入并使用了该函数。

以下是一个命名空间的例子：

// namespace.ts
namespace MathUtil {
    export function add(a: number, b: number) {
        return a + b;
    }

    export function subtract(a: number, b: number) {
        return a - b;
    }
}

// main.ts
console.log(MathUtil.add(10, 5));  // 输出: 15
console.log(MathUtil.subtract(10, 5));  // 输出: 5

在这个例子中，namespace.ts 文件定义了一个 MathUtil 命名空间，其中包含两个函数 add 和 subtract。

高阶函数和回调函数

高阶函数是一种接受函数作为参数或返回函数的函数。回调函数是高阶函数的一个常见用法，用于在特定事件发生时执行一些操作。

以下是一个高阶函数的例子：

function applyOperation(a: number, b: number, operation: (a: number, b: number) => number) {
    return operation(a, b);
}

function add(a: number, b: number) {
    return a + b;
}

function subtract(a: number, b: number) {
    return a - b;
}

console.log(applyOperation(10, 5, add));  // 输出: 15
console.log(applyOperation(10, 5, subtract));  // 输出: 5

在这个例子中，applyOperation 函数接受两个数字和一个函数作为参数，并调用该函数执行操作。

以下是一个回调函数的例子：

function processArray(arr: number[], callback: (value: number) => void) {
    for (let value of arr) {
        callback(value);
    }
}

processArray([1, 2, 3], (value) => {
    console.log(`Processing value: ${value}`);  // 输出: Processing value: 1
                                                //        Processing value: 2
                                                //        Processing value: 3
});

在这个例子中，processArray 函数接受一个数组和一个回调函数，并在数组的每个元素上调用回调函数。

装饰器

装饰器是一种特殊类型的声明，可以附加到类声明、方法、属性或参数上，以修改或增强其行为。以下是一个简单的装饰器例子：

function log(target: any, key: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;
    descriptor.value = function(...args: any[]) {
        console.log(`Calling "${key}" with`, args);
        return originalMethod.apply(this, args);
    };
    return descriptor;
}

class Greeter {
    @log
    greet(name: string) {
        return `Hello, ${name}!`;
    }
}

let greeter = new Greeter();
console.log(greeter.greet("Alice"));  // 输出: Calling "greet" with [ 'Alice' ]
                                      //        Hello, Alice!

在这个例子中，log 装饰器用于打印调用方法时的参数。

TypeScript在项目中的应用

构建过程配置

TypeScript 项目通常使用构建工具来编译和打包代码。常见的构建工具包括 Webpack、Rollup 和 TSC (TypeScript 编译器)。以下是一个使用 TSC 配置的简单例子：

安装 TSC：
```
npm install --save-dev typescript
```

创建 tsconfig.json 文件：

{
   "compilerOptions": {
       "target": "es6",
       "module": "commonjs",
       "outDir": "./dist",
       "strict": true
   },
   "include": ["src/**/*.ts"],
   "exclude": ["node_modules"]
}

编写代码并使用 TSC 编译：
```
npx tsc
```

代码规范与Linting

代码规范有助于保持代码的一致性和可读性，Linting 工具用于检查代码是否符合特定的规范。常用的 Linting 工具包括 ESLint 和 TSLint。以下是一个使用 ESLint 的例子：

安装 ESLint：
```
npm install --save-dev eslint
```

安装 TypeScript 插件：

npm install --save-dev eslint-plugin-typescript

创建 .eslintrc.js 配置文件：

module.exports = {
   parser: '@typescript-eslint/parser',
   extends: [
       'eslint:recommended',
       'plugin:@typescript-eslint/eslint-recommended',
       'plugin:@typescript-eslint/recommended'
   ],
   rules: {
       '@typescript-eslint/explicit-function-return-type': 'off',
       '@typescript-eslint/explicit-module-boundary-types': 'off'
   }
};

运行 ESLint：
```
npx eslint src/**/*.ts
```

单元测试

单元测试用于验证代码的特定部分是否按预期工作。常用的单元测试框架包括 Jest 和 Mocha。以下是一个使用 Jest 的例子：

安装 Jest 和 TypeScript 支持：

npm install --save-dev jest ts-jest ts-node

创建 jest.config.js 配置文件：

module.exports = {
   transform: {
       '.ts': 'ts-jest',
   },
   testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(ts)$',
   moduleFileExtensions: ['ts', 'js', 'json', 'node'],
};

编写测试用例：

// greeter.spec.ts
import { greet } from './greeter';

test('should greet properly', () => {
   expect(greet('Alice')).toBe('Hello, Alice!');
});

运行 Jest：
```
npx jest
```

常见问题与解决方法

TypeScript编译错误

TypeScript 编译器会检查代码中的类型错误，并在编译时报告错误。以下是一些常见的编译错误及解决方法：

类型检查错误：

let age: number = "25";  // 错误，字符串不能赋值给 number 类型

解决方法：

let age: number = 25;  // 正确

函数参数类型不匹配：

function greet(name: string) {
   return `Hello, ${name}!`;
}
greet(123);  // 错误，参数类型不匹配

解决方法：

greet("Alice");  // 正确

类型检查问题

类型检查问题通常发生在变量类型推断或类型注解不正确时。以下是一些常见类型检查问题及解决方法：

类型推断错误：

let value = "Hello";
value = 123;  // 错误，字符串不能赋值给 number 类型

解决方法：

let value: string = "Hello";
value = "World";  // 正确

类型注解错误：

function greet(name: string) {
   return `Hello, ${name}!`;
}
let result = greet(123);  // 错误，函数返回类型不匹配

解决方法：

let result: string = greet("Alice");  // 正确

错误排查技巧

使用 TypeScript 编译器错误信息：
编译器会提供详细的错误信息，包括行号和错误描述。根据这些信息，可以定位和修复问题。
启用严格模式：
在 tsconfig.json 中启用严格模式，可以强制执行更严格的类型检查规则，有助于发现潜在的类型错误。
使用 Linting 工具：
Linting 工具可以帮助发现代码风格和潜在的类型错误。配置和运行 Linting 工具可以提高代码质量。

TypeScript资源推荐

官方文档与社区

TypeScript 官方文档提供了详细的语法、特性和最佳实践。社区资源包括 Stack Overflow、GitHub 和官方论坛，这些资源提供了大量示例和解决方案。

在线教程与书籍

慕课网：提供丰富的 TypeScript 在线课程，适合不同级别的学习者。
官方教程：TypeScript 官方网站提供了多个教程和示例。
TypeScript Handbook：官方文档手册详细介绍了 TypeScript 的各个方面。

开源项目示例

TypeScript 官方示例项目：GitHub 上的官方示例项目展示了 TypeScript 在实际项目中的应用。
开源框架和库：许多流行的框架和库，如 Angular 和 Vue.js，使用 TypeScript 编写，可以作为学习和参考的资源。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

慕码人8056858

手记
篇

粉丝

350

获赞与收藏

1323

关注作者，订阅最新文章

阅读免费教程

TypeScript 入门教程

38个小节 93068 666

后端通用面试教程

41个小节 30583 343

网络编程入门教程

20个小节 12561 237

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

TypeScript进阶：从入门到初级应用教程

TypeScript基础回顾

变量和类型

函数定义

类和接口

泛型

TypeScript进阶类型

联合类型与字面量类型

枚举类型

类型保护与类型断言

TypeScript高级特性

模块与命名空间

高阶函数和回调函数

装饰器

TypeScript在项目中的应用

构建过程配置

代码规范与Linting

单元测试

常见问题与解决方法

TypeScript编译错误

类型检查问题

错误排查技巧

TypeScript资源推荐

官方文档与社区

在线教程与书籍

开源项目示例

阅读免费教程