TS-语法介绍

1. 基本语法

变量声明

TypeScript 中的变量声明方式有 let、const 和 var，推荐使用 let 和 const。

let isDone: boolean = false;
const PI: number = 3.14;

函数

函数声明与 JavaScript 类似，但可以指定参数和返回值类型。

function add(x: number, y: number): number {
    return x + y;
}

解构赋值

解构赋值允许从数组或对象中提取值，分别赋给不同的变量。

let [a, b] = [1, 2];
let { name, age } = { name: "John", age: 30 };

展开运算符

展开运算符可以用于数组和对象。

let arr = [1, 2, 3];
let newArr = [...arr, 4, 5];

let obj = { name: "John", age: 30 };
let newObj = { ...obj, location: "USA" };

2. 类型系统

基本类型

TypeScript 提供了丰富的基本类型，包括 boolean、number、string、array、tuple、enum、any、void、null、undefined 和 never。

let isDone: boolean = false;
let age: number = 30;
let userName: string = "John";
let numbers: number[] = [1, 2, 3];
let tuple: [string, number] = ["John", 30];
enum Color {Red, Green, Blue}
let color: Color = Color.Green;

联合类型

联合类型表示一个值可以是几种类型之一。

let value: string | number;
value = "Hello";
value = 42;

交叉类型

交叉类型将多个类型合并为一个类型，包含了所需的所有类型特性。

interface Person {
    name: string;
}

interface Employee {
    employeeId: number;
}

type EmployeePerson = Person & Employee;

let emp: EmployeePerson = {
    name: "John",
    employeeId: 1234
};

类型别名

类型别名可以为任意类型创建新名称。

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

function getName(n: NameOrResolver): Name {
    if (typeof n === "string") {
        return n;
    } else {
        return n();
    }
}

类型断言

类型断言有两种形式：尖括号语法和 as 语法。

let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;

let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

3. 接口

接口用于定义对象的类型。

interface Person {
    name: string;
    age: number;
}

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

接口还可以描述函数类型和可索引类型。

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

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

4. 类

类是 TypeScript 中的核心概念，用于定义对象的蓝图。

class Person {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    greet() {
        console.log(`Hello, my name is ${this.name}`);
    }
}

let john = new Person("John");
john.greet();

继承

类可以通过继承来复用代码。

class Employee extends Person {
    employeeId: number;
    constructor(name: string, employeeId: number) {
        super(name);
        this.employeeId = employeeId;
    }
    work() {
        console.log(`${this.name} is working`);
    }
}

let emp = new Employee("John", 1234);
emp.greet();
emp.work();

接口与类

类可以实现接口，从而强制类遵循接口的结构。

interface IPerson {
    name: string;
    greet(): void;
}

class Person implements IPerson {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    greet() {
        console.log(`Hello, my name is ${this.name}`);
    }
}

修饰符

TypeScript 支持访问修饰符：public（默认）、private 和 protected。

class Person {
    public name: string;
    private age: number;
    protected gender: string;
    constructor(name: string, age: number, gender: string) {
        this.name = name;
        this.age = age;
        this.gender = gender;
    }
}

5. 泛型

泛型使得函数和类可以处理不特定的类型，从而更具复用性。

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

let output1 = identity<string>("myString");
let output2 = identity<number>(100);

泛型类和泛型接口也广泛应用于 TypeScript。

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

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

6. 模块

模块是 TypeScript 中组织代码的主要方式，使用 import 和 export 关键字。

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

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

7. 命名空间

命名空间用于在一个文件中组织代码，防止全局作用域污染。

namespace Validation {
    export interface StringValidator {
        isAcceptable(s: string): boolean;
    }

    export const lettersRegexp = /^[A-Za-z]+$/;
}

// 使用命名空间
let validator: Validation.StringValidator;
validator = { isAcceptable: s => Validation.lettersRegexp.test(s) };

8. 装饰器

装饰器是一种特殊的声明，附加在类声明、方法、访问符、属性或参数上。需要在 tsconfig.json 中启用 experimentalDecorators。

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}`;
    }
}

总结

TypeScript 提供了丰富的语法特性，使得 JavaScript 的开发更具类型安全性和可维护性。从基本语法到高级特性，掌握这些语法特性可以极大提升开发效率和代码质量。希望这篇文章能帮助你全面理解和使用 TypeScript。