「TypeScript系列」TypeScript简介及基础语法

文章目录

一、TypeScript简介
二、TypeScript基础语法
- 1. 变量声明
- 2. 函数
- 3. 类
- 4. 接口
- 5. 类型别名
- 6. 泛型
- 7. 模块
- 8. 类型断言
三、TypeScript面向对象
- 1. 类（Class）
- 2. 继承（Inheritance）
- 3. 封装（Encapsulation）
- 4. 多态（Polymorphism）
四、相关链接

一、TypeScript简介

TypeScript 是 JavaScript 的一个超集，添加了静态类型系统和其他特性，如接口、枚举、泛型等。这些特性有助于在开发过程中捕获错误，并使代码更易于维护和理解。TypeScript 编译成纯 JavaScript，因此可以在任何支持 JavaScript 的环境中运行。

TypeScript 的一些主要特点：

静态类型：TypeScript 提供了静态类型系统，允许你为变量、函数参数和函数返回值指定类型。这有助于在编译时捕获类型错误，减少运行时错误。
接口：TypeScript 支持接口，这是一种定义对象形状的方式。接口可以确保类或其他对象具有特定的属性或方法。
枚举：TypeScript 的枚举类型提供了一种定义数值集合的方式。与在 JavaScript 中手动创建这样的集合相比，枚举类型提供了更好的可读性和安全性。
泛型：泛型允许你在编写代码时使用类型参数，这些参数将在代码实例化时被替换为具体的类型。这有助于编写可重用的组件，这些组件可以处理多种类型的数据。
类：TypeScript 提供了类（class）语法，用于定义对象的结构和行为。类可以包含属性（成员变量）、方法（成员函数）和构造函数等。
装饰器：装饰器是 TypeScript 的一种特殊声明，它可以被附加到类声明、方法、属性或参数上。装饰器使用 @expression 的形式，expression 必须求值为一个函数，它会在运行时被调用，被装饰的声明信息作为参数传入。
模块：TypeScript 支持 ES6 模块语法，允许你将代码拆分成可重用的模块。模块可以导入其他模块中导出的功能，并导出自己的功能供其他模块使用。
命名空间：TypeScript 的命名空间用于将相关的代码组织在一起，以避免命名冲突。命名空间可以包含类、接口、函数等。
JSX：TypeScript 支持 JSX，这是一种在 JavaScript 代码中嵌入 XML（或 HTML）的语法。JSX 使得在 React 等库中编写组件变得更加简单直观。
工具支持：TypeScript 提供了丰富的工具支持，如 IntelliSense（智能感知）和类型检查等，这些工具可以提高开发效率并减少错误。

二、TypeScript基础语法

TypeScript 是 JavaScript 的一个超集，它添加了静态类型系统和其他特性，使代码更加健壮和可维护。下面是一些 TypeScript 的基础语法及详细案例。

1. 变量声明

在 TypeScript 中，你可以为变量指定类型。

let isDone: boolean = false;
let decimal: number = 6;
let color: string = "blue";
let name: string | null = null; // 使用联合类型

// 使用数组类型
let list: number[] = [1, 2, 3];

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

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

2. 函数

函数可以带有参数，参数和返回值都可以指定类型。

function greet(name: string): string {
    return "Hello, " + name;
}

// 可选参数
function greetWithOptional(name: string, age?: number): string {
    let result = "Hello, " + name;
    if (age) {
        result += ", you are " + age + " years old.";
    }
    return result;
}

// 默认参数
function greetWithDefault(name: string, age: number = 25): string {
    return "Hello, " + name + ". You are " + age + " years old.";
}

3. 类

TypeScript 支持类，包括继承、构造函数、属性和方法。

class Animal {
    name: string;

