2024年7月29日 作者 zeroheart

TypeScript 快速入门

安装 TypeScript

首先,你需要安装 TypeScript。你可以使用 npm 来安装 TypeScript:

bash

复制代码

npm install -g typescript

编译 TypeScript

TypeScript 文件以 .ts 为扩展名。要将 TypeScript 文件编译为 JavaScript 文件,可以使用 tsc 命令:

bash

复制代码

tsc filename.ts

基本类型

TypeScript 提供了多种基本类型,类似于 JavaScript,但增加了类型注释。

typescript

复制代码

let isDone: boolean = false; let age: number = 30; let userName: string = "John"; let list: number[] = [1, 2, 3]; let listGeneric: Array<number> = [1, 2, 3]; let tuple: [string, number] = ["hello", 10];

枚举

枚举类型用于定义数值集合。

typescript

复制代码

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

Any 和 Unknown

any 类型可以是任何类型,unknown 类型也是任何类型但更安全。

typescript

复制代码

let notSure: any = 4; notSure = "maybe a string"; notSure = false; let uncertain: unknown = 4; uncertain = "could be a string too";

Void, Null 和 Undefined

void 类型通常用于函数没有返回值时。

typescript

复制代码

function warnUser(): void { console.log("This is my warning message"); } let u: undefined = undefined; let n: null = null;

函数

TypeScript 允许为函数的参数和返回值指定类型。

typescript

复制代码

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

可选参数和默认参数

typescript

复制代码

function buildName(firstName: string, lastName?: string): string { return firstName + " " + (lastName || ""); } function buildNameWithDefault(firstName: string, lastName: string = "Smith"): string { return firstName + " " + lastName; }

接口

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

typescript

复制代码

interface Person { firstName: string; lastName: string; } function greeter(person: Person) { return "Hello, " + person.firstName + " " + person.lastName; } let user = { firstName: "Jane", lastName: "Doe" }; console.log(greeter(user));

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

typescript

复制代码

class Animal { private name: string; constructor(theName: string) { this.name = theName; } move(distanceInMeters: number = 0) { console.log(`${this.name} moved ${distanceInMeters}m.`); } } let dog = new Animal("Dog"); dog.move(10);

继承

类可以继承其他类。

typescript

复制代码

class Dog extends Animal { constructor(name: string) { super(name); } bark() { console.log("Woof! Woof!"); } } let dog = new Dog("Rex"); dog.bark(); dog.move(10);

泛型

泛型用于创建可重用的组件。

typescript

复制代码

function identity<T>(arg: T): T { return arg; } let output = identity<string>("myString"); // 类型参数明确定义 let output2 = identity("myString"); // 类型参数推断

模块

TypeScript 支持 ES6 模块语法。

typescript

复制代码

// math.ts export function add(x: number, y: number): number { return x + y; } // main.ts import { add } from './math'; console.log(add(5, 3));

类型别名

类型别名用于为类型创建新名称。

typescript

复制代码

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

类型断言

类型断言用于告诉编译器某个值的具体类型。

typescript

复制代码

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

类型推断

TypeScript 会根据变量的值推断其类型。

typescript

复制代码

let x = 3; // x 被推断为 number

联合类型

联合类型允许一个变量有多种类型。

typescript

复制代码

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

交叉类型

交叉类型用于将多个类型合并为一个类型。

typescript

复制代码

interface A { a: string; } interface B { b: number; } let ab: A & B = { a: "foo", b: 42 };

类型保护

类型保护用于在运行时检查类型。

typescript

复制代码

function isString(x: any): x is string { return typeof x === "string"; } function example(x: string | number) { if (isString(x)) { console.log(x.toUpperCase()); // 在这里 x 是 string } else { console.log(x.toFixed(2)); // 在这里 x 是 number } }