TypeScript使用笔记

1. TypeScript简介

TypeScript是JavaScript的超集，添加了类型系统和对ES6+特性的支持，由Microsoft开发和维护。它可以编译成纯JavaScript，在任何浏览器、任何操作系统上运行。

1.1 TypeScript的优势

• 静态类型检查：在编译时发现错误，而不是在运行时
• 更好的IDE支持：代码补全、接口提示、跳转到定义等
• 更易于维护：类型系统使代码更加自文档化
• 更好的团队协作：明确的接口定义使协作更加顺畅

2. 基础类型

2.1 基本类型注解

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

// 数字
let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

// 字符串
let color: string = "blue";
let sentence: string = `The color is ${color}`;

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

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

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

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

// 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);
}

2.2 类型断言

let someValue: any = "this is a string";

// 方式1：尖括号语法
let strLength: number = (<string>someValue).length;

// 方式2：as语法（在JSX中必须使用这种方式）
let strLength2: number = (someValue as string).length;

3. 接口

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

interface User {
    name: string;
    id: number;
    email?: string; // 可选属性
    readonly createdAt: Date; // 只读属性
}

function createUser(user: User): User {
    return user;
}

let user = createUser({
    name: "张三",
    id: 1,
    createdAt: new Date()
});

3.1 函数类型接口

interface SearchFunc {
    (source: string, subString: string): boolean;
}

let mySearch: SearchFunc = function(src, sub) {
    return src.search(sub) > -1;
};

3.2 可索引类型

interface StringArray {
    [index: number]: string;
}

let myArray: StringArray = ["Bob", "Fred"];
let myStr: string = myArray[0];

4.类

TypeScript支持基于类的面向对象编程特性。

class Person {
    private name: string;
    protected age: number;
    
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
    
    greet(): string {
        return `Hello, my name is ${this.name} and I am ${this.age} years old`;
    }
}

class Employee extends Person {
    private department: string;
    
    constructor(name: string, age: number, department: string) {
        super(name, age);
        this.department = department;
    }
    
    introduce(): string {
        return `${super.greet()} and I work in ${this.department}`;
    }
}

let howard = new Employee("Howard", 42, "Sales");
console.log(howard.introduce());

5.泛型

泛型允许创建可重用的组件，一个组件可以支持多种类型的数据。

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

// 显式指定类型参数
let output1 = identity<string>("myString");

// 类型推断
let output2 = identity("myString");

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

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

6.高级类型

6.1 联合类型

function padLeft(value: string, padding: string | number) {
    // ...
}

6.2 交叉类型

interface ErrorHandling {
    success: boolean;
    error?: { message: string };
}

interface ArtworksData {
    artworks: { title: string }[];
}

type ArtworksResponse = ArtworksData & ErrorHandling;

6.3 类型别名

type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;

7.实用技巧

7.1 严格空值检查

// 开启 --strictNullChecks
let s = "foo";
s = null; // 错误，'null'不能赋值给'string'
let sn: string | null = "bar";
sn = null; // 可以

// 可选参数和可选属性
function f(x?: number) {
    // x的类型是 number | undefined
}

7.2 非空断言操作符

function validateEntity(e?: Entity) {
    // 使用!来断言e是非null和非undefined的
    console.log(e!.name);
}

8.配置文件

一个基本的tsconfig.json配置：

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