无法在模块(tsc到js)之外使用import语句
在模块（tsc到js）之外使用import语句是因为import语句是ES6模块化语法的一部分，而在浏览器环境中，浏览器并不直接支持ES6模块化语法。因此，如果在模块之外使用import语句，会导致语法错误。
解决这个问题的一种常见方法是使用打包工具，如Webpack或Parcel，将所有的模块打包成一个或多个JavaScript文件，然后在浏览器中引入打包后的文件。这样，就可以在浏览器环境中使用import语句了。
另外，如果你想在浏览器环境中使用模块化语法，也可以考虑使用其他的模块化方案，如CommonJS或AMD。这些方案在浏览器环境中可以通过使用对应的库或加载器来实现模块化。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云Webpack：https://cloud.tencent.com/product/webpack
- 腾讯云Parcel：https://cloud.tencent.com/product/parcel
相关·内容
我正在使用Protractor创建一个框架来测试Angular网页。我之所以使用TypeScript创建一个Page对象模型，只是因为它的语法对我来说比JavaScript更有意义。这更多的是一种偏好的东西。
当我运行我的自动化脚本时，我使用tsc命令将TypeScript中的所有内容转换为JavaScript，因为我的config文件遇到了错误。在运行tsc命令之后，我运行config.js文件，这将运行我的所有.js文件，包括页面对象文件和脚本文件。问题是Protractor在读取config文件后生成全局值-因此它会抱怨某些语法，比如import，因为JavaScript中没有使用这种语
浏览 1提问于2017-10-07得票数 0
1回答
我跟踪了package.json
{
"name": "browserify-test",
"version": "1.0.0",
"description": "",
"main": "dist/index.js",
"typings": "dist/index.d.ts",
"scripts": {
"build:tsc": "t
浏览 4提问于2017-02-28得票数 0
回答已采纳
我试图使用组件中模板的相对路径来使用systemjs。(我想使用相对路径的原因是，ng-xi18n目前无法处理绝对路径。)我不想用这个
moduleId: __moduleName
方法，而是类似于：
templateUrl: require('../templates/app.html')
首先，tsc标记了一个未定义的要求错误，在进行了一些研究之后，我发现有人可以包括@type/节点的依赖项来使用require函数。
现在我这样做了，tsc编译时没有错误，但是如果我在浏览器中打开应用程序，它会显示错误：
__zone_symbol__error : Error：(Syst
浏览 5提问于2017-02-04得票数 4
回答已采纳
我试图在我的打字代码中使用Backbone.js。当我添加导入时，tsc无法用child.ts(12,8): error TS2304: Cannot find name 'Animal'.编译代码。
下面是main.ts文件：
export module A.B {
export class Animal {
constructor(argument) {
// code...
}
go() : string {
return 'snow';
浏览 4提问于2015-01-06得票数 1
回答已采纳
如果我用任何类型的导入或导出指令编写.ts，那么当加载到HTML页面中时，生成的.js将生成以下错误：“未定义ReferenceError:导出”
如何复制：
在VS中创建空白Node.js web应用程序项目
添加带有导入或导出行的.ts
添加一些调用结果.js的HTML
启动一个HTTP (http-server -g [port])并到达您的HTML
我试过：
目标5
从"module": "commonjs"中删除行tsconfig.json`
安装CommonJS和SystemJS
使用.ts编译tsc
任何
浏览 0提问于2019-02-13得票数 27
回答已采纳
我正在努力理解如何正确地使用TypeScript和经典的JS节点模块。
我建立了一个非常基本的项目，其文件体系结构如下：
.
├── index.ts
├── lodash.d.ts
├── module.ts
└── node_modules
└── lodash
lodash已与npm一起安装。由于它似乎没有提供输入信息，所以我编写了一个基本的d.ts文件，它只描述一个函数，只是为了取悦tsc和避免不知道lodash的错误。
lodash.d.ts
declare module "lodash" {
export function reverse(array:
浏览 0提问于2016-02-25得票数 2
回答已采纳
我需要在一个简单的类型记录文件中使用一个简单的node_module，但是编译器似乎不想得到它。
这是我的简单ts文件：
import glob = require('glob');
console.log(glob);
我有个错误：
[13:51:11] Compiling TypeScript files using tsc version 1.5.0
[13:51:12] [tsc] > F:/SkeletonProject/boot/ts/Boot.ts(4,23): error TS2307: Cannot find external module 'g
浏览 5提问于2015-05-15得票数 2
回答已采纳
1回答
我刚开始学习角2，我试着运行npm，但是它给了我导航器consol中的错误：
错误:错误: XHR错误(404未找到)加载
在XMLHttpRequest.wrapFn
在ZoneDelegate.invokeTask ()
在Zone.runTask ()
在XMLHttpRequest.ZoneTask.invoke ()
错误加载
错误地将加载为的“NG2-引导/NG2-引导”
systemjs.config：
/**
* System configuration for Angular 2 samples
* Adjust as necessary for your
浏览 4提问于2017-01-30得票数 0
回答已采纳
我目前正在尝试使用服务来传递字符串。然而，在我的AppComponent，我得到了undefined服务。
这是一个错误：
Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/services/main.service
patchProperty/desc.set/wrapFn@http://localhost:3000/node_modules/zone.js/dist/zone.js:698:26
ZoneDelegate.prototype.invokeTask@http://
浏览 8提问于2016-11-10得票数 5
回答已采纳
Node.js ESM的工作方式似乎与TypeScript不同。
它导致程序通过打字，但在运行时崩溃。
package.json
{
"dependencies": {
"@types/lodash": "^4.0.0",
"lodash": "^4.0.0",
"typescript": "^4.0.0"
},
"type": "module"
}
tsconfig.json
{
"compilerOp
浏览 12提问于2022-01-29得票数 1
回答已采纳
我有一个可以编译成page-a.js的page-a.ts
alert('this is from page-a');
我有一个可以编译成main.js的main.ts
import pageA = module('page-a')
alert('this is from main');
下面是我的tsc命令行：
tsc --module amd page-a.ts main.ts
我使用的requirejs是这样的：
<script src="require.js" data-main="main.js"&g
浏览 0提问于2013-05-09得票数 7
回答已采纳
自昨天以来，我一直在学习本教程中的数据绑定部分
我一直在犯这个错误
未处理的承诺拒绝:模板解析错误:无法绑定到“ngModel”，因为它不是“输入”的已知属性。(“名称：](ngModel)="hero.name”placeholder="name"> )：AppComponent@5:12；Zone：；Task: Promise.then；Value: Error: Template解析错误：(…)错误:模板解析错误:无法绑定到“ngModel”，因为它不是“输入”的已知属性。(“名称：](ngModel)="hero.name”placeholder
浏览 1提问于2016-10-30得票数 0
下面是非常简单的代码：
"use strict";
import * as express from "express";
class Server {
public app: express.Application;
public static run(): Server {
return new Server();
}
constructor() {
this.app = express();
}
}
var server = Server.run();
export = se
浏览 1提问于2017-02-20得票数 2
回答已采纳
我正在尝试创建一个类型记录节点项目，但在导入模块时遇到了问题：
以下是我的项目结构：
/build
/src
main.ts
test.ts
package.json tsconfig.json
//main.ts
import { fun } from 'test'
fun()
//test.ts
const fun = () => {
console.log('fun()')
}
export { fun }
//tsconfig.json
{
"compile
浏览 4提问于2022-01-16得票数 0
回答已采纳
我有三个文件: index.html，index.js，Sprite.js
我想将Sprite类从Sprite.js导入到index.js中
我试过这个：
import Sprite from "Sprite.js"
此外，这也是：
import Sprite from Sprite
当我用打开html时，它会给出以下错误：
Uncaugth SyntaxError: Cannot use import statement outside a module
浏览 6提问于2022-06-17得票数 -1
考虑到提供了 (带有导入/导出的标准ES6模块)的语法，以及下面的文件，类型记录编译器(tsc)构建了当与NodeJS一起使用时抛出Error: Cannot find module的文件。
下面是一个简化的示例：
输入文件
src/main.ts
import {Example} from 'example';
let e = new Example();
src/范例
export class Example {}
编译
注意，在windows机器上使用来自npm install -g typescript的tsc，版本1.5.0-beta。
tsc --rootDir
浏览 3提问于2015-05-06得票数 1
回答已采纳
1回答
我在HTML中定义了一个函数，它是模块类型的，我需要从该HTML文件中包含的另一个js文件调用该函数。当我从js文件调用函数时，它被称为引用错误。
--这是我的文件中的内容：
<script src="../src/viewer.js"></script>
<script type="module" src="../pravintest/player.js"></script>
在viewer.js文件中，我有一个代码，其中调用player.js中的一个函数交叉数据集(Param)。
这是我的pla
浏览 2提问于2020-05-20得票数 1
回答已采纳
我得到了以下错误：
src/model/priceAdapment.ts(55，2)：error TS2345:类型'{ as: string；foreignKey: string；gql: any；}‘的参数不能分配给类型'AssociationOptionsHasMany’的参数。对象文字只能指定已知的属性，并且'gql‘不存在于'AssociationOptionsHasMany’类型中。
错误很明显，我试图分配一个不存在的"gql“键(我将它附加在上面，以便以后在代码中访问它)。
我想做的是扩展，并添加我自己的密钥。这个是可能的吗？如果是
浏览 8提问于2017-11-21得票数 0
2回答
我正试图在我的Angular2 (RC5)应用程序中设置Angular2。我已经用npm安装了geofire和firebase，并配置了系统it来导入它。这是我的package.json：
{
"name": "MyProject",
"version": "0.1.0",
"scripts": {
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\"
浏览 11提问于2016-08-20得票数 4
回答已采纳
TS 2.6.2，在dir中有三个文件：
interface.ts：
export interface Env {
x: string
}
index.ts：
import {Env} from './interface' // imports only interface
const env: Env = {x: '1'}
console.log(env.x)
tsconfig.json：
{
"include": [
"index.ts"
]
}
我做编译：tsc --outDir ./out，在下
浏览 2提问于2017-12-11得票数 0
回答已采纳
1回答
我试图在windows上编译我的桌面应用程序
C:/nodejs/tsc.cmd --sourcemap app.ts --module
这就是我得到的错误：
C:\nodejs\node_modules\typescript\bin\tsc.js:55708
type = type.toLowerCase();
^
TypeError: Cannot call method 'toLowerCase' of undefined
at Object.opts.opti
浏览 3提问于2013-08-17得票数 0
回答已采纳
这似乎是一个微不足道的问题，但不太明显的是，需要使用什么设置/配置来解决这个问题。
以下是Hello程序目录结构和源代码：
目录结构：
| -- HelloWorldProgram
| -- HelloWorld.ts
| -- index.ts
| -- package.json
| -- tsconfig.json
index.ts：
import {HelloWorld} from "./HelloWorld";
let world = new HelloWorld();
HelloWorld.ts：
export class H
浏览 8提问于2020-06-28得票数 76
回答已采纳
我有一个具有以下结构的项目：
┌ tsconfig.json
│ {
│ "compilerOptions": {
│ "baseUrl": ".",
│ "paths": { "a-mapped/*": ["a/*"] }
│ }
│ }
│
├ a
│ └─ a.ts
│ export const a = 1;
└ b
└─ b.ts
import { a } from "a-mapped/a";
export const b
浏览 0提问于2018-10-26得票数 7
回答已采纳
4回答
我正在尝试使用类型记录的Angular2，但是我对tsc有一个问题。
这是我的tsconfig.json文件：
{
"compilerOptions": {
"module": "commonjs",
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"out": "compiled.js",
"emitDecor
浏览 8提问于2015-05-25得票数 3
有一个简单的TS包，它用作CommonJS模块，没有导出。TS文件被编译成具有相同名称的JS文件，并用作require('package/option-foo')。
tsconfig.json：
{
"compilerOptions": {
"target": "es5"
}
}
备选方案-脚注：
declare const GlobalVar: any;
function baz() {}
if (GlobalVar.foo) GlobalVar.baz = baz;
选项-酒吧：
declare const
浏览 3提问于2016-12-01得票数 69
回答已采纳
请帮帮我，我不明白如何在TS中使用es6模块。例如：
I尝试将ext.class导入到class1.ts 1.ts.
class1.ts
import ExtClass from "./ext.class";
class Class1 {
constructor(){
console.log(new ExtClass().title)
console.log("Work")
}
}
new Class1();
及其导出类
ext.class.ts
class ExtClass {
public title:
浏览 2提问于2016-10-23得票数 0
我在试着看打字稿。我编写了一个琐碎的"hello“类型记录模块和。非常简单，只是做一个默认的导出：
export default function hello(target: string = 'World'): void
{
console.log(`Hello, ${target} :-(`)
}
node.js 0.10 -> 6很好地使用了它。该模块还在package.json中具有适当的"typings"属性，指向由tsc 生成的现有.d.ts文件：
export default function hello(target?: s
浏览 2提问于2016-07-19得票数 2
回答已采纳
1回答
我有一个类型记录模块，它被分成两个文件，tsc (0.9.1.1版)编译它时没有出错，生成的代码运行正常。
下面是我的模块的源文件摘要：
split_module_example.ts
//file: orders.part1.ts
module Orders { // first part of Orders
export var msg : string;
// set orders here
msg = 'hello';
}
//file: orders.part1.ts
module Orders { // second part of O
浏览 0提问于2014-02-11得票数 0
回答已采纳
1回答
我将TypeScript用于一些前端 JavaScript，并从index.html加载两个脚本，如下所示：
<script src="replacements.js"></script>
<script src="socket.js"></script>
replacements.ts (编译为replacements.js)定义了一个函数insertReplacement，如下所示：
export = 0;
import IReplacement from "../src/IReplacement
浏览 0提问于2018-02-18得票数 1
设置- "angular2"："2.0.0-beta.7“"primeng"："^4.1.0-rc.2"，
package.json
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" &
浏览 0提问于2017-06-24得票数 0
"scripts": {
"build": "webpack",
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\"",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc
浏览 3提问于2017-02-11得票数 14
回答已采纳
我以一种独立于生态系统的方式编写我的typescript代码。我决定在导入中包含文件扩展名，匹配web和Deno。
import xyz from "./foo.ts";
如何让typescript编译器(tsc)编译这些文件而不出现以下错误：
error TS2691: An import path cannot end with a '.ts' extension.
到目前为止，我在我的tsconfig.json中尝试了以下内容，但都没有效果：
{
"compilerOptions": {
"paths"
浏览 0提问于2020-08-05得票数 3
我使用来自tsc编译器的--声明参数从我的类型记录项目中创建了一个定义文件(d.ts)。
但是，当我试图在npm package.json上发布带有属性的包时，这个生成的定义文件显然无法工作。我创建了另一个项目来测试它。
它抱怨道：“导出的外部包文件类型文件'...d.ts‘不是一个模块。请与包作者联系以更新包定义”。
这是我的源文件：
MyInterface.ts
export interface MyInterface
{
MyProperty: string;
}
MyClass.ts
import {MyInterface} from './MyInterfac
浏览 1提问于2016-05-07得票数 11
回答已采纳
希望有人能给我指明正确的方向？我试图将underscore.js添加到我的AngularJS2应用程序中，但无法通过错误消息“无法找到模块‘下划线’”。
我执行了: npm安装下划线-保存，它将引用添加到我的package.json文件中：
{
"name": "angular-quickstart",
"version": "1.0.0",
"description": "QuickStart package.json from the documentation, supplemented
浏览 7提问于2016-11-04得票数 1
回答已采纳
所以我正在学习打字稿，下面是我的代码：
const sumNumberMamaMia= (a: number, b: number) => {
return a + b
}
在使用以下命令-> tsc index.ts编译该文件之前，在编译该文件并将下面的index.js代码作为输出后，没有出现错误。
var sumNumberMamaMia = function (a, b) {
return a + b;
};
index.ts文件突然出错
无法重新声明块作用域变量'sumNumberMamaMia‘..ts(2451) index.js
浏览 4提问于2021-02-18得票数 0
这是我的tsconfig.json
{
"compilerOptions": {
"strict": true,
"importHelpers": false,
"inlineSources": true,
"noEmitOnError": true,
"pretty": true,
"module": "esnext",
"noImplic
浏览 0提问于2020-03-16得票数 4
回答已采纳
我在做。
在本教程的一半时间里，我正确地设置了以下文件：
index.html，
app.component.ts
app/boot.ts
package.json
tconfig.json
运行npm start并获得以下错误：
Uncaught ReferenceError: require is not defined(anonymous function) @ boot.js:1 angular2-polyfills.js:143 Uncaught TypeError: Cannot read property 'split' of und
浏览 9提问于2016-01-11得票数 26
回答已采纳
2回答
Filter.ts、mustache.js和redux.3.5.2.js位于同一个目录(/Scripts)中。Filter.ts有以下代码：
///<reference path="./typings/mustache.d.ts" />
import Mustache = require("mustache");
import Redux = require("redux.3.5.2");
在代码中，它显示redux上的一个错误无法找到模块。当我编译它时，它写着：
Filter.ts(13,24)：错误TS2307:无法找到模块&#
浏览 2提问于2016-09-05得票数 2
如果不使用命令行，我如何转换类型记录？
我希望有一个脚本build.js来构建我的应用程序。
到目前为止，我发现typescript包有一个transpile(inputArgument, compileOptions)方法，但是我在他们的文档中没有找到关于这个的任何东西。
我可以使用tsc -p server构建我的项目，因此我设想了下面的工作方式：
const tsc = require('typescript');
tsc.transpile("", {
project: "server",
});
那我就用node build.
浏览 1提问于2018-12-05得票数 2
回答已采纳
背景
我有一组包，我使用类似的结构在整个个人项目中重用它们。
出于生产目的，它们是用TypeScript编写的，并在发布到npm之前通过tsc编译成JavaScript，这样我就可以将它们安装在其他项目中。我还使用Jasmine对它们进行了测试。
在开发中，我使用Webpack及其ts-loader编译TypeScript，使我可以在浏览器中运行的脚本中使用它。我通常也会在我的项目中使用Webpack，在我使用这些包时，虽然它们是在发布之前编译的，但是这些项目将只将它们视为JavaScript，而不需要使用ts-loader。
我在任何地方都使用ES模块语法，这样我就可以在每个上下文中轻松地使
浏览 9提问于2021-09-01得票数 1
回答已采纳
我使用类型记录创建了一个nodejs项目。但我无法启动它。这是我正在运行的命令
npm start
这是这个命令的输出
> project1@1.0.0 prestart D:\Workspace
> tsc
D:\Workspace\node_modules\typescript\lib\tsc.js:9921
for (var _i = 0, _a = node.jsDocPropertyTags; _i < _a.length; _i++) {
浏览 3提问于2017-09-07得票数 1
回答已采纳
从angular2/beforeEachProviders导入{describe，expect，it，xit，inject，testing}；
没有这行代码，我就可以成功地运行我的Jasmine简单测试代码。但是对于更复杂的代码，我需要从"angular2/testing“中导入模块。
错误:无法加载资源404。因为它在以下路径中查找文件: project_folder/angular2/testing，而不是project_folder/node_modules/angular2/testing。
这是我的test.html文件：
<head>
<link
浏览 2提问于2016-02-24得票数 2
下面是一个可复制的项目，其中包含了我问题的最小代码：。
在这个项目中，我设置了一个-based项目，以便子项目app依赖于复合子项目lib。
有了这个设置，在app/index.js内部，我能够
import { LETTER_A } from '../lib';
有了这个装置，好消息，
npm run compile (调用tsc -b lib app)成功构建。
npm start (调用node dist/app/index.js)成功运行。
现在，我注意到(感谢VSCode)，如果我使用一个从lib导入，TSC也很高兴
import { LETTER_A
浏览 1提问于2020-11-11得票数 5
回答已采纳
2回答
我有以下设置：
// enums.ts
export enum DocumentType {
Email = 0,
Unknown = 1
}
-
// remote.ts
/// <reference path="./remote.d.ts" />
import enums = require('./enums');
class Remote implements test.IRemote {
public docType: enums.DocumentType;
constructor() {
this.docType
浏览 0提问于2016-03-02得票数 12
1回答
这是我的代码：
babel.config.cjs
module.exports = {
plugins: ['@babel/plugin-transform-modules-commonjs'],
presets: [['@babel/preset-env', { targets: { node: 'current' } }]]
}
jest.config.cjs
module.exports = {
globals: {
"ts-jest": {
isolatedModules:
浏览 17提问于2022-07-19得票数 0
我正在尝试打字稿，我发现它非常有用。
我有一个相当大的项目，我正在考虑用打字本重写它。这里的主要问题如下：
文件A.ts：
class A extends B {
// A stuff
}
文件B.ts：
class B {
// B stuff
}
如果我用以下命令编译A.ts：
tsc --out compiledA.js A.ts
我会从编译器那里得到错误，因为他不知道如何在扩展后威胁"B“。
因此，“解决方案”将包含在A.ts中(作为第一行代码)：
/// <reference path="./B.ts" />
使用相同的命令再次编译
浏览 3提问于2012-10-03得票数 1
回答已采纳
我正在编写一个应用程序，并且要求将其编译到单个文件中；我不想错过定义模块的机会，为了使项目更易于管理，我希望将它们放在多个文件中。常见的方法是：
import _option = require("Option.ts")
不工作，因为它需要CommonJS或AMD，我无法使用。有没有一种方法可以在一个项目中使用多个文件和模块，同时仍然不使用CommonJS或AMD将它们编译成一个文件？
我尝试使用tsc转换器选项—out FILE来生成单个文件，但是当您在任何文件中的任何位置使用export关键字时，它都会卡住。
浏览 1提问于2014-03-12得票数 3
我正在尝试导入一个包含TypeScript定义的模块。安装@type/比例器甚至警告说，不需要安装它。
看起来，tsc不接收已安装包的*.d.ts文件，然后简单地忽略整个包。
我创建了一个简单的JS项目，显示了这个问题：
tsc报告的错误消息是：
test.ts:1:23 - error TS2307: Cannot find module 'flatpickr'.
1 import flatpickr from "flatpickr";
~~~~~~~~~~~
在安装依赖项之后，可以在node_modules
浏览 0提问于2018-12-21得票数 4
回答已采纳
我正在将我的NodeJs + ExpressJS项目转换为Typescript，我在控制台中看到了这个编译器错误。它甚至没有指向任何特定的代码段，这就是我不知道从哪里开始诊断问题的原因。本项目使用NodeJS + ExpressJS。我用Webstorm编写代码，Typescript的Webstorm "FileWatcher“会自动编译该项目。
C:/Users/Me/AppData/Roaming/npm/tsc.cmd --sourcemap Main.d.ts --out main.js --module
C:\Users\Me\AppData\Roaming\npm\nod
浏览 3提问于2013-12-13得票数 0
在模块中的文件中多次将nodejs模块(require)与类型记录定义文件(d.ts)混合是否存在已知的问题？
我的场景是，我每个文件夹都有一个模块命名空间(就像在C#中那样)，然后基本上通过tsc将它们编译成输出的my-module.js。但是，我经常会遇到一些奇怪的错误，比如Could not find type HTMLElement，但是很多人都指出，默认情况下，tsc包含类型记录库文件，其中包含所有这些类型。
我注意到一些人在多个文件上包含相同的d.ts文件时出现了一些奇怪的错误，这些文件都是用--out标志编译的，以便将其全部放入一个文件中，那么这是否会导致我的问题呢？
我使用的一
浏览 0提问于2013-11-25得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
