Angular2+ typescript 项目里面用require

在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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/388946.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

机器学习实践三---神经网络学习

Neural Networks 在这个练习中,将实现神经网络BP算法,练习的内容是手写数字识别。Visualizing the data 这次数据还是5000个样本,每个样本是一张20*20的灰度图片fig, ax_array plt.subplots(nrows10, ncols10, figsize(6, 4))for row in range(10):fo…

Microsoft Expression Blend 2 密钥,key

Microsoft Expression Blend 2 密钥,key,序列TJ2R3-WHW22-B848T-B78YJ-HHJWJ号

ethereumjs/ethereumjs-common-3-test

查看test能够让你更好滴了解其API文档的使用 ethereumjs-common/tests/chains.js const tape require(tape) const Common require(../index.js)tape([Common]: Initialization / Chain params, function (t) {t.test(Should initialize with chain provided, function (st) …

mysql修改_mysql修改表操作

一: 修改表信息1.修改表名alter table test_a rename to sys_app;2.修改表注释alter table sys_application comment 系统信息表;二:修改字段信息1.修改字段类型和注释alter table sys_application modify column app_name varchar(20) COMMENT 应用的名…

机器学习实践四--正则化线性回归 和 偏差vs方差

这次实践的前半部分是,用水库水位的变化,来预测大坝的出水量。 给数据集拟合一条直线,可能得到一个逻辑回归拟合,但它并不能很好地拟合数据,这是高偏差(high bias)的情况,也称为“欠…

深度学习 推理 训练_使用关系推理的自我监督学习进行训练而无需标记数据

深度学习 推理 训练背景与挑战📋 (Background and challenges 📋) In a modern deep learning algorithm, the dependence on manual annotation of unlabeled data is one of the major limitations. To train a good model, usually, we have to prepa…

Android strings.xml中定义字符串显示空格

<string name"str">字 符 串</string> 其中 就表示空格。如果直接在里面键入空格&#xff0c;无论多少空格都只会显示一个。 用的XML转义字符记录如下&#xff1a; 空格&#xff1a; <string name"out_bound_submit">出 库</strin…

WCF开发入门的六个步骤

在这里我就用一个据于一个简单的场景&#xff1a;服务端为客服端提供获取客户信息的一个接口读取客户信息&#xff0c;来完成WCF开发入门的六个步骤。 1. 定义WCF服务契约 A. 项目引用节点右键添加引用。 B. 在代码文件里&#xff0c;添加以下命名空间的引…

LOJ116 有源汇有上下界最大流(上下界网络流)

考虑有源汇上下界可行流&#xff1a;由汇向源连inf边&#xff0c;那么变成无源汇图&#xff0c;按上题做法跑出可行流。此时该inf边的流量即为原图中该可行流的流量。因为可以假装把加上去的那些边的流量放回原图。 此时再从原来的源向原来的汇跑最大流。超源超汇相关的边已经流…

CentOS 7 使用 ACL 设置文件权限

Linux 系统标准的 ugo/rwx 集合并不允许为不同的用户配置不同的权限&#xff0c;所以 ACL 便被引入了进来&#xff0c;为的是为文件和目录定义更加详细的访问权限&#xff0c;而不仅仅是这些特别指定的特定权限。 ACL 可以为每个用户&#xff0c;每个组或不在文件所属组中的用…

机器学习实践五---支持向量机(SVM)

之前已经学到了很多监督学习算法&#xff0c; 今天的监督学习算法是支持向量机&#xff0c;与逻辑回归和神经网络算法相比&#xff0c;它在学习复杂的非线性方程时提供了一种更为清晰&#xff0c;更强大的方式。 Support Vector Machines SVM hypothesis Example Dataset 1…

作为微软技术.net 3.5的三大核心技术之一的WCF虽然没有WPF美丽的外观

作为微软技术.net 3.5的三大核心技术之一的WCF虽然没有WPF美丽的外观 但是它却是我们开发分布式程序的利器 但是目前关于WCF方面的资料相当稀少 希望我的这一系列文章可以帮助大家尽快入门 下面先介绍一下我的开发环境吧 操作系统&#xff1a;windows vista business版本 编译器…

服务器安装mysql_阿里云服务器上安装MySQL

关闭防火墙和selinuxCentOS7以下&#xff1a;service iptables stopsetenforce 0CentOS7.xsystemctl stop firewalldsystemctl disable firewalldsystemctl status firewalldvi /etc/selinux/config把SELINUXenforcing 改成 SELINUXdisabled一、安装依赖库yum -y install make …

在PyTorch中转换数据

In continuation of my previous post ,we will keep on deep diving into basic fundamentals of PyTorch. In this post we will discuss about ways to transform data in PyTorch.延续我以前的 发布后 &#xff0c;我们将继续深入研究PyTorch的基本原理。 在这篇文章中&a…

「网络流24题」试题库问题

传送门&#xff1a;>Here< 题意&#xff1a;有K种类型的共N道试题用来出卷子&#xff0c;要求卷子须有M道试题。已知每道题属于p种类型&#xff0c;每种类型的试题必须有且仅有k[i]道。现问出这套试卷的一种具体方案 思路分析 昨天打了一天的Dinic&#xff0c;今天又打了…

机器学习实践六---K-means聚类算法 和 主成分分析(PCA)

在这次练习中将实现K-means 聚类算法并应用它压缩图片&#xff0c;第二部分&#xff0c;将使用主成分分析算法去找到一个脸部图片的低维描述。 K-means Clustering Implementing K-means K-means算法是一种自动将相似的数据样本聚在一起的方法,K-means背后的直观是一个迭代过…

航海家软件公式全破解

水手突破 上趋势:MA(LOW,20)*1.2,color0080ff,linethick2;次上趋势:MA(LOW,20)*1.1,COLORYELLOW;次下趋势:MA(HIGH,20)*0.9,COLORWHITE;下趋势:MA(HIGH,20)*0.8,COLORGREEN,linethick2;ZD:(C-REF(C,1))/REF(C,1)*100;HDZF:(HHV(H,20)-C)/(HHV(H,20)-LLV(L,20));趋势强度:IF(C&g…

打包 压缩 命令tar zip

2019独角兽企业重金招聘Python工程师标准>>> 打包 压缩 命令tar zip tar语法 #压缩 tar -czvf ***.tar.gz tar -cjvf ***.tar.bz2 #解压缩 tar -xzvf ***.tar.gz tar -xjvf ***.tar.bz2 tar [主选项辅选项] 文件或目录 主选项是必须要有的&#xff0c;它告诉tar要做…

mysql免安装5.7.17_mysql免安装5.7.17数据库配置

首先要有 mysql-5.7.10-winx64环境: mysql-5.7.10-winx64 win10(64位)配置环境变量&#xff1a;1、把mysql-5.7.10-winx64放到D盘&#xff0c;进入D\mysql-5.7.10-winx64\bin目录&#xff0c;复制路径&#xff0c;配置环境变量&#xff0c;在path后面添加D\mysql-5.7.10-winx6…

tidb数据库_异构数据库复制到TiDB

tidb数据库This article is based on a talk given by Tianshuang Qin at TiDB DevCon 2020.本文基于Tianshuang Qin在 TiDB DevCon 2020 上的演讲 。 When we convert from a standalone system to a distributed one, one of the challenges is migrating the database. We’…