JavaScript vs. TypeScript

TypeScript是一种时髦的编程语言，是JavaScript的超集。换句话说，TypeScript是JavaScript的一个改进版本。它继承了本地JavaScript的功能和特点。此外，它还增加了新的组件和语法。这意味着，JavaScript代码实际上是TypeScript代码。

JavaScript是一种基于对象的脚本语言，用于创建交互式网页。它是一种成熟的编程语言。Stack Overflow进行的一项调查显示，JavaScript是世界上最流行的编程语言。

历史。开始

Brendan Eich和Netscape开发了JavaScript。它于1995年9月推出，最初被称为Mocha。

创建JavaScript是为了用类似Java的语法（面向对象）来缓解网络交互性。它成为一个流行的脚本工具，后来被命名为JavaScript。采用这个命名是为了在Netscape的浏览器中反映类似Java的代码。JavaScript变得越来越流行，迫使网景公司将其提交给ECMA（欧洲计算机制造商协会）以吸引更多的企业。

JavaScript现在符合ECMAScript（ES）标准。ES5和ES6是最常用的ES标准，与JavaScript一起被应用。

现在，JavaScript已经成为最流行的编程语言。今天大约96%的网页使用JavaScript来运行客户端和后端服务。这包括谷歌和Facebook这样的大公司。JavaScript已经成熟为一种合格的脚本语言。这要归功于众多的开源库和框架，它们有现成的代码，你可以在你的项目中导入和使用。

TypeScript是一种开源编程语言，由Anders Hejlsberg开发，于2012年10月向公众发布。微软公司采用了TypeScript，并在2014年7月推出TypeScript 1.0版本。

让我们来对比一下这两者。

执行和编译

TypeScript用.ts 表示，而JavaScript文件的扩展名是.js 。注意，你不能直接在浏览器上运行TypeScript。这是因为与JavaScript相比，TypeScript需要更长的时间来编译。

换句话说，如果你在浏览器中运行一个TypeScript应用程序，需要一个编译步骤来将TypeScript转译成JavaScript。TypeScript被转换为Plain JavaScript，因为浏览器无法理解TypeScript代码。

另一方面，JavaScript直接在浏览器上运行。JavaScript是作为纯文本执行的。因此，你不需要任何特殊的准备或编译来运行.js 程序。

动态类型与静态类型

在编写脚本时，可以注意到TypeScript和JavaScript之间的主要区别之一。TypeScript是一种静态语言。它支持对静态类型特征的检查。

TypeScript有一个快速反馈回路，可以在编写脚本时检测错误。这有助于你在短时间内产生一个强大的代码库。此外，这个功能使你能够在编译过程中识别任何错误。

另一方面，JavaScript是一种动态语言。任何代码错误都是在运行时检测出来的。软件（IDE或文本编辑器）在运行时才会发现问题。

很多错误应该是手动检测的。

让我们有一个简单的例子来证明这一点。

function sum (a,b){
    return a + c;
}
sum(4,4)

这段代码将a 添加到b 。然而，c 并不是函数sum 的参数。如果你用.ts 的扩展名来保存这段代码，IDE会在编译时突出显示错误，如下图所示。

TypeScript error

TypeScript function error detected

下面是另一个例子。

function sum (a:number ,b:number){
    return a + b;
}

在上面的例子中，函数sum 的两个参数都有一个数字注释。如果你开始添加不同的类型，例如，传入一个字符串作为参数，TypeScript会告诉你传入了一个字符串，而这需要是一个数字。

function sum (a:number, b:number){
    return a + b;
}
sum("hello",4)

TypeScript static typing

TypeScript static typing error

虽然这些可能看起来很简单的例子，但当你在更多的函数上工作时，它就会得到回报。这个功能在JavaScript中是没有的。如果你的代码有错误，直到运行时你才会发现。这可能很烦人，特别是对初学者来说。

类型注解

注释你的类型可以使源代码更易读和无错误。类型注解允许你声明值的类型。然而，JavaScript并没有原生支持这个功能。

下面是一个例子。

function getName(i){
    const names = ['John', 'Conor', 'Mike', 'Jessica'];
    return names[i];
}
const sayName = getName(2)

这个函数需要一个参数(i) ，它是names 数组的一个索引。sayName ，等于函数在给定索引处的返回值。

作为一个JavaScript开发者，你可能已经知道，函数getName 返回一个字符串类型的names 数组。然而，你可以在TypeScript中注解这个函数，如下图所示。

function getName(i):string{
    const names = ['John', 'Conor', 'Mike', 'Jessica'];
    return names[i];
}
const sayName = getName(2)

