获课：789it.top/14278/
获取ZY↑↑方打开链接↑↑
解锁 TypeScript 核心基础知识
引言
TypeScript 是 JavaScript 的一个超集，添加了可选的静态类型和基于类的面向对象编程。它由微软开发并维护，旨在开发大型应用时提供更好的工具和结构。本文将深入探讨 TypeScript 的核心基础知识，帮助你快速上手并理解其强大功能。
1. 类型系统
1.1 基本类型
TypeScript 支持 JavaScript 的所有基本数据类型，并增加了额外的类型。
- boolean: 表示 true 或 false。
- number: 表示整数或浮点数。
- string: 表示文本数据。
- array: 表示元素类型相同的数组。
- tuple: 表示已知元素数量和类型的数组。
- enum: 表示一组命名的常量。
- any: 表示任意类型，绕过类型检查。
- void: 表示没有任何类型，通常用于函数返回值。
- null 和 undefined: 表示 null 和 undefined 类型。
- never: 表示永不存在的值的类型。
1.2 类型注解
TypeScript 允许为变量、函数参数和返回值添加类型注解，以增强代码的可读性和可维护性。
typescript
复制
let isDone: boolean = false;let count: number = 10;let name: string = "TypeScript";function greet(name: string): string { return `Hello, ${name}`;}
1.3 类型推断
TypeScript 具有强大的类型推断能力，即使没有显式类型注解，也能推断出变量的类型。
typescript
复制
let num = 10; // TypeScript 推断 num 为 number 类型num = "hello"; // 错误：不能将类型“string”分配给类型“number”
2. 接口和类
2.1 接口
接口用于定义对象的形状，包括属性和方法。
typescript
复制
interface Person { firstName: string; lastName: string; age?: number; // 可选属性}function greet(person: Person) { return `Hello, ${person.firstName} ${person.lastName}`;}
2.2 类
TypeScript 支持基于类的面向对象编程，包括继承、封装和多态。
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('Rex');dog.bark();dog.move(10);
3. 高级类型
3.1 联合类型和交叉类型
- 联合类型: 表示一个值可以是几种类型之一。
- 交叉类型: 表示一个值同时具有多种类型的特性。
typescript
复制
type StringOrNumber = string | number;type Pet = Dog & Cat; // 假设 Dog 和 Cat 是已定义的接口或类
3.2 类型别名
类型别名用于为类型创建一个新名称，常用于联合类型或复杂类型。
typescript
复制
type StringOrNumber = string | number;type Callback = (data: string) => void;
3.3 泛型
泛型允许在定义函数、接口或类时不指定具体类型，而在使用时再指定。
typescript
复制
function identity(arg: T): T { return arg;}let output = identity("hello");
4. 模块和命名空间
4.1 模块
TypeScript 支持 ES6 模块语法，用于组织和封装代码。
typescript
复制
// math.tsexport function add(x: number, y: number): number { return x + y;}// app.tsimport { add } from './math';console.log(add(2, 3));
4.2 命名空间
命名空间用于在全局命名空间内组织代码，避免命名冲突。
typescript
复制
namespace Validation { export interface StringValidator { isAcceptable(s: string): boolean; }}let validator: Validation.StringValidator;
5. 装饰器
装饰器是一种特殊类型的声明，可以附加到类声明、方法、访问符、属性或参数上，用于修改类的行为。
typescript
复制
function sealed(constructor: Function) { Object.seal(constructor); Object.seal(constructor.prototype);}@sealedclass Greeter { greeting: string; constructor(message: string) { this.greeting = message; } greet() { return "Hello, " + this.greeting; }}
6. 工具和配置
6.1 tsconfig.json
tsconfig.json 是 TypeScript 项目的配置文件，用于指定编译选项和文件包含。
json
复制
{ "compilerOptions": { "target": "es5", "module": "commonjs", "strict": true, "outDir": "./dist" }, "include": ["src/**/*"]}
6.2 TypeScript 编译器
TypeScript 编译器 (tsc) 用于将 TypeScript 代码编译为 JavaScript 代码。
bash
复制
tsc app.ts
结论
TypeScript 通过引入静态类型、接口、类、泛型等特性，极大地增强了 JavaScript 的能力，使其更适合大型应用开发。掌握 TypeScript 的核心基础知识，不仅能够提高代码的质量和可维护性，还能提升开发效率和团队协作能力。希望本文能帮助你快速上手 TypeScript，并在实际项目中发挥其强大功能。
