亲宝软件园·资讯

展开

TypeScript与JavaScript的区别分析

人气:0

TypeScript是微软开发的一个开源的编程语言,通过在JavaScript的基础上添加静态类型定义构建而成。由于JavaScript语言本身的局限性,难以胜任大型项目的开发和维护。因此微软开发了TypeScript ,使得其能够胜任大型项目的开发。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码,可运行在任何浏览器,任何操作系统。

TypeScript可以使用JavaScript中的所有代码和编程概念,TypeScript是为了使JavaScript的开发变得更加容易而创建的。推荐先精通JS的的前提下再学习TS,这样更有利于同时学习两门语言。

TypeScript优势

与JavaScript相比,TypeScript有很多好处。

TS 使代码重构变得更加容易,并且更强调显式类型,使开发人员能够掌握各种组件的交互方式。由于它支持编译时调试,对于处理大型复杂应用程序的团队来说,有一定的好处。

为任何项目设置TypeScript都是容易的。一些框架,如Angular,默认使用TypeScript。因此,在我看来TypeScript更胜一筹。

什么时候应该将项目迁移到TypeScript?

当代码的大小、复杂性和出错率增加时,需要在编译过程中确定具体问题时,就可以使用TypeScript。
TypeScript 还具有接口和访问修饰符,允许开发人员在单个代码库上进行协作和交互。因此,最好在项目一开始就使用TypeScript。
但是你如果喜欢像Ember.js或Glimmer.js这样的框架,那你就不会喜欢TypeScript,这些框架的首选是JavaScript。

TypeScript 与 JavaScript 的区别

TypeScript 是 JavaScript 的超集,扩展了 JavaScript 的语法,因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改,TypeScript 通过类型注解提供编译时的静态类型检查。

TypeScript 可处理已有的 JavaScript 代码,并只对其中的 TypeScript 代码进行编译。

TS一般用于大型项目,就像微信小程序底层库是用TS实现的,而微信小程序自身即应用层却是以JS来实现的。

复杂性是一个需要考虑的关键因素。JavaScript 非常适合更简单的应用程序,因为它可以在所有平台(跨平台)上运行并且非常轻量级。另外,与JS的最小开销相比,编译TS代码需要的时间和CPU资源对项目而言会更麻烦。

TypeScript 其实就是类型化的 JavaScript,它不仅支持 JavaScript 的所有特性,还在 JavaScript 的基础上添加了静态类型注解扩展。从某种意义上来说,TypeScript 其实就是 JavaScript 的超集。在 TypeScript 中,我们不仅可以轻易复用 JavaScript 的代码、最新特性,还能使用可选的静态类型进行检查报错,使得编写的代码更健壮、更易于维护。比如在开发阶段,我们通过 TypeScript 代码转译器就能快速消除很多低级错误(如 typo、类型等)。

TypeScript基本语法

在语法层面,缺省类型注解的 TypeScript 与 JavaScript 完全一致。因此,我们可以把 TypeScript 代码的编写看作是为 JavaScript 代码添加类型注解。在 TypeScript 语法中,类型的标注主要通过类型后置语法来实现。

let num = 1;

示例中的语法同时符合 JavaScript 语法和 TypeScript 语法。而 TypeScript 语法与 JavaScript 语法的区别在于,我们可以在 TypeScript 中显式声明变量num仅仅是数字类型,也就是说只需在变量num后添加: number类型注解即可

let num: number = 1;

TypeScript原始类型

在 JavaScript 中,原始类型指的是非对象且没有方法的数据类型,它包括 string、number、bigint、boolean、undefined 和 symbol 这六种 (null 是一个伪原始类型,它在 JavaScript 中实际上是一个对象,且所有的结构化类型都是通过 null 原型链派生而来)。在 JavaScript 语言中,原始类型值是最底层的实现,对应到 TypeScript 中同样也是最底层的类型。

1.字符串

在 JavaScript 中,我们可以使用string表示 JavaScript 中任意的字符串(包括模板字符串)

let firstname: string = 'Captain'; // 字符串字面量
let familyname: string = String('S'); // 显式类型转换
let fullname: string = `my name is ${firstname}.${familyname}`; // 模板字符串

