TypeScript和Javascript语法上的区别

TypeScript 和 JavaScript 的语法基本相同，因为 TypeScript 是 JavaScript 的超集，这意味着所有合法的 JavaScript 代码也是合法的 TypeScript 代码。但是，TypeScript 增加了类型注解和其他一些额外的特性。以下是一些主要的语法区别：

1. 类型注解

• JavaScript：没有类型注解，变量的类型是动态推断的。
• TypeScript：可以使用类型注解来明确指定变量、函数参数、返回值等的类型。

// JavaScript

　　let message = "Hello"; // 动态推断为 string

// TypeScript

　　let message: string = "Hello"; // 明确指定为 string

　　let age: number = 25; // 明确指定为 number

2. 函数参数和返回值类型

• JavaScript：函数的参数和返回值没有类型限制，完全依赖运行时进行检查。
• TypeScript：可以为函数的参数和返回值指定类型，编译时检查类型是否正确。

// JavaScript

　　function greet(name) {

　　　　return "Hello " + name;

　　　　}

 

// TypeScript

　　function greet(name: string): string {

　　　　return "Hello " + name;

　　　　}

3. 接口（Interface）

• JavaScript：没有内置的接口机制，通常通过对象字面量和原型链实现。
• TypeScript：引入了 interface，可以定义对象的形状，确保某些属性和方法存在。

// TypeScript

　　interface User {

　　　　　　name: string;

　　　　　　age: number;

　　　　　　}

　　function getUserInfo(user: User): string {

　　　　　　return `Name: ${user.name}, Age: ${user.age}`;

　　　　　　}

4. 类（Class）

• JavaScript：ES6 开始引入了类，但没有类型支持。
• TypeScript：类与 JavaScript 类类似，但支持类型注解、访问修饰符（public、private、protected）等特性。

// JavaScript

　　class Animal {

　　　　constructor(name) {

　　　　　　this.name = name;

　　　　　　　　}

　　　　　　move(distance) {

　　　　　　　　　　console.log(`${this.name}

　　　　　　　　　　moved ${distance}

　　　　　　　　　　meters.`);

　　　　　　　　　　　　}

　　　　　　　}

 

// TypeScript

　　class Animal {

　　　　private name: string;

　　　　　　constructor(name: string) {

　　　　　　　　this.name = name;

　　　　　　　　}

　　　public move(distance: number): void {

　　　　　　console.log(`${this.name} moved ${distance} meters.`);

　　　　　　　　}

　　　　　　}

5. 枚举（Enum）

• JavaScript：没有内置的枚举类型，通常通过对象模拟枚举。
• TypeScript：引入了 enum，可以定义常量的集合。

// TypeScript

　　enum Direction {

　　　　Up,

　　　　Down,

　　　　Left,

　　　　Right

　　　　}

　　let dir: Direction = Direction.Up;

6. 元组（Tuple）

• JavaScript：没有元组的概念，只能使用数组。
• TypeScript：支持元组，允许定义固定长度且元素类型固定的数组。

// TypeScript

　　　　let person: [string, number] = ["Alice", 30];

7. 类型推断

• JavaScript：所有类型都是动态的，在运行时才确定。
• TypeScript：即使没有显式的类型注解，TypeScript 也能通过类型推断来推测变量的类型。

// TypeScript

　　　let count = 10; // 推断为number

　　　　// count = "hello";

　　　　// 会报错，因为被推断为 number

8. 类型别名（Type Aliases）

• JavaScript：没有类型别名的概念。
• TypeScript：可以使用 type 关键字为复杂类型创建别名。

// TypeScript

　　type Point = {

　　　　x: number;

　　　　y: number;

　　　　　　};

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

9. 联合类型和交叉类型

• JavaScript：没有联合类型或交叉类型。
• TypeScript：支持联合类型（|）和交叉类型（&），可以灵活地定义复杂类型。

// TypeScript - 联合类型

　　let id: number | string;

　　id = 123;

　　// 可以是数字 id = "ABC"; // 也可以是字符串

 

// TypeScript - 交叉类型

　　type A = { name: string };

　　type B = { age: number };

　　type Person = A & B;

　　let person: Person = { name: "Alice", age: 25 };

10. 泛型（Generics）

• JavaScript：没有泛型的概念。
• TypeScript：支持泛型，允许定义函数、类或接口时使用占位符表示数据类型，增强代码的复用性。

// TypeScript

　　function identity<T>(arg: T): T {

　　　　return arg;

　　　　}

　　let output = identity<string>("Hello");

11. 非空断言操作符（Non-null Assertion Operator）

• JavaScript：对 null 和 undefined 的处理由开发者自行管理。
• TypeScript：引入 ! 操作符，告诉编译器某个值不会是 null 或 undefined。

// TypeScript

　　let name: string | undefined;

　　name! = "Alice";

　　// 非空断言，告诉编译器 name 不会是 undefined

12. 类型守卫（Type Guards）

• JavaScript：类型在运行时检查。
• TypeScript：通过类型守卫（如 typeof、instanceof 等）进行更严格的类型检查。

// TypeScript

　　function printId(id: number | string) {

　　　　if (typeof id === "string") {

　　　　　　console.log(id.toUpperCase());

　　　　　　} else {

　　　　　　console.log(id);

　　　　　　　　}

　　　　　　}

总结：

TypeScript 在 JavaScript 的基础上添加了类型注解、静态类型检查、接口、类的访问修饰符、枚举等功能，使得开发过程中能够更早地发现错误，提高代码的健壮性和可维护性。因此，TypeScript 的语法与 JavaScript 非常相似，只是在类型系统和一些高级特性上有所增强。