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

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

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

`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.

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

@types, typeRoots 和 types 三者是什么意思，它們之間有什么關(guān)系。下面是官網(wǎng)的解釋?

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.

?

總結(jié)一下上面一段話的意思就是：

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

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

如果在tsconfig.json文件里面設(shè)置了

"typeRoots": ["node_modules/@types"]
如下代碼，那么是不需要設(shè)置的。因?yàn)榫幾g器會默認(rèn)加載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"]} }

如果你的項(xiàng)目中的tsconfig.json文件中已經(jīng)設(shè)置了 "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"]} }

?

轉(zhuǎn)載于:https://www.cnblogs.com/juliazhang/p/10103966.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。