TypeScript简介与设计目标

作者：陈川阅读数：61458人阅读分类： TypeScript

TypeScript简介

TypeScript是微软开发的开源编程语言，它是JavaScript的超集，添加了静态类型系统和其他特性。TypeScript代码会被编译成纯JavaScript，可以在任何支持JavaScript的环境中运行。TypeScript的设计目标是解决JavaScript在大型应用开发中的痛点，同时保持与现有JavaScript生态的兼容性。

// 一个简单的TypeScript示例
interface User {
  name: string;
  age: number;
}

function greet(user: User): string {
  return `Hello, ${user.name}! You are ${user.age} years old.`;
}

const currentUser: User = { name: "Alice", age: 30 };
console.log(greet(currentUser));

静态类型系统

TypeScript最显著的特点是引入了静态类型系统。与JavaScript的动态类型不同，TypeScript允许开发者在编码阶段就定义变量、函数参数和返回值的类型。这种类型检查发生在编译时，而不是运行时。

// 类型注解示例
let isDone: boolean = false;
let decimal: number = 6;
let color: string = "blue";

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

// 元组类型
let tuple: [string, number];
tuple = ["hello", 10]; // 正确
tuple = [10, "hello"]; // 错误

类型推断与联合类型

TypeScript具有强大的类型推断能力，即使没有显式类型注解，也能根据上下文推断出变量类型。此外，TypeScript支持联合类型，允许一个变量具有多种可能的类型。

// 类型推断示例
let x = 3; // TypeScript推断x为number类型
x = "hello"; // 错误，不能将string赋值给number

// 联合类型
let id: string | number;
id = "abc123"; // 正确
id = 123; // 正确
id = true; // 错误

// 类型守卫
function printId(id: string | number) {
  if (typeof id === "string") {
    console.log(id.toUpperCase());
  } else {
    console.log(id.toFixed(2));
  }
}

接口与类型别名

TypeScript提供了接口(interface)和类型别名(type)两种方式来定义复杂的数据结构。接口更适合描述对象的形状，而类型别名可以表示更广泛的类型。

// 接口示例
interface Point {
  x: number;
  y: number;
  z?: number; // 可选属性
  readonly id: string; // 只读属性
}

function drawPoint(point: Point) {
  console.log(`Drawing at (${point.x}, ${point.y})`);
}

// 类型别名示例
type StringOrNumber = string | number;
type Callback<T> = (data: T) => void;
type Tree<T> = {
  value: T;
  left?: Tree<T>;
  right?: Tree<T>;
};

类与面向对象编程

TypeScript对JavaScript的类语法进行了扩展，增加了访问修饰符、抽象类、接口实现等特性，使其更适合大型面向对象编程。

// 类示例
class Animal {
  protected name: string; // 受保护的属性
  
  constructor(name: string) {
    this.name = name;
  }
  
  move(distance: number = 0) {
    console.log(`${this.name} moved ${distance}m.`);
  }
}

class Dog extends Animal {
  private breed: string;
  
  constructor(name: string, breed: string) {
    super(name);
    this.breed = breed;
  }
  
  bark() {
    console.log("Woof! Woof!");
  }
  
  move(distance = 5) {
    super.move(distance);
  }
}

const dog = new Dog("Buddy", "Golden Retriever");
dog.bark();
dog.move();

泛型编程

TypeScript支持泛型，允许创建可重用的组件，这些组件可以支持多种类型而不丢失类型安全性。

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

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

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

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

let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = (x, y) => x + y;

模块系统

TypeScript支持ES模块和CommonJS模块系统，帮助开发者组织大型代码库。

// math.ts
export function add(x: number, y: number): number {
  return x + y;
}

export const PI = 3.1415;

// app.ts
import { add, PI } from "./math";
console.log(add(2, 3));
console.log(PI);

// 默认导出
export default class Calculator {
  // ...
}

import Calc from "./Calculator";

装饰器与元数据

TypeScript支持装饰器语法，这是一种特殊类型的声明，可以附加到类声明、方法、访问符、属性或参数上。

// 类装饰器
function sealed(constructor: Function) {
  Object.seal(constructor);
  Object.seal(constructor.prototype);
}

@sealed
class Greeter {
  greeting: string;
  
  constructor(message: string) {
    this.greeting = message;
  }
  
  greet() {
    return "Hello, " + this.greeting;
  }
}

// 方法装饰器
function enumerable(value: boolean) {
  return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    descriptor.enumerable = value;
  };
}

class Person {
  @enumerable(false)
  greet() {
    console.log("Hello!");
  }
}

工具类型与高级类型

TypeScript提供了一系列内置工具类型，以及高级类型特性，使类型系统更加灵活强大。

// 内置工具类型
interface Todo {
  title: string;
  description: string;
  completed: boolean;
}

type TodoPreview = Pick<Todo, "title" | "completed">;
type TodoOmit = Omit<Todo, "description">;
type PartialTodo = Partial<Todo>;
type ReadonlyTodo = Readonly<Todo>;

// 条件类型
type NonNullable<T> = T extends null | undefined ? never : T;
type Flatten<T> = T extends Array<infer U> ? U : T;

// 映射类型
type OptionsFlags<T> = {
  [P in keyof T]: boolean;
};

类型声明与第三方库

TypeScript通过声明文件(.d.ts)来描述JavaScript库的类型信息，使得开发者可以在TypeScript中使用现有的JavaScript库。

// 自定义类型声明示例
declare module "my-module" {
  export function doSomething(): void;
  export const value: number;
}

// 使用三斜线指令引用其他声明文件
/// <reference types="node" />

// 使用@types获取类型定义
// npm install --save-dev @types/lodash
import * as _ from "lodash";
_.chunk([1, 2, 3, 4], 2);

编译器配置

TypeScript通过tsconfig.json文件配置编译器选项，控制编译过程和类型检查行为。

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

与JavaScript互操作

TypeScript设计时考虑了与现有JavaScript代码的互操作性，提供了多种方式来处理无类型信息的JavaScript代码。

// 类型断言
let someValue: any = "this is a string";
let strLength1: number = (<string>someValue).length; // 尖括号语法
let strLength2: number = (someValue as string).length; // as语法

// 非空断言操作符
function liveDangerously(x?: number | null) {
  console.log(x!.toFixed()); // 告诉编译器x不会是null/undefined
}

// 类型保护
function isString(test: any): test is string {
  return typeof test === "string";
}