Webstorm Typescript 加载模块导致意外的令牌导入答案

【问题标题】：Webstorm Typescript loading modules results in Unexpected token importWebstorm Typescript 加载模块导致意外的令牌导入
【发布时间】：2016-02-16 01:51:03
【问题描述】：

所以在我开始之前，我先简单介绍一下环境

IDE：Webstorm，最新版本
es6 已安装并启用
babel 已安装。 babel 文件观察器已安装
Typescripts 已安装

我想做的是创建一个模块，然后将其导入并使用，但是我总是遇到不同的错误。以下是我拥有的文件列表及其内容

staf.ts

export class Staf {
StaffNo: number;
Username: string;
Firstname: string;
Lastname: string;
Password: string;
Type: string;
Program: array<string>;
}

Webstorm 用以下错误在 Staf 一词下划线

cannot compile external modules unless the '--module' flag is provided

import Staff from 'Staf';

$(document).ready(function(){
console.log('hello');

var staff = [];

$.getJSON('data/staff.json', function(data) {
$.each(data, function (i, record) {
staff.push(record);
});
});

console.log(staff);

$('.btn').click(function(){
var name = $('input[aria-describedby=basic-addon-username]').val();
var pass = $('input[aria-describedby=basic-addon-passwor]').val();

$.each(staff, function(i, data){
if( (data.Username == name || data.Firstname == name) && data.Password == pass){
console.log("hi");
$($('.input-group')).addClass('has-success')
window.location.href = "./actions.html";
}
})

$($('.input-group')).addClass('has-error');
$('.help-block').toggle();
//$('.bg-danger').show();

})

})

<!DOCTYPE html>
<html>
<head>
 <title>STARS - Login</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="css/login.css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!--<script src="node_modules/babel-browser/browser.js"></script>-->
<script src="js/login.js"></script>
<script src="node_modules/systemjs/node_modules/es6-module-loader/src/system.js"></script>
<script>
    System.config({
        baseURL: 'node_modules/babel-browser/browser.js',
        // or 'traceur' or 'typescript'
        transpiler: 'babel',
        // or traceurOptions or typescriptOptions
        babelOptions: {

        }
    });

    // loads /app/main.js
    System.import('lgoin.js');

</script>
</head>

 <body>

 </body>
</html>

当我尝试运行时出现三个错误

  1. Uncaught SyntaxError: Unexpected token import
  2. Uncaught ReferenceError: Loader is not defined
  3. Uncaught TypeError: Cannot read property 'config' of undefined

现在我尝试安装 babel、babel-cli 和 babel-preset-es2015 然而，注意到导致解决这个问题的突破

【问题讨论】：

标签： typescript ecmascript-6 webstorm node-modules es6-module-loader

【解决方案1】：

除非提供 '--module' 标志，否则无法编译外部模块

打字稿目标很可能没有设置为 ES6

创建一个tsconfig.json 文件，并将target 设置为ES6。

在 Webstorm -> 首选项 -> 语言 -> 打字稿中，选择 use tsconfig.json 文件

编辑：见 cmets

staf.ts 应该是

class Staf {
...
}

export default Staf

login.js 应该是

import Staf from './staf'

（注意'./staf'）

【讨论】：

我已按照您的指示进行操作。仍然存在相同的错误，另外，当我尝试运行 typescript 编译器时，出现错误“找不到名称'array'”......有什么想法吗？
试试Array<string>（大写A）或干脆string[]
这很有帮助。但现在我收到另一个错误 s2304 cannot find name 'module'
我看不到您在此处显示的任何模式。此外，您的 js 似乎将 staff 称为数组，而您的 ts 将 Staf 视为一个类。两者之间的关系尚不清楚
staff 应该是一个 Staf 数组。如何正确声明它？