TS和JS 的区别

OK按照正常的逻辑来，我们先了解一下TS是什么？

Chatgpt给出的答案是：

TypeScript是一种由微软开发和维护的编程语言，它是JavaScript的超集。它通过在JavaScript语言基础上添加了静态类型、类、接口、模块、泛型等特性，提供了更强大的工具和功能来增强JavaScript的开发过程。

OK,接下来我们来了解一下TS为什么出现，怎么着JS满足不了开发的需求了吗？

好的，确实是这样。
JS在一些大型项目中出了一些问题和限制

1. 弱类型和动态类型：JavaScript是一种弱类型和动态类型的语言，这意味着变量的类型可以随时改变，并且在运行时可能发生隐式类型转换。这会导致在开发过程中很难捕捉到一些潜在的错误，同时也增加了调试和维护的难度。TypeScript引入了静态类型系统，使得在编译时可以进行类型检查，提早发现潜在的错误并提供更好的代码可靠性。

2. 缺乏模块化支持：在JavaScript中，没有官方的模块化标准，导致在大型代码库中组织和管理代码变得困难。TypeScript提供了模块化支持，使得代码可以按照模块来组织，提高了代码的可维护性和复用性。

3. 缺乏工具和编辑器支持：JavaScript的工具和编辑器对于代码补全、重构、导航等功能的支持有限。TypeScript通过引入类型系统，使得开发工具可以提供更强大的代码提示、自动补全和重构功能，提升了开发效率。

4. 让JavaScript更适用于大型项目：JavaScript最初设计的目标是作为一种用于在浏览器中编写简单脚本的语言，没有考虑到大型项目的需求。随着Web应用的日益复杂和规模的扩大，JavaScript的一些限制开始显现（全局作用域、动态类型、弱类型）。TypeScript通过添加类、接口、泛型等特性，使得JavaScript更适合构建大型项目，并提供了更好的代码组织和架构。

5. 对Babel和Flow的回应：在TypeScript推出之前，JavaScript社区已经存在一些解决JavaScript一些问题和限制的工具，例如Babel和Flow。Babel是一个JavaScript编译器，它可以将新版的JavaScript转换成老版本的JavaScript，以支持更多的浏览器和环境。Flow是一个由Facebook开发的静态类型检查器，它可以帮助开发者在开发时就发现潜在的类型错误。但是Babel只能解决语法兼容性问题，而Flow则需要额外增加类型注释，使用起来比较繁琐。TypeScript综合了Babel和Flow的优点，既可以进行语法转换，又提供了类型系统的支持。

6. 跨平台开发需求：随着Web技术的不断发展，越来越多的开发者需要同时面对Web应用和Native应用的开发。TypeScript提供了对于React Native, Electron等跨平台技术较好的支持。TypeScript提供的模块化系统和类型系统使得代码的跨平台复用和移植变得更加简单。

7. 大公司支持：TypeScript最初由微软推出，因此得到了微软的强力支持。微软在自己的产品中广泛使用TypeScript，并且提供了相关工具和文档，使得开发者可以更加容易地上手和使用。此外，Google, Facebook等大公司也对TypeScript进行了广泛的实践和推广。

进入正题，说说区别

1. 静态类型检查：TypeScript是一种静态类型语言，它可以在编译时检查代码中的类型错误，以提前发现潜在的问题。JavaScript则是一种动态类型语言，它只在运行时才会检查类型。

// TypeScript中声明变量时可以指定类型
let num: number = 10;
num = "hello"; // 编译时会报错

// JavaScript中变量类型可以随时改变
let num = 10;
num = "hello"; // 运行时不会有错误，但可能导致意外结果

1
2
3
4
5
6
7
8

2. 类型注解和推断：TypeScript 通过类型注解提供编译时的静态类型检查。，TypeScript支持使用类型注解明确指定变量、参数和函数的类型，同时也有类型推断功能，可以根据上下文自动推导出变量的类型。而在JavaScript中，变量的类型通常是通过值来决定的。