    constructor(theName: string) { this.name = theName; }

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

class Dog extends Animal {
    bark() {
        console.log(`${this.name} says Woof!`);
    }
}

let myDog = new Dog("Mitzie");
myDog.bark();
myDog.move(10);

4. 接口

接口用于定义对象的形状。

interface Person {
    firstName: string;
    lastName: string;
    age?: number; // 可选属性
    greet(otherPerson: Person): void; // 方法
}

let customer: Person = {
    firstName: "Jane",
    lastName: "Doe",
    greet(otherPerson: Person) {
        console.log(`Hello, ${otherPerson.firstName} ${otherPerson.lastName}!`);
    }
};

customer.greet({ firstName: "Bob", lastName: "Smith" });

5. 类型别名

使用 type 关键字可以为类型创建别名。

type Name = string;
type NameOrNumber = string | number;
type Callback = () => void;

let myName: Name = "Alice";
let myNameOrAge: NameOrNumber = 42;
let myCallback: Callback = () => console.log("Hello!");

6. 泛型

泛型允许你在定义函数、接口或类时，使用类型参数。

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

let output = identity<string>("myString"); // 类型参数是 string
let output2 = identity(42); // 不需要显式指定类型参数，编译器可以推断出 T 是 number

7. 模块

使用模块来组织代码。

// myModule.ts
export function sayHello(name: string) {
    return "Hello, " + name;
}

// main.ts
import { sayHello } from './myModule';
console.log(sayHello("World"));

8. 类型断言

类型断言用于告诉 TypeScript 编译器：“我知道我在做什么，我确定这个值是这个类型。”

let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;
// 或者使用 as 语法
let strLength2: number = (someValue as string).length;

三、TypeScript面向对象

TypeScript 是一种面向对象的编程语言，因为它支持类（class）、接口（interface）、继承（inheritance）、封装（encapsulation）和多态（polymorphism）等面向对象编程（OOP）的核心概念。这些特性使得 TypeScript 非常适合构建可维护、可扩展和可重用的代码库。

TypeScript 中面向对象编程的一些核心概念：

1. 类（Class）

类是一种用户定义的数据类型，它拥有属性和方法。在 TypeScript 中，你可以使用 class 关键字来定义类。

class Animal {
    name: string;

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

    speak(): void {
        console.log(`${this.name} makes a noise.`);
    }
}

let dog = new Animal('Buddy');
dog.speak(); // 输出: Buddy makes a noise.

2. 继承（Inheritance）

继承允许一个类（子类或派生类）继承另一个类（父类或基类）的属性和方法。在 TypeScript 中，你可以使用 extends 关键字来实现继承。

class Dog extends Animal {
    bark(): void {
        console.log(`${this.name} says Woof!`);
    }
}

let myDog = new Dog('Spike');
myDog.speak(); // 继承自 Animal 的 speak 方法
myDog.bark(); // Dog 类特有的 bark 方法

3. 封装（Encapsulation）

封装是将对象的属性和方法组合成一个单独的单元，并通过接口与外部进行交互。在 TypeScript 中，封装是通过类的私有（private）和保护（protected）成员来实现的。

class Person {
    private _age: number;

    constructor(age: number) {
        this._age = age;
    }

    // 提供一个公有的 getter 方法来访问私有属性
    get age(): number {
        return this._age;
    }
}

let person = new Person(30);
console.log(person.age); // 访问公有的 getter 方法来获取私有属性
// console.log(person._age); // 这会报错，因为 _age 是私有的

4. 多态（Polymorphism）

多态是面向对象编程中的一个重要概念，它允许不同的对象对同一消息做出不同的响应。在 TypeScript 中，多态通常通过接口和类的继承来实现。

interface Shape {
    area(): number;
}

class Circle implements Shape {
    radius: number;

    constructor(radius: number) {
        this.radius = radius;
    }

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

class Rectangle implements Shape {
    width: number;
    height: number;

    constructor(width: number, height: number) {
        this.width = width;
        this.height = height;
    }

    area(): number {
        return this.width * this.height;
    }
}

function calculateTotalArea(shapes: Shape[]): number {
    let totalArea = 0;
    for (let shape of shapes) {
        totalArea += shape.area(); // 多态：不同的形状对象调用同一个 area 方法
    }
    return totalArea;
}

let circle = new Circle(5);
let rectangle = new Rectangle(4, 6);
console.log(calculateTotalArea([circle, rectangle])); // 输出总面积

在这个例子中，Shape 接口定义了一个 area 方法，Circle 和 Rectangle 类都实现了这个接口并提供了自己的 area 方法实现。这样，我们就可以在一个函数中接受一个 Shape 类型的数组，并调用每个形状的 area 方法来计算总面积，这就是多态的体现。