以下是包含注释的 TypeScript 核心概念示例:
1. 基本类型
TypeScript 提供了一些基本的类型,可以为变量、函数参数和函数返回值指定类型。
// 声明一个布尔类型的变量
let isDone: boolean = false;
// 声明一个数字类型的变量
let decimal: number = 6;
// 声明一个字符串类型的变量
let color: string = "blue";
// 声明一个数组类型的变量
let list: number[] = [1, 2, 3];
// 声明一个元组类型的变量,包含一个字符串和一个数字
let x: [string, number];
x = ["hello", 10]; // 正确的初始化
// 声明一个枚举类型的变量
enum Color {Red, Green, Blue}
let c: Color = Color.Green;
// 声明一个 any 类型的变量,可以赋予任意类型的值
let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean
2. 接口 (Interface)
接口用于定义对象的类型。
// 定义一个接口,用于描述一个人的类型
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)); // 输出:Hello, Jane Doe
3. 类 (Class)
TypeScript 支持类和继承,允许你使用面向对象编程(OOP)。
// 定义一个 Animal 类
class Animal {
// 私有属性 name
private name: string;
// 构造函数,用于初始化 name 属性
constructor(theName: string) {
this.name = theName;
}
// 方法 move,打印动物移动的距离
move(distanceInMeters: number = 0) {
console.log(`${this.name} moved ${distanceInMeters}m.`);
}
}
// 定义一个 Dog 类,继承自 Animal 类
class Dog extends Animal {
// 方法 bark,打印 "Woof! Woof!"
bark() {
console.log("Woof! Woof!");
}
}
// 创建一个 Dog 的实例
let dog = new Dog("Rex");
dog.bark(); // 输出:Woof! Woof!
dog.move(10); // 输出:Rex moved 10m.
4. 泛型 (Generics)
泛型允许你创建可重用的组件,使组件可以适用于多个类型。
// 定义一个泛型函数 identity,返回传入的参数
function identity<T>(arg: T): T {
return arg;
}
// 使用泛型函数,传入字符串类型
let output1 = identity<string>("myString"); // 类型为 string
// 使用泛型函数,传入数字类型
let output2 = identity<number>(42); // 类型为 number
5. 枚举 (Enum)
枚举是一种常见的类型,使用枚举可以为一组相关的值赋予友好的名字。
// 定义一个 Direction 枚举
enum Direction {
Up = 1,
Down,
Left,
Right
}
// 使用枚举类型的变量
let dir: Direction = Direction.Up;
console.log(dir); // 输出:1
6. 类型断言 (Type Assertions)
类型断言可以告诉编译器将某个值视为特定的类型。
// 定义一个 any 类型的变量
let someValue: any = "this is a string";
// 使用类型断言,将 someValue 视为 string 类型
let strLength: number = (someValue as string).length;
7. 联合类型 (Union Types)
联合类型表示一个值可以是几种类型之一。
// 定义一个联合类型的变量,可以是 string 或 number 类型
let value: string | number;
value = "Hello"; // 正确
value = 123; // 也正确
// 定义一个函数,参数可以是 string 或 number 类型
function printId(id: number | string) {
if (typeof id === "string") {
// 如果 id 是字符串类型,打印大写形式
console.log("ID: " + id.toUpperCase());
} else {
// 如果 id 是数字类型,直接打印
console.log("ID: " + id);
}
}
8. 交叉类型 (Intersection Types)
交叉类型将多个类型合并为一个类型。
// 定义一个接口,用于处理错误
interface ErrorHandling {
success: boolean;
error?: { message: string };
}
// 定义一个接口,用于描述艺术品数据
interface ArtworksData {
artworks: { title: string }[];
}
// 交叉类型,将两个接口合并为一个类型
type ArtworksResponse = ArtworksData & ErrorHandling;
// 创建一个符合交叉类型的对象
let response: ArtworksResponse = {
success: true,
artworks: [{ title: "Mona Lisa" }]
};
9. 类型别名 (Type Aliases)
类型别名可以为一个类型创建一个新的名字。
// 定义一个字符串类型的别名
type Name = string;
// 定义一个返回字符串的函数类型别名
type NameResolver = () => string;
// 定义一个联合类型别名,可以是 Name 或 NameResolver
type NameOrResolver = Name | NameResolver;
// 定义一个函数,根据类型返回字符串
function getName(n: NameOrResolver): Name {
if (typeof n === "string") {
return n;
} else {
return n();
}
}
10. 命名空间 (Namespace)
命名空间用于组织代码,以避免命名冲突。
// 定义一个命名空间 Validation
namespace Validation {
// 定义一个接口,用于字符串验证
export interface StringValidator {
isAcceptable(s: string): boolean;
}
// 定义一个正则表达式,用于字母验证
const lettersRegexp = /^[A-Za-z]+$/;
// 实现 StringValidator 接口的类
export class LettersOnlyValidator implements StringValidator {
isAcceptable(s: string) {
return lettersRegexp.test(s);
}
}
}
// 使用命名空间中的类和接口
let validator = new Validation.LettersOnlyValidator();
console.log(validator.isAcceptable("Hello")); // true
11. 模块 (Modules)
模块用于将代码分割成多个文件,并通过 import
和 export
进行导入和导出。
// math.ts
// 导出一个加法函数
export function add(x: number, y: number): number {
return x + y;
}
// main.ts
// 导入加法函数
import { add } from "./math";
console.log(add(1, 2)); // 输出:3
这些示例涵盖了 TypeScript 的核心概念,并通过注释帮助理解每个示例的具体功能和用途。通过这些示例,你可以更快地掌握 TypeScript 的基本用法和特性。