TypeScript提供了很多数据类型，通过类型对变量进行限制，称之为类型注解，使用类型注解后，就不能够随意变更变量的类型。
项目较大时，变量类型被变更的频率就会增加，出错的概率就会提高，因此TS时强类型的面向对象的。

// TypeScript中的类型注解和推断
function add(a: number, b: number): number {
  return a + b;
}

let result: number = add(5, 10);

// JavaScript中没有类型注解和推断
function add(a, b) {
  return a + b;
}

let result = add(5, 10); // 结果仍然是数值类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14

3. 丰富的类型系统和特性：TypeScript提供了更丰富的类型系统和一些高级特性，如枚举、接口、泛型、命名空间等，可以帮助开发者更好地组织和管理代码。JavaScript相比之下较为简洁，缺乏这些高级特性。

// TypeScript中的接口和枚举
interface Person {
  name: string;
  age: number;
}

enum Color {
  Red,
  Green,
  Blue,
}

let person: Person = { name: "Alice", age: 25 };
let color: Color = Color.Red;

// JavaScript中没有接口和枚举的直接支持
let person = { name: "Alice", age: 25 };
let color = { RED: 0, GREEN: 1, BLUE: 2 };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

4. 编译过程：TypeScript需要经过编译过程，将TypeScript代码转换为JavaScript代码，然后才能在浏览器或Node.js环境中运行。而JavaScript则不需要额外的编译步骤，可以直接在浏览器或Node.js中运行。
5. TypeScript 引入了 JavaScript 中没有的“类”概念： 在 JavaScript 中，可以使用构造函数和原型来模拟类的概念，但是语法上并没有明确的类声明和类的相关特性（如继承、访问修饰符等）。而 TypeScript 引入了类的概念，并且提供了更完善的语法支持，可以使用 class 关键字来定义类，通过 extends 关键字实现类的继承，以及使用 public、private、protected 等访问修饰符控制成员的可见性。

class Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  sayHello() {
    console.log("Hello, I'm " + this.name);
  }
}

class Cat extends Animal {
  constructor(name: string) {
    super(name);
  }
  sayHello() {
    console.log("Meow, I'm " + this.name);
  }
}

let cat = new Cat("Kitty");
cat.sayHello(); // 输出：Meow, I'm Kitty

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

6. TypeScript 中引入了模块的概念： TypeScript 支持使用模块来封装声明、数据、函数和类，使得代码更加模块化和可复用。可以使用 import 和 export 关键字来导入和导出模块中的内容。

// moduleA.ts
export function foo() {
  console.log("foo");
}

// moduleB.ts
import { foo } from "./moduleA";
foo(); // 输出：foo

1
2
3
4
5
6
7
8
9

7. TypeScript 支持函数和方法的重载： 在 JavaScript 中，函数重载是没有直接的语法支持的。而 TypeScript 提供了函数和方法的重载特性，可以根据传入参数的不同，自动匹配对应的函数重载定义。

function add(x: number, y: number): number;
function add(x: string, y: string): string;
function add(x: any, y: any): any {
  return x + y;
}

console.log(add(1, 2)); // 输出：3
console.log(add("Hello", "World")); // 输出：HelloWorld

1
2
3
4
5
6
7
8
9

8. TypeScript 对比 JavaScript 增加了更多的类型： TypeScript 在基础类型的基础上增加了一些特殊类型，如 void 表示没有任何类型，never 表示永远不会出现的值，any 表示任意类型，还引入了元组（tuple）、枚举（enum）以及一些高级类型（如联合类型和交叉类型）。

let num: number = 10;
let str: string = "Hello";
let arr: number[] = [1, 2, 3];
let tuple: [string, number] = ["Alice", 20];
enum Color {
  Red,
  Green,
  Blue
}
let color: Color = Color.Red;

function saySomething(): void {
  console.log("Something");
}

let something: never = (() => {
  throw new Error("Never");
})();

let data: any = "Hello";
data = 10;

console.log(num, str, arr, tuple, color); // 输出：10 Hello [1, 2, 3] ['Alice', 20] 0
saySomething(); // 输出：Something

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25