typescript从入门到精通

TypeScript 从入门到精通教程

一、TypeScript 简介

TypeScript 是微软开发的 JavaScript 超集语言，它添加了可选的静态类型系统和基于类的面向对象编程。TypeScript 代码会被编译为纯 JavaScript 代码运行。

为什么选择 TypeScript？

1. 类型安全：编译时类型检查，减少运行时错误
2. 更好的工具支持：智能提示、代码补全、重构工具
3. 渐进式采用：可以逐步将 JavaScript 项目迁移到 TypeScript
4. 现代 JavaScript 特性：支持 ES6+ 特性并可以编译为旧版 JavaScript

二、环境搭建

安装 TypeScript

npm install -g typescript

验证安装

tsc --version

编译 TypeScript 文件

tsc yourfile.ts

三、基础类型

TypeScript 提供了多种基本类型：

// 布尔值
let isDone: boolean = false;

// 数字
let decimal: number = 6;
let hex: number = 0xf00d;

// 字符串
let color: string = "blue";

// 数组
let list: number[] = [1, 2, 3];
let list2: Array<number> = [1, 2, 3]; // 泛型语法

// 元组
let x: [string, number];
x = ["hello", 10]; // OK
x = [10, "hello"]; // Error

// 枚举
enum Color {Red, Green, Blue}
let c: Color = Color.Green;

// Any
let notSure: any = 4;
notSure = "maybe a string instead";

// Void
function warnUser(): void {
    console.log("This is a warning message");
}

// Null 和 Undefined
let u: undefined = undefined;
let n: null = null;

// Never
function error(message: string): never {
    throw new Error(message);
}

// 对象
let obj: object = {};

四、接口

接口是 TypeScript 的核心概念之一，用于定义对象的形状。

interface Person {
    name: string;
    age: number;
    readonly id: number; // 只读属性
    optional?: string;  // 可选属性
}

function greet(person: Person) {
    return "Hello " + person.name;
}

let user = { name: "Alice", age: 30, id: 12345 };
greet(user);

五、类

TypeScript 提供了完整的类实现：

class Animal {
    private name: string;
    
    constructor(name: string) {
        this.name = name;
    }
    
    move(distance: number = 0) {
        console.log(`${this.name} moved ${distance}m.`);
    }
}

class Dog extends Animal {
    bark() {
        console.log("Woof! Woof!");
    }
}

const dog = new Dog("Buddy");
dog.bark();
dog.move(10);

六、函数

TypeScript 中的函数可以指定参数和返回值的类型：

// 函数声明
function add(x: number, y: number): number {
    return x + y;
}

// 函数表达式
let myAdd = function(x: number, y: number): number { return x + y; };

// 可选参数
function buildName(firstName: string, lastName?: string) {
    // ...
}

// 默认参数
function buildName2(firstName: string, lastName = "Smith") {
    // ...
}

// 剩余参数
function buildName3(firstName: string, ...restOfName: string[]) {
    // ...
}

七、泛型

泛型提供了代码复用的强大方式：

function identity<T>(arg: T): T {
    return arg;
}

let output = identity<string>("myString");

// 泛型接口
interface GenericIdentityFn<T> {
    (arg: T): T;
}

// 泛型类
class GenericNumber<T> {
    zeroValue: T;
    add: (x: T, y: T) => T;
}

八、模块

TypeScript 支持 ES6 模块系统：

// math.ts
export function square(x: number) {
    return x * x;
}

// app.ts
import { square } from './math';
console.log(square(2));

九、类型推断与类型断言

// 类型推断
let someValue = "this is a string"; // TypeScript 推断为 string

// 类型断言
let strLength: number = (someValue as string).length;
// 或
let strLength2: number = (<string>someValue).length;

十、高级类型

联合类型

let padding: string | number;

交叉类型

interface A { a: number }
interface B { b: string }
type AB = A & B;
let ab: AB = { a: 1, b: "hello" };

类型别名

type StringOrNumber = string | number;

十一、配置 tsconfig.json

TypeScript 项目通常需要一个配置文件：

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

十二、实战示例

一个简单的 React 组件 (使用 TSX)

import React from 'react';

interface Props {
    name: string;
    age?: number;
}

const Greeting: React.FC<Props> = ({ name, age = 18 }) => {
    return (
        <div>
            <h1>Hello, {name}!</h1>
            <p>You are {age} years old.</p>
        </div>
    );
};

export default Greeting;

十三、学习资源

1. TypeScript 官方文档
2. TypeScript Deep Dive
3. TypeScript Handbook 中文版

十四、总结

TypeScript 通过静态类型检查增强了 JavaScript，使大型应用开发更加可靠和可维护。本教程涵盖了 TypeScript 的主要特性，从基础类型到高级概念。建议从简单项目开始实践，逐步掌握 TypeScript 的强大功能。