一旦声明了注解，函数的返回值就不会改变它的类型，只取特定的值。编译器会提醒开发者与类型有关的错误。这可以帮助你避免简单的错误，因为你已经知道值的类型。

由于上述方法返回一个字符串，你可以用任何字符串对象或字符串方法来操作它。例如，如果你想把名字返回为大写字母，你可以添加大写字母方法，它是字符串对象的一部分，如下图所示。

function getName(i):string{
    const names = ['John', 'Conor', 'Mike', 'Jessica'];
    return names[i];
}
const sayName = getName(2).toUpperCase

你避免了诸如Type 'abc' is not assignable to type 'string' 的错误，因为你已经知道你在用字符串方法操作字符串值。

此外，TypeScript是静态类型的；任何分配给这个函数的返回值的非字符串值都会通知你可能出现的错误。在JavaScript中，字符串类型可以被分配给其他类型。

例如，一个数字可以被改变成一个字符串。

类型注释可以应用于任何东西，包括。

函数参数和返回值

function sum (a:number ,b:number):number{
    return a + b;
}

变量

let myString: string;
let myNum: number;
let MyBool: Boolean;

对象属性

interface Car{
    year: number;
    model: string;
    electric: Boolean;
}

浏览器支持

TypeScript 支持几乎所有的浏览器。TypeScript 编译器将.ts 编译成任何 JavaScript 风格，如 ES3、ES4、ES5 和 ES6。因此，你只需写一次代码，目标浏览器就会在幕后编译它。

社区和普及

JavaScript 是一种古老的语言，比 TypeScript 拥有广泛的社区支持。根据stack overflow和Red Monk 的调查，JavaScript 几年来一直是最受欢迎的语言。

生态系统

与TypeScript相比，JavaScript有一个庞大的生态系统。NPM有助于管理JavaScript的依赖性。TypeScript只在后端与NPM一起工作。同样明显的是，JavaScript比TypeScript有更丰富的框架和API网络。

TypeScript相对于JavaScript的优势

TypeScript的静态阅读增强了代码优化、早期错误检测、稳定的代码和定义的类型。
TypeScript提供了明确的类别声明。这提供了一个更有信息量的代码库版本。

看看这个相同的 JavaScript 代码和 TypeScript 代码。

JavaScript

const ISelectProps = {
    defaultValue: '',
    id: '',
    inline: true,
    name: 'default name',
    onChange: function onChange() { },
    onSearch: function onSearch() { },
    options: [],
    placeholder: '',
    value: 'default',
    style: {},
    className: '',
    propTypes: {}
};

TypeScript

export interface ISelectProps {
    defaultValue?: ISelectProps | string;
    id?: string;
    inline?: boolean;
    name?: string;
    onChange?: ({target, option, value}) => void;
    onSearch?: (event) => void;
    options?: Array<ISelectProps | string>;
    placeholder?: string;
    value?: ISelectProps | string;
    style?: React.HTMLProps<HTMLStyleElement>;
    className?: string;
    propTypes?:any;
}

上面显示了两者之间代码信息的质量。

TypeScript支持IntelliSense工具，可以提高开发速度。微软开发了这个导航工具，提供了auto complete 的功能。它还在代码添加时提供主动提示。你也可以设置热键来访问详细的描述。

TypeScript hotkeys

TypeScript比JavaScript有更多的功能，因为它的灵感来自其他语言。

其中一些功能包括。

类型注释--每个静态类型的值都由TypeScript自动检查。
泛型--让你编写泛型方法。
改进的API文档--TypeScript有Visual Studio Code导航等工具，可以自动让开发者看到属于外部库和API的参数类型、跟踪变量和函数。

TypeScript api documentation highlights

使用案例

当您有一个庞大的代码库时，TypeScript 将帮助您将代码纳入单一标准。静态类型化通过实时检测错误来加速开发过程。

TypeScript 还提供了接口和访问修改器，使不同的开发人员能够沟通并共同实现单一代码库。

JavaScript直接在浏览器中运行。与TypeScript不同，它是灵活的。它提供动态类型，支持创建新的功能而不拘泥于相同的规则。

因此，它很适合小型项目。TypeScript不支持Ember.js和Glimmer.js这样的框架。因此，JavaScript是这种框架的首选语言。

总结

JavaScript和TypeScript在现代网络环境中非常合适。在小型应用中，JavaScript是首选，而TypeScript主要用于大型企业应用。

像Angular2这样的框架使用TypeScript作为主要构建模块。在React.js和Vue.js等流行框架中也可以看到TypeScript的痕迹。

我希望这个指南能帮助你弄清楚JavaScript和TypeScript之间的主要区别，为你的项目做出明智的选择。

JavaScript vs.TypeScript谁更胜一筹