JavaScript 的核心特性和TypeScript 的高级概念

JavaScript 核心特性

JavaScript 是一种动态的、弱类型的编程语言，广泛应用于 Web 开发中。它是 Web 页面上的脚本语言，也是 Node.js 生态系统的重要语言。JavaScript 的核心特性包括：

1. 动态类型

弱类型语言：变量的类型在运行时确定，可以存储任何类型的数据，类型转换在运行时进行。比如：

javascriptCopy Code

let x = 10; // 数字

x = "hello"; // 字符串

x = true; // 布尔值

2. 闭包 (Closure)

闭包 是指一个函数可以访问其外部作用域的变量。即使外部函数已经执行完毕，内部函数仍然可以访问这些变量。

javascriptCopy Code

function outer() {

let x = 10;

return function inner() {

console.log(x);

};

}

const closureFn = outer();

closureFn(); // 输出: 10

3. 原型继承 (Prototype Inheritance)

JavaScript 对象是通过原型链继承属性和方法的。每个对象都有一个 __proto__ 属性，指向它的原型对象。

javascriptCopy Code

const animal = {

speak: function() {

console.log("Animal speaks");

}

};

const dog = Object.create(animal);

dog.speak(); // 输出: "Animal speaks"

4. 异步编程 (Asynchronous Programming)

JavaScript 的异步编程模型支持回调函数、Promise 和 async/await。这使得 JavaScript 能够处理长时间运行的任务（如 I/O 操作）而不会阻塞主线程。

javascriptCopy Code

// 使用 Promise

function fetchData() {

return new Promise((resolve, reject) => {

setTimeout(() => resolve("Data loaded"), 1000);

});

}

fetchData().then(data => console.log(data)); // 输出: "Data loaded"

// 使用 async/await

async function getData() {

const data = await fetchData();

console.log(data); // 输出: "Data loaded"

}

getData();

5. 事件循环 (Event Loop)

JavaScript 使用事件循环机制来处理异步代码。当执行堆栈为空时，事件循环会检查消息队列（即待处理的回调函数），并将其加入堆栈执行。

6. 模块化

从 ES6 开始，JavaScript 提供了内置的模块系统，允许开发者将代码分割成多个模块进行导入和导出。

javascriptCopy Code

// 导出模块

export function greet() {

console.log("Hello");

}

// 导入模块

import { greet } from './greet.js';

greet(); // 输出: "Hello"

7. 函数式编程 (Functional Programming)

JavaScript 支持函数式编程，包括高阶函数（接受函数作为参数或返回函数）、匿名函数、箭头函数、数组操作方法（如 map、filter、reduce）等。

javascriptCopy Code

const numbers = [1, 2, 3, 4];

const doubled = numbers.map(num => num * 2);

console.log(doubled); // 输出: [2, 4, 6, 8]

TypeScript 高级概念

TypeScript 是 JavaScript 的超集，增加了静态类型检查和高级编程特性。以下是一些 TypeScript 中的高级概念：

1. 类型声明 (Type Declaration)

TypeScript 允许开发者在代码中显式声明变量、函数参数、函数返回值等的类型，从而提高代码的可维护性和可靠性。

typescriptCopy Code

let name: string = "Alice";

let age: number = 30;

function greet(person: string): string {

return `Hello, ${person}`;

}

联合类型 (union types)：允许变量或参数接受多种类型。

typescriptCopy Code

let value: string | number = "Hello";

value = 42; // 也可以是数字

类型别名 (type alias)：通过 type 定义复杂类型。

typescriptCopy Code

type Point = { x: number, y: number };

let p: Point = { x: 10, y: 20 };

2. 接口 (Interfaces)

接口用于定义对象的结构，包括属性和方法。它帮助你描述对象的类型。

typescriptCopy Code

interface Person {

name: string;

age: number;

}

const person: Person = { name: "Alice", age: 30 };

接口支持继承，可以扩展其他接口。

typescriptCopy Code

interface Employee extends Person {

position: string;

}

3. 泛型 (Generics)

泛型使得函数、类、接口等能够在保持类型安全的同时支持多种类型。这是 TypeScript 提供的强大功能之一。

typescriptCopy Code

function identity(arg: T): T {

return arg;

}

let output = identity("hello");

let numberOutput = identity(42);

泛型约束：你可以对泛型类型进行约束，指定其必须符合某些条件。

typescriptCopy Code

function logLength(arg: T): number {

return arg.length;

}

logLength("Hello"); // 输出: 5

4. 装饰器 (Decorators)

装饰器是 TypeScript 中的实验性特性，允许你在类、方法、属性或参数上添加元数据。它们通常用于框架（如 Angular）中。

typescriptCopy Code

function log(target: any, key: string) {

console.log(`${key} is accessed`);

}

class Person {

@log

name: string;

constructor(name: string) {

this.name = name;

}

}

const p = new Person("Alice");

console.log(p.name); // 输出: "name is accessed" 和 "Alice"

装饰器可以应用于类、方法、属性、参数等。

5. 映射类型 (Mapped Types)

映射类型允许你根据现有类型生成新的类型。常见的映射类型包括 Partial、Readonly、Record 等。

typescriptCopy Code

type Person = { name: string; age: number };

type PartialPerson = { [P in keyof Person]?: Person[P] }; // 使所有属性变为可选

6. 条件类型 (Conditional Types)

条件类型允许根据类型的条件选择不同的类型。

typescriptCopy Code

type IsString = T extends string ? "Yes" : "No";

type Test1 = IsString; // "Yes"

type Test2 = IsString; // "No"

7. 声明合并 (Declaration Merging)

TypeScript 允许通过多次声明同一接口或模块来合并它们。这在扩展库时非常有用。

typescriptCopy Code

interface Window {

width: number;

}

interface Window {

height: number;

}

let myWindow: Window = { width: 100, height: 200 };