typescript - Webstorm Typescript 加载模块导致意外的令牌导入

Question

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

IDE：Webstorm，最新版本
es6 已安装并启用
安装了通天塔。babel 文件观察器已安装
打字稿已安装

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

员工.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

登录.js

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();

})

})

登录.html

<!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 但是注意到导致解决这个问题的突破

score 1 · Accepted Answer

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

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

创建一个设置为 ES6的tsconfig.json文件。target

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

编辑：见评论

staf.ts应该

class Staf {
...
}

export default Staf

login.js应该

import Staf from './staf'

（注意'./staf'）

typescript - Webstorm Typescript 加载模块导致意外的令牌导入

1 回答 1

Related

Reference