TypeScript 是 JavaScript 的超集，为 JavaScript 添加了静态类型检查和其他高级特性。它由微软开发，已经成为现代前端开发的标配工具。今天我们就来彻底搞懂 TypeScript 的核心概念和用法！👇
1. TypeScript 是什么？
TypeScript 是一种 静态类型检查 的编程语言，它扩展了 JavaScript 的功能，提供了以下特性：
- 静态类型检查：在编译时检查类型错误。
- 面向对象编程：支持类、接口、继承等特性。
- 工具支持：提供强大的代码补全、重构和导航功能。
2. TypeScript 的核心概念
2.1 类型注解
TypeScript 允许为变量、函数参数和返回值添加类型注解。
示例：
let count: number = 0; // 变量类型注解
function add(a: number, b: number): number { // 函数参数和返回值类型注解
return a + b;
}
2.2 基础类型
TypeScript 支持 JavaScript 的所有基础类型，并扩展了一些新类型。
示例：
let isDone: boolean = false;
let age: number = 30;
let name: string = "Alice";
let list: number[] = [1, 2, 3]; // 数组
let tuple: [string, number] = ["Alice", 30]; // 元组
let notSure: any = 4; // 任意类型
let u: undefined = undefined; // undefined
let n: null = null; // null
2.3 接口（Interface）
接口用于定义对象的形状。
示例：
interface User {
name: string;
age: number;
}
const user: User = {
name: "Alice",
age: 30,
};
2.4 类（Class）
TypeScript 支持面向对象编程，提供了类、继承、修饰符等特性。
示例：
class Animal {
name: string;
constructor(name: string) {
this.name = name;
}
move(distance: number = 0) {
console.log(`${this.name} moved ${distance}m.`);
}
}
class Dog extends Animal {
bark() {
console.log("Woof! Woof!");
}
}
const dog = new Dog("Buddy");
dog.bark();
dog.move(10);
2.5 泛型（Generics）
泛型用于创建可重用的组件。
示例：
function identity<T>(arg: T): T {
return arg;
}
let output = identity<string>("Hello");
2.6 枚举（Enum）
枚举用于定义一组命名的常量。
示例：
enum Color {
Red,
Green,
Blue,
}
let c: Color = Color.Green;
2.7 联合类型和交叉类型
- 联合类型：表示一个值可以是多种类型之一。
- 交叉类型：表示一个值必须同时满足多种类型。
示例：
let value: string | number; // 联合类型
value = "Hello";
value = 42;
interface A {
a: string;
}
interface B {
b: number;
}
type C = A & B; // 交叉类型
const obj: C = { a: "Hello", b: 42 };
3. TypeScript 的高级特性
3.1 类型推断
TypeScript 可以根据上下文自动推断变量的类型。
示例：
let x = 3; // TypeScript 推断 x 的类型为 number
3.2 类型断言
类型断言用于告诉 TypeScript 某个值的具体类型。
示例：
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;
3.3 装饰器（Decorators）
装饰器用于扩展类、方法、属性或参数的行为。
示例：
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;
}
}
3.4 命名空间（Namespace）
命名空间用于组织代码，避免全局命名冲突。
示例：
namespace Validation {
export interface StringValidator {
isAcceptable(s: string): boolean;
}
}
4. TypeScript 的工具支持
4.1 编译器
TypeScript 提供了 tsc 编译器，用于将 TypeScript 代码编译为 JavaScript。
示例：
tsc app.ts
4.2 配置文件
通过 tsconfig.json 文件配置 TypeScript 编译选项。
示例：
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"strict": true
}
}
4.3 IDE 支持
TypeScript 提供了强大的 IDE 支持，包括代码补全、重构、导航等功能。
5. 总结
- TypeScript：是 JavaScript 的超集，添加了静态类型检查和其他高级特性。
- 核心概念：类型注解、接口、类、泛型、枚举、联合类型、交叉类型。
- 高级特性：类型推断、类型断言、装饰器、命名空间。
- 工具支持：编译器、配置文件、IDE 支持。
如果你对 TypeScript 还有疑问，欢迎在评论区讨论！💬
