Advertisement

对比TypeScript与JavaScript

阅读量:

首先,引用TypeScript官网的一段话:

TypeScript serves as a typed superset of JavaScript, compiling directly into plain JavaScript code.

Any browser. Any host. Any OS. Open source.

它是JavaScript的一个扩展,并且能够被转换为纯JavaScript代码。它可以在各种设备和系统中都可以使用,并且它是开源软件

换句话说,在语法上TypeScript不仅实现了与JavaScript的完全兼容,并且进一步扩展了JavaScript的语法结构。

TS文件中存储着typescript脚本文件,在完成ts文件的编译流程后会生成一个等价的js版本脚本文件。所有有效的javascript程序都可以无缝地转化为可编译的typeScript代码形式,并且这种转换过程不会影响最终运行结果的一致性

在学习过程中简述我在TypeScript学习过程中所了解到的另一种与JavaScript主要差异点之一。

其在此基础上增强了面向对象编程的功能,在语法设计上将原本属于弱类型的编程语言转化为可以在一定程度上类似于强类型的编程语言工作。

  1. 类型注解
  2. 接口
  3. 函数
  4. 泛型
  5. 枚举

1.类型注解

TypeScript通过类型注解提供编译时的静态类型检查。

复制代码
 let str: string;//ts代码

    
 let str;//编译生成的js代码

通过对比分析可知,在TS代码中,在声明变量时添加**:类型** ,即可实现对变量类型的描述。

此时如果给str赋予其他类型的数据:

复制代码
 let str: string;

    
 str = 123;//test.ts(2,1): error TS2322: Type '123' is not assignable to type 'string'.

开发工具能够提前报错尽管如此仍可将代码转换为JavaScript文件通过静态分析技术可以在代码构建阶段检测出数据类型的不一致经过转码后生成的JavaScript代码同样能够执行语法级别的验证无需依赖于像JavaScript这样的弱类型的编程语言仅能在运行时才察觉语法规则的违规行为并且由于JavaScript属于一种弱类型的编程语言其数据类型的缺陷不易被察觉但却可能导致不可预见的应用错误

2.接口

复制代码
 interface Point{

    
     x: number;
    
     y: number;
    
 }

TypeScript具备支持接口的能力,在转义过程中对应的JS代码字段为空。其区别在于允许在接口中定义变量,并能够继承类中的属性而不包含具体的实现细节。

3.类

ts:

复制代码
 class Greeter {

    
     greeting: string;
    
     constructor(message: string) {
    
     this.greeting = message;
    
     }
    
     greet() {
    
     return "Hello, " + this.greeting;
    
     }
    
 }

编译生成的js:

复制代码
 class Greeter {

    
     constructor(message) {
    
     this.greeting = message;
    
     }
    
     greet() {
    
     return "Hello, " + this.greeting;
    
     }
    
 }

然而ES6已经引入了类的支持,并且从代码中可以看出,在typescript中使用类型注解的方式可以在typescript中声明变量的类型。

4.函数

ts:

复制代码
 function add(x: string, y: string, z?:string): string{

    
     return x + y; 
    
 }

编译生成的js:

复制代码
 function add(x, y, z) {

    
     return x + y;
    
 }

在TypeScript的函数定义中,我们可以给每个函数参数附加一个类型注解,在函数参数列表后紧跟的是返回类型的说明:在参数列表后的":类型")。此外还可以指定函数的返回类型注解(即在函数定义时,在某个参数名称后可以附加一个问号符号?)。当定义函数时,在某个参数名称后可以附加一个问号符号?以表示该参数为可选类型。

5.泛型

ts:

复制代码
 class Greeter<T> {

    
     greeting: T;
    
     constructor(message: T) {
    
     this.greeting = message;
    
     }
    
     greet() {
    
     return this.greeting;
    
     }
    
 }
    
  
    
 let greeter = new Greeter<string>("Hello, world");

编译生成的js:

复制代码
 class Greeter {

    
     constructor(message) {
    
     this.greeting = message;
    
     }
    
     greet() {
    
     return this.greeting;
    
     }
    
 }
    
 let greeter = new Greeter("Hello, world");

在实际工作中,在编写代码时要考虑其是否具有良好的可重用性。不仅能够支持现有数据类型的处理需求,并且也能够适应未来可能出现的新数据类型的扩展需求。通过泛型机制,在typescript中可以实现高度可重用的代码设计。一个模块或函数的设计能够同时处理多种不同的数据类型,并且这种设计方式极大地提升了代码的复用效率。

6.枚举

ts:

复制代码
 enum Direction {

    
     Up,
    
     Down,
    
     Left,
    
     Right,
    
 }

编译生成的js:

复制代码
 var Direction;

    
 (function (Direction) {
    
     Direction[Direction["Up"] = 0] = "Up";
    
     Direction[Direction["Down"] = 1] = "Down";
    
     Direction[Direction["Left"] = 2] = "Left";
    
     Direction[Direction["Right"] = 3] = "Right";
    
 })(Direction || (Direction = {}));

该库提供了一种称为'枚举'的数据结构方式,在与常规面向对象编程语言相比的基础上特别采用了基于字符串类型的特性,在这种情况下其值可被定义为字符串类型

复制代码
 enum Direction {

    
     Up = "UP",
    
     Down = "DOWN",
    
     Left = "LEFT",
    
     Right = "RIGHT",
    
 }

总结:

它是JavaScript的一个增强版,在实现类型系统方面具有独特优势;它不仅支持类型注释(即类型注解),还通过这种方式显著提升了代码易读性和维护性;它使得开发者在编译过程中更容易发现并修正错误,在调试阶段也更加高效;此外,在语法设计上还进行了创新性的扩展与完善。

水平有限,如有错误,还请批评指正。

全部评论 (0)

还没有任何评论哟~