Node. JS Project-TypeScript and JavaScript mixed development guide

Author : xuzhiping   2022-10-31 10:37:07 Browse: 1292
Category : JavaScript

Abstract: Node.js as a server development framework for performance is enough to meet the requirements, with a variety of rich library sup...

Node.js

Node.js as a server development framework for performance is enough to meet the requirements, with a variety of rich library support, and the development speed is also fast, which is very suitable for the development of background business services. But JavaScript as a programming language in all aspects is really miserable, involving complex business logic when the complexity of the code will quickly increase, very difficult to maintain, so the use of Microsoft to solve this problem created TypeScript is the right solution, but Rome is not built in a day, subjectively we hope that the original project can be immediately switched to TypeScript, but in fact we will inevitably face the problem of legacy code and old JS libraries.

There is actually a lot of documentation on how TypeScript works with JavaScript, and the official documentation has a dedicated article on how to migrate TypeScript from a JavaScript project. Unfortunately, this does not solve our needs in many cases, because many times we do not have the time or willingness (too lazy) to modify the code that has been written before, but only hope that we can add new logic on the basis of the old project.

When there are .ts files and .js files in the project, we need to master how these files reference each other, otherwise we will not be able to develop well.

Installation

First of all, we need to install typescript and @types/node in the project, typescript needless to say, @types/node helps us define the types of methods and variables used in node code such as require, exports, etc., otherwise we will report an error when we use node methods such as require in the .ts file.

$ npm i -D typescript @types/node

In order for tsc to include .js files when compiling (in fact, copying them unchanged to the build target folder), we need to add allowJS=true to tsconfig.json, which is also mentioned in the official documentation.

How to reference third-party libraries

For libraries that support TypeScript, you can generally use them with confidence after installation, and you can import the objects obtained using the original require using the syntax of import *as when importing.

If the library itself does not support types (indicating an error that the library cannot be found), you can try to install @types/<package_name>, which generally solves the problem. If you don't have a @types library, you can only write your own .t.ds file to supplement the type of library, or use the native require method to import it.

When the library is missing types, I recommend using the require method to import directly, so that on the one hand, it is worry-free, and on the other hand, it can remind you that this library is an imported third-party library without type files, and you need to be more careful when using it.

How to reference TypeScript files in JavaScript

When writing a project, we may only want to write a new part of the code in TypeScript, then after writing, we will inevitably need to call the newly written logic in the old JavaScript code, and this part is not introduced in detail on the Internet, so it is briefly introduced here.

In the .ts file to be referenced, we don't need to pay attention to anything when developing, just export it at the end using the JavaScript native way of module.exports in the Node .js, this line of statements will be left intact after compilation, so it can be referenced by other .js files. It should be noted that the native method and the export method in TypeScript cannot be mixed, otherwise there will be conflicts after compilation and cannot be imported correctly.

In the .js file, we only need to use the require method to import the corresponding module normally.

How to reference JavaScript files in TypeScript

There is no need to make changes to the original .js files, we only need to care about how to import them in the .ts file.

There are three ways to do this online, as follows:

  • Use import * as js_module form './js_module'
  • Use import js_module = './js_module'
  • Use const js_module = require('js_module')

After practice, I think the third method is the best method, which is to import JavaScript modules using require. On the one hand, this syntax can distinguish JavaScript modules from other TypeScript module imports, and on the other hand, it is the most reliable way, because it is still the same correct statement after compilation, and other methods sometimes cause errors due to TypeScript versions or other configuration reasons.

    Sign in for comments!
Comment list (0)

Powered by TorCMS (https://github.com/bukun/TorCMS).