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<T>(arg: T): T {
      return arg;
  }
  
  let output = identity<string>("hello");
  let numberOutput = identity<number>(42);

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

  typescriptCopy Code

  function logLength<T extends { length: number }>(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> = T extends string ? "Yes" : "No";
  type Test1 = IsString<string>;  // "Yes"
  type Test2 = IsString<number>;  // "No"

7. 声明合并 (Declaration Merging)

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

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