TypeScript 入门

TypeScript 是一种由 Microsoft 开发的、支持面向对象的 JavaScript 的超集语言。它在 JavaScript 的基础上添加了类型系统、类、接口等特点，使得代码更加严密和可读性更高。它可以编译成纯 JavaScript 代码，可在任何浏览器、操作系统和主机上运行。

TypeScript 安装

安装 TypeScript 可以使用 npm 工具。

npm install -g typescript

安装完成以后，使用 tsc 命令行工具编译 TypeScript 文件。比如：

tsc hello.ts

上述命令将会把 TypeScript 文件 hello.ts 编译成 JavaScript 代码输出到同名文件 hello.js 中。

TypeScript 基本类型

TypeScript 中的基本类型包括：数字、字符串、布尔、空值、任意值、空对象和未定义。

let num: number = 1; // 数字
let str: string = 'hello'; // 字符串
let bool: boolean = true; // 布尔
let nullVar: null = null; // 空值
let anyVar: any = 'anything'; // 任意值
let voidVar: void = undefined; // 空对象
let undefinedVar: undefined = undefined; // 未定义

TypeScript 接口

TypeScript 中的接口可以定义对象、类、函数等类型的结构和约束。

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

function sayHello(person: Person): void {
    console.log(`Hello, ${person.name}, you are ${person.age} years old.`);
}

let Dog = {
    name: 'Wangcai',
    age: 2
};

sayHello(Dog); // 编译报错，缺少 sex 属性

上述代码定义了一个 Person 接口，它有 name 和 age 两个属性， sex 属性是可选的。然后定义了一个 sayHello 函数，它的参数必须是 Person 类型。最后创建了一个 Dog 对象，但缺少了 sex 属性，所以编译会报错。

TypeScript 类

TypeScript 支持类，让开发者可以使用面向对象的编程方式开发应用。

class Animal {
    name: string;
    age: number;

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

    sayHello() {
        console.log(`I am ${this.name}, I am ${this.age} years old.`);
    }
}

let cat = new Animal('Tom', 3);
cat.sayHello(); // 输出 "I am Tom, I am 3 years old."

let dog = new Animal('Wangcai', 2);
dog.sayHello(); // 输出 "I am Wangcai, I am 2 years old."

上述代码定义了一个 Animal 类，其有 name 和 age 两个属性和一个 sayHello 方法。然后创建了两个 Animal 对象，并调用了它的 sayHello 方法。

TypeScript 模块化

TypeScript 支持模块化开发。模块化可以降低代码的耦合性，提高代码的复用性和可维护性。

// logo.ts
export function displayLogo() {
    console.log('This is my beautiful logo.');
}

// index.ts
import { displayLogo } from './logo';

displayLogo(); // 输出 "This is my beautiful logo."

上述代码分别定义了两个 TypeScript 模块，一个是 logo 模块，它定义了一个 displayLogo 函数，并使用 export 关键字将其导出；另一个是 index 模块，它使用 import 引入了 logo 模块中的 displayLogo 函数，并调用它。