TypeScript完全指南：从入门到高级进阶（2024版）

一、TypeScript简介

1.1 什么是TypeScript？

TypeScript是JavaScript的超集，它通过向JavaScript添加可选的静态类型和基于类的面向对象编程特性，提升了代码的可维护性和开发效率。它由Microsoft开发维护，可以编译成标准的JavaScript代码。

1.2 为什么选择TypeScript？

增强代码的可读性和可维护性
- 类型系统是最好的文档
- 大部分函数看类型定义就知道如何使用
提前发现错误
- 在编译阶段就能发现大部分错误
- 避免运行时错误
更好的IDE支持
- 代码补全
- 接口提示
- 跳转到定义
- 代码重构
出色的包容性
- 完全兼容JavaScript
- .js文件可以直接重命名为.ts
- 自动类型推论
- 图灵完备的类型系统
活跃的生态系统
- 大多数第三方库都提供了类型定义
- Angular、Vue、VS Code等都使用TypeScript开发

1.3 TypeScript的特性

类型批注和编译时类型检查
类型推断
接口
枚举
Mixins
泛型编程
名字空间
元组
Async/Await

1.4 TypeScript安装和使用

# 全局安装TypeScript
npm install -g typescript

# 安装ts-node
npm install -g ts-node

# 创建并编译TS文件
tsc demo.ts

# 直接运行TS文件
ts-node demo.ts

二、TypeScript类型系统

2.1 基础静态类型

// 基本类型声明
const count: number = 88;
const myName: string = '蜡笔小新';
const isDone: boolean = false;

2.2 对象类型

// 对象类型声明
const lbxx: {
    name: string;
    age: number;
} = {
    name: "蜡笔小新",
    age: 18
};

// 数组类型
const users: string[] = ["蜡笔小新", "犬夜叉", "樱桃小丸子"];

// 类类型
class Person {}
const lbxx: Person = new Person();

// 函数类型
const getName: () => string = () => {
    return "蜡笔小新";
};

2.3 类型注解和类型推断

// 类型注解
let count: number;
count = 123;

// 类型推断
let countInference = 123; // 自动推断为number类型

// 需要类型注解的场景
function getTotal(one: number, two: number): number {
    return one + two;
}

三、函数的类型系统

3.1 函数参数和返回值类型

// 基本函数类型
function getTotal(one: number, two: number): number {
    return one + two;
}

// void返回类型
function sayHello(): void {
    console.log("hello world");
}

// never返回类型
function errorFunction(): never {
    throw new Error();
}

// 函数参数为对象的类型注解
function add({ one, two }: { one: number; two: number }): number {
    return one + two;
}

四、数组类型定义

4.1 单一类型数组

const numberArr: number[] = [1, 2, 3];
const stringArr: string[] = ["a", "b", "c"];
const undefinedArr: undefined[] = [undefined, undefined];

4.2 多种类型数组

const mixArr: (number | string)[] = [1, "string", 2];

4.3 对象数组

// 类型别名方式
type User = { name: string; age: number };
const users: User[] = [
    { name: "蜡笔小新", age: 18 },
    { name: "犬夜叉", age: 28 }
];

// 类方式
class User {
    name: string;
    age: number;
}
const users: User[] = [
    { name: "蜡笔小新", age: 18 },
    { name: "犬夜叉", age: 28 }
];

五、Interface接口

5.1 基本接口使用

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

const user: User = {
    name: "蜡笔小新",
    age: 18
};

5.2 可选属性

interface User {
    name: string;
    age: number;
    like?: string;
}

5.3 任意属性

interface User {
    name: string;
    age: number;
    [propName: string]: any;
}

5.4 接口方法

interface User {
    name: string;
    age: number;
    say(): string;
}

5.5 接口继承

interface User {
    name: string;
    age: number;
    say(): string;
}

interface Admin extends User {
    admin(): string;
}

六、联合类型和类型保护

6.1 联合类型

class MathTeacher {
    compute(): void {
        console.log('数学老师会计算');
    }
}

