在typescript里面怎么使用require方法呢？

const jQuery = require('jquery'); const fip = require( '@fonticonpicker/fonticonpicker' )( jQuery );

如果什么都不做，直接在項目里面使用，會得到以下錯誤：

`Cannot find name 'require'

以下方法可以解決上面的錯誤：

1. Install using yarn add @types/node or npm install @types/node --save-dev 2. Add "node" to the "types" option in your tsconfig.json, so it looks like "types": ["node"].
This makes them available in any file in your project and you don't have to use reference comments.

那么為什么要做第二步呢？其實做不做第二步是要分情況的。想要解釋這個問題我們就需要先了解

@types, typeRoots 和 types 三者是什么意思，它們之間有什么關系。下面是官網的解釋?

https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#types-typeroots-and-types

If?typeRoots?is specified,?only?packages under?typeRoots?will be included. For example:

{"compilerOptions": {"typeRoots" : ["./typings"] } }

This config file will include?all?packages under?./typings, and no packages from?./node_modules/@types.

If?types?is specified, only packages listed will be included. For instance:

{"compilerOptions": {"types" : ["node", "lodash", "express"] } }

This?tsconfig.json?file will?only?include?./node_modules/@types/node,?./node_modules/@types/lodashand?./node_modules/@types/express. Other packages under?node_modules/@types/*?will not be included.

A types package is a folder with a file called?index.d.ts?or a folder with a?package.json?that has a?types?field.

Specify?"types": []?to disable automatic inclusion of?@types?packages.

Keep in mind that automatic inclusion is only important if you’re using files with global declarations (as opposed to files declared as modules). If you use an?import "foo"?statement, for instance, TypeScript may still look through?node_modules?&?node_modules/@types?folders to find the?foo?package.

?

總結一下上面一段話的意思就是：

@types 指的是文件夾 ./node-modules/@types/... 下面含有indes.d.ts或者package.json文件的module；
"types":[] 和 "typeRoots": [] 是 tsconfig.json里面的兩個配置屬性；當types:[]屬性設置了，那么只有types屬性里面的模塊會被加載編譯，typeRoots里面的模塊會被忽略； 如果types屬性沒有被設置，那么會加載typeRoots屬性里面設置的模塊。而用import關鍵字導入的模塊，編譯器還是會在node_modules?&?node_modules/@types兩個文件夾下面尋找；
types和typeRoots這兩個屬性不會影響被import進項目的模塊的加載

上面的總結應該解決了我上面提出的問題：為什么第二步做與不做是分情況的。

如果在tsconfig.json文件里面設置了

"typeRoots": ["node_modules/@types"]
如下代碼，那么是不需要設置的。因為編譯器會默認加載node-modules/@types下面的modules。而如果我們安裝了 @types/node，那么node模塊是存在node-modules/@types文件夾下面的，
因此是不需要額外把它的加載列在 "types": ["node"] 屬性里面。 {"compileOnSave": false,"compilerOptions": {"baseUrl": "./","outDir": "./dist/out-tsc","sourceMap": true,"declaration": true,"moduleResolution": "node","emitDecoratorMetadata": true,"experimentalDecorators": true,"target": "es5","typeRoots": ["node_modules/@types"],"lib": ["es2017","dom"]} }

如果你的項目中的tsconfig.json文件中已經設置了 "types": [....] 屬性，那么需要把node模塊也加在里面；否則編譯器只會編譯"types":[...]屬性中列出來的模塊，而不管typeRoots里面列的模塊。

{"compileOnSave": false,"compilerOptions": {"baseUrl": "./","outDir": "./dist/out-tsc","sourceMap": true,"declaration": true,"moduleResolution": "node","emitDecoratorMetadata": true,"experimentalDecorators": true,"target": "es5","types": ["jquery", "node"],"typeRoots": ["node_modules/@types"],"lib": ["es2017","dom"]} }

?

轉載于:https://www.cnblogs.com/juliazhang/p/10103966.html

總結

以上是生活随笔為你收集整理的Angular2+ typescript 项目里面用require的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。