2.数字

number类型表示 JavaScript 已经支持或者即将支持的十进制整数、浮点数,以及二进制数、八进制数、十六进制数

/** 十进制整数 */

let integer: number = 6;

/** 十进制整数 */

let integer2: number = Number(42);

/** 十进制浮点数 */

let decimal: number = 3.14;

/** 二进制整数 */

let binary: number = 0b1010;

/** 八进制整数 */

let octal: number = 0o744;

/** 十六进制整数 */

let hex: number = 0xf00d;

/** 如果使用较少的大整数,那么我们可以使用bigint类型来表示 */

let big: bigint = 100n;

3.布尔值

boolean表示 True 或者 False

/** TypeScript 真香 为 真 */

let TypeScriptIsGreat: boolean = true;

/** TypeScript 太糟糕了 为 否 */

let TypeScriptIsBad: boolean = false;

4.Symbol原始类型

我们可以通过Symbol构造函数,创建一个独一无二的标记

let sym1: symbol = Symbol();

let sym2: symbol = Symbol('42');

当然,TypeScript 还包含 Number、String、Boolean、Symbol 等类型(注意区分大小写)。

let sym: symbol = Symbol('a');

let sym2: Symbol = Symbol('b');

sym = sym2 // ok or fail?

sym2 = sym // ok or fail?

let str: String = new String('a');

let str2: string = 'a';

str = str2; // ok or fail?

str2 = str; // ok or fail?

实际上,我们压根使用不到 Number、String、Boolean、Symbol 类型,因为它们并没有什么特殊的用途。这就像我们不必使用 JavaScript Number、String、Boolean 等构造函数 new 一个相应的实例一样。

{
let mustBeNum = 1;
}

{
let mustBeNum: number = 1;
}

下面,我们对上面的示例稍做一下修改

{
let mustBeNum = 'badString';
}

{
let mustBeNum: number = 'badString';
}

如果变量所处的上下文环境特别复杂,在开发阶段就能检测出低级类型错误的能力将显得尤为重要,而这种能力主要来源于 TypeScript 实现的静态类型检测。

5.静态类型检测

在编译时期,静态类型的编程语言即可准确地发现类型错误,这就是静态类型检测的优势。在编译(转译)时期,TypeScript 编译器将通过对比检测变量接收值的类型与我们显示注解的类型,从而检测类型是否存在错误。如果两个类型完全一致,显示检测通过;如果两个类型不一致,它就会抛出一个编译期错误,告知我们编码错误,具体示例如下代码所示:

const trueNum: number = 42;

const fakeNum: number = "42";

// ts(2322) Type 'string' is not assignable to type 'number'.

TypeScript引用类型

1.数组

因为 TypeScript 的数组和元组转译为 JavaScript 后都是数组,所以这里我们把数组和元组这两个类型整合到一起介绍,也方便你更好地对比学习。

2.数组类型(Array)

在 TypeScript 中,我们也可以像 JavaScript 一样定义数组类型,并且指定数组元素的类型。

/** 子元素是数字类型的数组 */

let arrayOfNumber: number[] = [1, 2, 3];

/** 子元素是字符串类型的数组 */

let arrayOfString: string[] = ['x', 'y', 'z'];

3.元组类型(Tuple)

元组最重要的特性是可以限制数组元素的个数和类型,它特别适合用来实现多值返回。我们熟知的一个使用元组的场景是 React Hooks(关于 React Hooks 的简介请点击这里查看),例如 useState 示例:

import { useState } from 'react'

function useCount() {

const [count, setCount] = useState(0);

return ....;

}

4. any

any 指的是一个任意类型,它是官方提供的一个选择性绕过静态类型检测的作弊方式。我们可以对被注解为 any 类型的变量进行任何操作,包括获取事实上并不存在的属性、方法,并且 TypeScript 还无法检测其属性是否存在、类型是否正确。比如我们可以把任何类型的值赋值给 any 类型的变量,也可以把 any 类型的值赋值给任意类型(除 never 以外)的变量,如下代码所示:

let anything: any = {};