class EnglishTeacher {
    say(): void {
        console.log('英语老师说 Hello！');
    }
}

function teacherTeach(teacher: MathTeacher | EnglishTeacher): void {}

6.2 类型保护机制

类型断言

function teacherTeach(teacher: MathTeacher | EnglishTeacher): void {
    (teacher as EnglishTeacher).say();
    (teacher as MathTeacher).compute();
}

in 语法

function teacherTeach(teacher: MathTeacher | EnglishTeacher): void {
    if ("compute" in teacher) {
        teacher.compute();
    } else {
        teacher.say();
    }
}

instanceof 语法

function teacherTeach(teacher: MathTeacher | EnglishTeacher): void {
    if (teacher instanceof MathTeacher) {
        teacher.compute();
    } else {
        teacher.say();
    }
}

七、Enum枚举类型

7.1 数字枚举

enum Direction {
    Up = 1,
    Down,
    Left,
    Right
}

7.2 字符串枚举

enum Direction {
    Up = "UP",
    Down = "DOWN",
    Left = "LEFT",
    Right = "RIGHT"
}

八、TypeScript泛型

8.1 泛型基础

function join<T>(first: T, second: T) {
    return `${first}${second}`;
}

join<string>("蜡笔小新", "樱桃小丸子");
join<number>(1, 2);

8.2 泛型数组

// 方法一
function myFun<T>(params: T[]) {
    return params;
}

// 方法二
function myFun<T>(params: Array<T>) {
    return params;
}

8.3 多个泛型参数

function join<T, P>(first: T, second: P) {
    return `${first}${second}`;
}

join<number, string>(1, "2");

九、TypeScript中的类

9.1 基本类使用

class Person {
    content = "Hi，老铁";
    sayHello() {
        return this.content;
    }
}

9.2 类的继承

class Teacher extends Person {
    teach() {
        return "我是一个老师";
    }
}

9.3 访问修饰符

class Person {
    public name: string;      // 公共属性
    private age: number;      // 私有属性
    protected gender: string; // 保护属性
    readonly id: number;      // 只读属性
}

9.4 构造函数

class Person {
    constructor(public name: string) {}
}

class Teacher extends Person {
    constructor(name: string, public age: number) {
        super(name);
    }
}

9.5 Getter和Setter

class User {
    constructor(private _age: number) {}

    get age() {
        return this._age;
    }

    set age(age: number) {
        this._age = age;
    }
}

9.6 抽象类

abstract class Teacher {
    constructor(public name: string, public school: string) {}
    public abstract skill(): void;
}

class MathTeacher extends Teacher {
    skill() {
        console.log('数学老师教数学！');
    }
}

十、配置文件tsconfig.json

10.1 基本配置

{
    "include": ["demo.ts"],
    "exclude": ["demo2.ts"],
    "compilerOptions": {
        "outDir": "./build",
        "rootDir": "./src",
        "target": "es5",
        "module": "commonjs",
        "strict": true,
        "removeComments": true
    }
}

10.2 常用编译选项

outDir: 指定输出目录
rootDir: 指定源码目录
target: 指定ECMAScript目标版本
module: 指定生成哪个模块系统代码
strict: 启用所有严格类型检查选项
removeComments: 删除注释
allowJs: 允许编译JavaScript文件
sourceMap: 生成相应的.map文件

学习建议

入门阶段：

掌握基本类型系统
理解类型注解和推断
熟悉基本的接口使用

进阶阶段：

深入学习泛型
掌握类和面向对象特性
理解类型保护机制

实战阶段：

结合实际项目练习
学习配置文件的使用
尝试编写复杂的类型定义

常用参考资源

官方资源：

TypeScript官方文档：www.typescriptlang.org/zh/
TypeScript GitHub仓库：github.com/microsoft/TypeScript

结语

TypeScript作为JavaScript的超集，不仅提供了类型系统，还引入了许多现代编程语言的特性。通过本文的学习，你应该已经掌握了TypeScript的核心概念和使用方法。建议在实际项目中多加练习，逐步提升TypeScript开发能力。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

{{userData.name}}已认证