53

我们应该如何(以及为什么)要将Typescript与Express、nodejs一起使用(译文)

 5 years ago
source link: https://segmentfault.com/a/1190000017062506?amp%3Butm_medium=referral
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

uAbYJzb.png!web

在我的职业生涯开始时,我是一名桌面应用开发人员,其中强类型语言占据了市场主导地位。

当我迁移到Web开发时,我对JavaScript和Python等语言的每个新功能都很着迷。事实上,我没有必要声明变量的类型,这极大的提高了我的生产力,并且使我的工作变得更有趣了。

所以我第一次听说TypeScript时,脑海中的第一个想法是这个语言的演变是不是倒退了一步。

QRZjEzF.jpg!web

我改变了主意吗?

是的,但这也要取决于具体情况。对于我独自工作的个人项目,我仍然更喜欢纯JavaScript,他的生产力更高。但是,对于那种团队工作的大型项目,我建议使用TypeScript。在整篇文章中,我将解释如何使用以及为什么去使用。

NBR32qI.png!web

生产力与维护

根据概念定义的,“TypeScript是用于应用程序规模开发的JavaScript”。也就是说,我们对项目初始设置的工作可以通过复杂项目的可维护性得到补偿。下面我们来看一下为什么会发生这种情况:

输入safe = less errors通过在代码中定义类型,您可以允许IDE在使用仅在运行时感知的类和函数时确认错误。

例:

RNBVnyu.png!web

这里我使用的是Visual Studio Code,它指出了两个错误:

在第6行:我们试图将字符串参数传递给只接受数字的函数。

在第9行:我们试图将一个返回数字的函数的结果赋给字符串。

如果没有Typescript,这两个错误将被忽视,导致最终应用程序出现一些错误。

IDE更容易寻找公开项目模块

在复杂的项目中,我们有数百个类分布在多个文件中。当我们定义类型时,IDE能够将对象和函数关联到给它们起源的文件。

当使用control + 单击从另一个文件导入的方法或类时,IDE将自动导航到导入的文件,突出显示定义引用的行。

naMZfiF.png!web

我们可以在从其他文件导入的类中使用自动完成功能。

zYfeArQ.png!web

维护的难度是Java和C#开发人员避免将大型项目迁移到JS的主要原因之一。我们可以说,Typescript是一种克服这一障碍的企业语言。

如何使用Typescript设置Express项目

现在让我们一步一步地创建一个在Express.js项目中使用Typescript语言的环境。

npm init

我们现在安装typescript包。

npm安装typescript -s

关于Typescript节点包

Node.js是一个运行Javascript而不是Typescript的引擎。节点Typescript包允许您将 .ts文件转换为 .js脚本。Babel也可用于转换Typescript,但市场标准是使用官方的Microsoft软件包。

在我们内部package.json我们将放置一个名为tsc:

“scripts”:{ 
    “tsc”:“tsc” 
},

此修改允许我们从项目文件夹中的命令行调用typescript函数。所以我们可以使用以下命令:

npm run tsc  -  --init

此命令通过创建tsconfig.json文件来初始化typescript项目。在此文件中,我们将取消注释该outDir选项,并为要传递的已转换的.js文件选择一个位置:

nENrqqz.png!web

安装express.js

npm install express -s

Express和Typescript包是独立的。这样做的结果是Typescript不“知道”Express类的类型。Typescript有一个特定的npm包来识别Express类型。

npm install @ types / express -s

Hello world

为了拥有尽可能最简单的应用程序,我将使用express.js教程的hello world示例:

var express = require('express');
var app = express();

app.get('/', function (req, res){
    res.send('hello world!');
});

app.listen(3000, function(){
    console.log('Example app listening on port 3000');
})

在我们的项目中,我们将创建一个名为的文件夹app。在此文件夹中,我们将创建一个名为app.ts以下内容的文件:

import express = require('express');

// Create a new express application instance
const app: express.Application = express();

app.get('/', function (req, res) {
  res.send('Hello World!');
});

app.listen(3000, function () {
  console.log('Example app listening on port 3000!');
});

编译我们的第一个应用程序

npm run tsc

如您所见,该命令自动创建了build文件夹和.js文件。

RvAbQfV.png!web

运行express:

node build / app.js

有了这个,我们已经在端口3000上运行了一个服务器:

VFFv2yn.png!web

运行TypeScript而不进行转换

您可以使用ts-node包直接在节点上运行typescript 。

此软件包仅建议用于开发。要在生产中进行最终部署,请始终使用项目的javascript版本。

该ts-node已被包含在另一个包的依赖关系,T ts-node-dev。安装后,ts-node-dev我们可以运行命令,以便在项目文件发生更改时重新启动服务器。

npm安装ts-node-dev -s

在我们内部,packege.json我们将添加两个脚本:

“scripts”:{ 
    “tsc”:“tsc”,
    “dev”:“ts-node-dev --respawn --transpileOnly ./app/app.ts”,“prod”:“tsc 
    && node ./build/ app.js“ 
},

要启动开发环境:

npm run dev

要以生产模式运行服务器:

npm run prod

有啥问题可以在评论处给我留言谢谢你的阅读!


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK