TypeScript 基础教程

TypeScript 是 JavaScript 的超集，为 JavaScript 添加了静态类型系统，帮助开发者在编码阶段捕获错误并提高代码质量。

安装和配置

通过 npm 安装 TypeScript：

npm install -g typescript

创建 tsconfig.json 配置文件：

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true
  }
}

基本类型

// 基本类型
let num: number = 42;
let str: string = "Hello, TypeScript";
let isTrue: boolean = true;

// 数组
let numbers: number[] = [1, 2, 3];
let fruits: Array<string> = ['apple', 'banana', 'orange'];

// 元组
let tuple: [string, number] = ['age', 30];

接口和类型

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

let user: Person = {
  name: "John Doe",
  age: 30
};

// 类型别名
type ID = string | number;

函数类型

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

// 箭头函数
const multiply = (x: number, y: number): number => x * y;

// 可选参数和默认参数
function greet(name: string, greeting?: string): string {
  return `${greeting || 'Hello'}, ${name}!`;
}

泛型

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

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

类和继承

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

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

枚举

enum Color {
  Red,
  Green,
  Blue
}

let c: Color = Color.Green;

高级类型

// 联合类型
type StringOrNumber = string | number;

// 交叉类型
type Employee = { name: string } & { id: number };

// 类型守卫
function isString(x: any): x is string {
  return typeof x === "string";
}

模块和命名空间

// 导出
export interface Calculator {
  add(x: number, y: number): number;
}

// 导入
import { Calculator } from './calculator';

装饰器

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

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

结论

TypeScript 通过引入静态类型系统，为 JavaScript 开发带来了更强的类型安全性和更好的开发体验。它提供了丰富的类型系统、接口、泛型等特性，使得大型应用的开发变得更加可靠和可维护。