TypeScript 是 JavaScript 的超集,增加了一些 JavaScript 中没有的特性,主要是为了提高代码的可维护性和开发效率。以下是一些 TypeScript 提供的主要特性,这些特性在原生 JavaScript 中是没有的:
1. 静态类型
TypeScript 最显著的特性是静态类型系统。你可以在编写代码时指定变量、函数参数和返回值的类型,这有助于在编译时捕捉错误。
let age: number = 25;
let name: string = "John Doe";
2. 接口
接口允许你定义对象的结构,并确保对象符合特定的形状。
interface Person {
name: string;
age: number;
}
let john: Person = {
name: "John Doe",
age: 30
};
3. 类型推断
TypeScript 可以自动推断变量的类型,即使你没有显式地声明类型。
let message = "Hello, world!"; // TypeScript 推断出 message 是 string 类型
4. 类型别名
类型别名允许你为复杂的类型创建简短的别名。
type Point = {
x: number;
y: number;
};
let point: Point = { x: 10, y: 20 };
5. 元组
元组允许你定义一个已知元素数量和类型的数组。
let tuple: [number, string] = [1, "hello"];
6. 枚举
枚举是一种定义命名常量的方式。
enum Color {
Red,
Green,
Blue
}
let color: Color = Color.Green;
7. 泛型
泛型允许你创建可重用的组件,这些组件可以与多种类型一起工作。
function identity<T>(arg: T): T {
return arg;
}
let output = identity<string>("myString");
8. 类和修饰符
TypeScript 扩展了 JavaScript 的类,增加了修饰符(如 public、private、protected)和抽象类。
class Animal {
private name: string;
constructor(name: string) {
this.name = name;
}
public move(distance: number): void {
console.log(`${this.name} moved ${distance} meters.`);
}
}
9. 命名空间和模块
TypeScript 支持命名空间和模块,以便更好地组织代码。
namespace MyNamespace {
export class MyClass {}
}
import { MyClass } from "./MyModule";
示例
命名空间
命名空间(Namespace)用于组织代码并避免命名冲突。在 TypeScript 中,命名空间使用 namespace 关键字定义。
示例:
namespace Geometry {
export namespace Area {
export function circle(radius: number): number {
return Math.PI * radius * radius;
}
export function rectangle(width: number, height: number): number {
return width * height;
}
}
}
// 使用命名空间中的函数
let circleArea = Geometry.Area.circle(5);
let rectangleArea = Geometry.Area.rectangle(10, 20);
console.log(Circle Area: ${circleArea}
);
console.log(Rectangle Area: ${rectangleArea}
);
在这个示例中,我们定义了一个 Geometry 命名空间,里面有一个子命名空间 Area,包含两个函数 circle 和 rectangle。通过 Geometry.Area.circle 和 Geometry.Area.rectangle 可以访问这些函数。
模块
模块(Module)是 TypeScript 中的文件级作用域代码组织方式。模块使用 import 和 export 关键字来导入和导出模块中的内容。
示例:
文件:mathUtils.ts
export function add(a: number, b: number): number {
return a + b;
}
export function subtract(a: number, b: number): number {
return a - b;
}
文件:main.ts
import { add, subtract } from './mathUtils';
let sum = add(10, 20);
let difference = subtract(30, 10);
console.log(`Sum: ${sum}`);
console.log(`Difference: ${difference}`);
在这个示例中,我们有两个文件:mathUtils.ts 和 main.ts。mathUtils.ts 文件导出了两个函数 add 和 subtract,而 main.ts 文件导入了这两个函数并使用它们。
10. 装饰器
装饰器是一种特殊的声明,它可以附加到类声明、方法、访问符、属性或参数上,可以修改类的行为。
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;
}
}
11. 非空断言操作符
非空断言操作符 (!
) 可以用于告诉 TypeScript 变量或属性在使用时不会是 null
或 undefined
。
let name: string | undefined;
name!.toUpperCase(); // TypeScript 不会报错
这些特性使得 TypeScript 在大型项目中非常有用,因为它们可以提高代码的可读性、可维护性和可靠性。