Typescript 和javascript 语法上差异和扩展

2024-04-01 本文已影响0人健健康康

从语法角度来看，TypeScript 是 JavaScript 的超集，这意味着任何有效的 JavaScript 代码也是有效的 TypeScript 代码。但是，TypeScript 引入了一些新的语法特性，这些特性使得 JavaScript 程序员需要适应和学习。以下是一些主要的语法差异和扩展，这些可以帮助 JavaScript 程序员快速掌握 TypeScript：

类型注解（Type Annotations）：
- TypeScript 允许你在变量、函数参数和函数返回值旁边添加类型注解。
- 例子：
  - JavaScript: let age = 25;
  - TypeScript: let age: number = 25;
接口（Interfaces）：
- TypeScript 引入了接口，这是定义对象形状的一种方式。
- 例子：
```
interface User {
  name: string;
  age: number;
}
```
类型别名（Type Aliases）：
- 类型别名允许你为类型定义一个新名字。
- 例子：
```
type Point = {
  x: number;
  y: number;
};
```
枚举（Enums）：
- TypeScript 提供了枚举类型，它帮助管理一组固定的相关常量。
- 例子：
```
enum Direction {
  Up,
  Down,
  Left,
  Right,
}
```
泛型（Generics）：
- 泛型允许你创建可重用的组件，这些组件可以支持多种类型。
- 例子：
```
function identity<T>(arg: T): T {
  return arg;
}
```

访问修饰符（Access Modifiers）：

TypeScript 引入了 public、private 和 protected 访问修饰符，用于控制类成员的可访问性。

例子：

class Person {
  private name: string;
  public constructor(name: string) {
    this.name = name;
  }
  public getName(): string {
    return this.name;
  }
}

装饰器（Decorators）：
- TypeScript 支持装饰器，这是一种为类和类成员添加注解和元编程语法的方式。
- 例子：
```
@sealed
class Greeter {
  greeting: string;
}
```

模块（Modules）：

TypeScript 支持 ES6 的模块语法，允许使用 import 和 export 语句。

例子：

// someModule.ts
export function someFunction() { /* ... */ }

// anotherModule.ts
import { someFunction } from './someModule';

命名空间（Namespaces）：
- TypeScript 的命名空间是另一种组织代码的方式，它可以防止全局作用域污染。
- 例子：
```
namespace MyNamespace {
  export class MyClass { /* ... */ }
}
```
非空断言操作符（Non-null Assertion Operator）：
- TypeScript 2.0 引入了一个新的后缀表达式 !，当你确定变量不为 null 或 undefined 时使用。
- 例子：
```
function myFunction(maybeString: string | null | undefined) {
  const onlyString: string = maybeString!;
}
```

JavaScript 程序员在学习 TypeScript 时，最重要的是理解类型系统和编译时类型检查的概念。一旦掌握了这些，其他的语法特性将会更容易学习和应用。

Typescript 和javascript 语法上差异和扩展

猜你喜欢

热点阅读