TypeScript 简介

// JavaScript 中的动态类型（运行时可能出错）
function add(a, b) {
    return a + b;
}

add(5, "3"); // 返回 "53"，可能不是期望的结果

// TypeScript 中的静态类型（编译时检查）
function addTS(a: number, b: number): number {
    return a + b;
}

addTS(5, "3"); // 编译错误：参数类型不匹配

// 合法的 JavaScript，也是合法的 TypeScript
const message = "Hello, World!";
console.log(message);

// TypeScript 添加的类型注解在编译时会被移除
const count: number = 42; // 编译后：const count = 42;

// 1. 基础类型
let isDone: boolean = false;
let decimal: number = 6;
let color: string = "blue";

// 2. 数组和元组
let list: number[] = [1, 2, 3];
let tuple: [string, number] = ["hello", 10];

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

// 4. 任意类型和未知类型
let notSure: any = 4;
notSure = "maybe a string";
notSure = false;

let uncertain: unknown = 4;
uncertain = "hello";
// uncertain.toFixed(); // 错误：需要类型断言

// 5. 空和未定义
let u: undefined = undefined;
let n: null = null;

// 6. 联合类型
let id: string | number;
id = "123";  // OK
id = 123;    // OK
// id = true; // 错误

// 7. 类型别名
type UserID = string | number;
let userId: UserID = "user-123";

// 8. 接口
interface Person {
    name: string;
    age: number;
    email?: string; // 可选属性
}

const person: Person = {
    name: "Alice",
    age: 30
};

// 类
class Animal {
    // 属性
    private name: string;

    // 构造函数
    constructor(name: string) {
        this.name = name;
    }

    // 方法
    public move(distance: number = 0): void {
        console.log(`${this.name} moved ${distance}m.`);
    }
}

// 继承
class Dog extends Animal {
    private breed: string;

    constructor(name: string, breed: string) {
        super(name);
        this.breed = breed;
    }

    public bark(): void {
        console.log("Woof! Woof!");
    }

    // 方法重写
    public move(distance: number = 5): void {
        console.log(`The ${this.breed} dog ${this.name} runs...`);
        super.move(distance);
    }
}

// 使用
const dog = new Dog("Buddy", "Golden Retriever");
dog.bark();  // "Woof! Woof!"
dog.move();  // "The Golden Retriever dog Buddy runs..." \n "Buddy moved 5m."

// 抽象类
abstract class Shape {
    abstract getArea(): number;

    display(): void {
        console.log(`Area: ${this.getArea()}`);
    }
}

class Circle extends Shape {
    constructor(private radius: number) {
        super();
    }

    getArea(): number {
        return Math.PI * this.radius ** 2;
    }
}

const circle = new Circle(5);
circle.display(); // "Area: 78.53981633974483"

// 接口
interface Printable {
    print(): void;
}

interface Loggable {
    log(message: string): void;
}

// 类实现多个接口
class Document implements Printable, Loggable {
    constructor(private content: string) {}

    print(): void {
        console.log(this.content);
    }

    log(message: string): void {
        console.log(`[LOG] ${message}: ${this.content}`);
    }
}

// 泛型
class Container<T> {
    constructor(private value: T) {}

    getValue(): T {
        return this.value;
    }

    setValue(newValue: T): void {
        this.value = newValue;
    }
}

// 使用泛型
const numberContainer = new Container<number>(42);
console.log(numberContainer.getValue()); // 42

const stringContainer = new Container<string>("Hello");
console.log(stringContainer.getValue()); // "Hello"

// 泛型函数
function identity<T>(arg: T): T {
    return arg;
}

const output1 = identity<string>("myString"); // 类型为 string
const output2 = identity<number>(100);        // 类型为 number
const output3 = identity("myString");         // 类型推断为 string

// math.ts - 导出模块
export function add(x: number, y: number): number {
    return x + y;
}

export function multiply(x: number, y: number): number {
    return x * y;
}

export const PI = 3.14159;

// 默认导出
export default class Calculator {
    static add(x: number, y: number): number {
        return x + y;
    }
}

// app.ts - 导入模块
import { add, multiply, PI } from './math';
import Calculator from './math';

console.log(add(2, 3));           // 5
console.log(multiply(2, 3));      // 6
console.log(PI);                  // 3.14159
console.log(Calculator.add(5, 3)); // 8

# 全局安装（推荐用于命令行使用）
npm install -g typescript

# 本地安装（项目依赖）
npm install --save-dev typescript

# 使用 yarn
yarn global add typescript
yarn add --dev typescript

# 使用 pnpm
pnpm add -g typescript
pnpm add --save-dev typescript

# 检查版本
tsc --version

# 或
npx tsc --version

{
  "compilerOptions": {
    "target": "es2016",                    // 编译目标版本
    "module": "commonjs",                  // 模块系统
    "lib": ["es6"],                        // 使用的库文件
    "outDir": "./dist",                    // 输出目录
    "rootDir": "./src",                    // 源代码目录
    "strict": true,                        // 启用所有严格类型检查选项
    "esModuleInterop": true,               // 兼容 CommonJS 和 ES 模块
    "skipLibCheck": true,                  // 跳过库文件类型检查
    "forceConsistentCasingInFileNames": true // 强制文件名大小写一致
  },
  "include": ["src/**/*"],                 // 包含的文件
  "exclude": ["node_modules", "dist"]      // 排除的文件
}

// 定义一个简单的函数
function greet(name: string): string {
    return `Hello, ${name}!`;
}

// 使用接口定义对象结构
interface Person {
    firstName: string;
    lastName: string;
    age?: number; // 可选属性
}

// 创建一个 Person 对象
const person: Person = {
    firstName: "John",
    lastName: "Doe",
    age: 30
};

// 使用泛型函数
function formatName<T extends Person>(person: T): string {
    return `${person.firstName} ${person.lastName}`;
}

// 主程序
function main(): void {
    // 基本类型使用
    const message: string = greet("TypeScript");
    console.log(message); // "Hello, TypeScript!"

    // 对象使用
    console.log(`Person: ${formatName(person)}`); // "Person: John Doe"

    // 数组和循环
    const numbers: number[] = [1, 2, 3, 4, 5];
    const doubled = numbers.map(n => n * 2);
    console.log(`Doubled numbers: ${doubled}`); // "Doubled numbers: 2,4,6,8,10"

    // 类使用
    class Greeter {
        constructor(private greeting: string) {}

        greet(): void {
            console.log(this.greeting);
        }
    }

    const greeter = new Greeter("Hello from class!");
    greeter.greet(); // "Hello from class!"
}

// 执行主程序
main();

# 使用 tsc 命令编译
npx tsc

# 或指定配置文件
npx tsc --project tsconfig.json

# 监视模式（自动重新编译）
npx tsc --watch

# 运行编译后的 JavaScript
node dist/hello.js

Hello, TypeScript!
Person: John Doe
Doubled numbers: 2,4,6,8,10
Hello from class!