anything.doAnything(); // 不会提示错误

anything = 1; // 不会提示错误

anything = 'x'; // 不会提示错误

let num: number = anything; // 不会提示错误

let str: string = anything; // 不会提示错误

5. unknown

unknown 是 TypeScript 3.0 中添加的一个类型,它主要用来描述类型并不确定的变量。比如在多个 if else 条件分支场景下,它可以用来接收不同条件下类型各异的返回值的临时变量,如下代码所示:

let result: unknown;

if (x) {

result = x();

} else if (y) {

result = y();

} ...

6. void、undefined、null

考虑再三,我们还是决定把 void、undefined 和 null “三废柴”特殊类型整合到一起介绍。依照官方的说法,它们实际上并没有太大的用处,尤其是在本专栏中强烈推荐并要求的 strict 模式下,它们是名副其实的“废柴”。首先我们来说一下 void 类型,它仅适用于表示没有返回值的函数。即如果该函数没有返回值,那它的类型就是 void。在 strict 模式下,声明一个 void 类型的变量几乎没有任何实际用处,因为我们不能把 void 类型的变量值再赋值给除了 any 和 unkown 之外的任何类型变量。然后我们说说 undefined 类型 和 null 类型,它们是 TypeScript 值与类型关键字同名的唯二例外。但这并不影响它们被称为“废柴”,因为单纯声明 undefined 或者 null 类型的变量也是无比鸡肋,示例如下所示:

let undeclared: undefined = undefined; // 鸡肋

let nullable: null = null; // 鸡肋

undefined 的最大价值主要体现在接口类型上,它表示一个可缺省、未定义的属性。这里分享一个稍微有点费解的设计:我们可以把 undefined 值或类型是 undefined 的变量赋值给 void 类型变量,反过来,类型是 void 但值是 undefined 的变量不能赋值给 undefined 类型。

const userInfo: {

id?: number;

} = {};

let undeclared: undefined = undefined;

let unusable: void = undefined;

unusable = undeclared; // ok

undeclared = unusable; // ts(2322)

而 null 的价值我认为主要体现在接口制定上,它表明对象或属性可能是空值。尤其是在前后端交互的接口,比如 Java Restful、Graphql,任何涉及查询的属性、对象都可能是 null 空对象,如下代码所示:

const userInfo: {

name: null | string

} = { name: null };

7. never

never 表示永远不会发生值的类型,这里我们举一个实际的场景进行说明。首先,我们定义一个统一抛出错误的函数,代码示例如下:

function ThrowError(msg: string): never {

throw Error(msg);

}

以上函数因为永远不会有返回值,所以它的返回值类型就是 never。同样,如果函数代码中是一个死循环,那么这个函数的返回值类型也是 never,如下代码所示。

function InfiniteLoop(): never {

while (true) {}

}

never 是所有类型的子类型,它可以给所有类型赋值,如下代码所示。

let Unreachable: never = 1; // ts(2322)

Unreachable = 'string'; // ts(2322)

Unreachable = true; // ts(2322)

let num: number = Unreachable; // ok

let str: string = Unreachable; // ok

let bool: boolean = Unreachable; // ok

8. object

object 类型表示非原始类型的类型,即非 number、string、boolean、bigint、symbol、null、undefined 的类型。然而,它也是个没有什么用武之地的类型,如下所示的一个应用场景是用来表示 Object.create 的类型。

declare function create(o: object | null): any;

create({}); // ok

create(() => null); // ok

create(2); // ts(2345)

create('string'); // ts(2345)

TypeScript 类型检测无法做到绝对智能,毕竟程序不能像人一样思考。有时会碰到我们比 TypeScript 更清楚实际类型的情况,比如下面的例子:

const arrayNumber: number[] = [1, 2, 3, 4];

const greaterThan2: number = arrayNumber.find(num => num > 2);

// 提示 ts(2322)

小结

TypeScript 其实就是添加了类型注解的 JavaScript,它并没有任何颠覆性的变动。因此,学习并掌握 TypeScript 一定会是一件极其容易的事情。

加载全部内容

相关教程
猜你喜欢
用户评论