Question

我试图使用导出和导入，但它无法正常工作我收到错误

这是我的代码HTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    @RenderBody()

    <script src="~/scripts/user.js"></script>
    <script src="~/scripts/main.js"></script>
</body>
</html>

User.ts：

export class User {
    firstName: string;
    lastName: string;
}

main.ts

import { User } from "./user";

以下是例外的截图：

Answer 1

您有几个选择：

选项1：使用Webpack，Browserify等模块加载器

选项2：如果您只想将Current url output domain.com/listpage.php?page=8 Required url output domain.com/listpage.php/page/8 Current code RewriteEngine on RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^([^\.]+)$ $1.php [NC,L] RewriteRule ^listpage/([0-9]+)$ listpage?page=$1 RewriteRule ^listpage/([0-9]+)/$ listpage?page=$1 <html> <head> <title>Paging Next Previous Buttons</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <?php include('conn.php'); $rowsPerPage = 1; if(isset($_GET['page'])) { $pageNum= $_GET['page']; } else $pageNum = 1; // preceding rows $previousRows =($pageNum - 1) * $rowsPerPage; // the first, optional value of LIMIT is the start position //the next required value is the number of rows to retrieve $query = "select * from tablename WHERE status = '1' LIMIT $previousRows, $rowsPerPage"; $result = mysql_query($query) or die('Error couldn\'t get the data').mysql_error(); echo "<table border=1>\n"; echo "<tr><th>ID</th><th>Name</th><th>Password</th><th>Perm</th><th>Email</th> <th>Date</th></tr>"; // print the results //$result=mysql_query($sql) or die(mysql_error()); while($row=mysql_fetch_array($result)) { ?> <tr><td><?php echo $row['titlename']; ?></td><td><?php echo $row['titlename']; ?></td><td><?php echo $row['titlename']; ?></td><td><?php echo $row['titlename']; ?></td><td><?php echo $row['titlename']; ?></td> <td><?php echo $row['titlename']; ?></td></tr> <?php } echo '</table>'; // Find the number of rows in the query $query = "SELECT COUNT(titlename) AS numrows FROM tablename"; $result = mysql_query($query) or die('Error, couldn\'t get count title=\"$page\"').mysql_error(); //use an associative array $row = mysql_fetch_assoc($result); $numrows = $row['numrows']; // find the last page number $lastPage = ceil($numrows/$rowsPerPage); //we use ceil which rounds up the result, because if we have 4.2 as an answer, we'd need 5 pages. $phpself = $_SERVER['PHP_SELF']; //if the current page is greater than 1, that is, it isn't the first page //then we print first and previous links if ($pageNum > 1){ $page = $pageNum - 1; $prev = " <a href=\"$phpself/page/$page\" title=\"Page $page\">[Back]</a> "; $first = " <a href=\"$phpself/page/1\" title=\"Page 1\">[First Page]</a> "; } else //otherwise we do not print a link, because the current page is //the first page, and there are no previous pages { $prev = ' [Back] '; $first = ' [First Page] '; } // We print the links for the next and last page only if the current page //isn't the last page if ($pageNum < $lastPage) { $page = $pageNum + 1; $next = " <a href=\"$phpself/page/$page\" title=\"Page $page\">[Next]</a> "; $last = " <a href=\"$phpself/page/$lastPage\" title=\"Page $lastPage\">[Last Page]</a> "; } //the current page is the last page, so we don't print links for //the last and next pages, there is of course no next page. else { $next = ' [Next] '; $last = ' [Last Page] '; } //We print the links depending on our selections above echo $first . $prev . " Showing page <bold>$pageNum</bold> of <bold>$lastPage</bold> pages " . $next . $last; ?> </body> </html>编译为*.ts而没有任何模块导入或导出，请将*.js设置为＆＃34;无＆＃ 34;在compilerOptions.module中。请注意，当您将tsconfig.json设置为＆＃34;无＆＃34;时，您无法导出/导入模块。

Answer 2

尝试以下更改

HTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    @RenderBody()

    <!-- <script src="~/scripts/user.js"></script> --> <!-- not longer needed -->
    <script src="~/scripts/main.js"></script>
</body>
</html>

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true,
    "outFile": "~/scripts/main.js",
    "lib": [
      "dom",
      "es2015",
      "es5",
      "es6"
    ]
  }
}

使用此配置，您的输出只有一个js文件，可以使用wunderfull，包含main.ts中的所有引用文件。我只是不知道〜/是否工作，或者你是否必须设置相对于配置文件的路径，我没有使用linux。

User.ts

class User {
    firstName: string;
    lastName: string;
}

Main.ts：

/// <reference path="User.ts" />

// import { User } from "./user"; // not needed if referenced
console.log(new User());

所有参考声明都必须写在文件的开头

Answer 3

默认情况下，TypeScript使用节点模块分辨率。 Node.js / CommonJS使用 exports 关键字。但是，CommonJS不会在没有模块加载器或模块捆绑器的情况下在浏览器中运行。因此，您需要使用browserify或webpack才能在浏览器中运行它。

请查看此链接https://www.typescriptlang.org/docs/handbook/gulp.html

您还可以在 tsconfig.json 的编译器选项部分中将 module 设置为none：

{ ＆＃34; compilerOptions＆＃34;：{ ＆＃34;目标＆＃34;：＆＃34; es5＆＃34;，＆＃34;模块＆＃34;：＆＃34;无＆＃34; } }

Answer 4

我现在使用Parcel进行转码等丑陋的工作。我最简单的配置如下：

tsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "sourceMap": true,
        "noImplicitAny": true,
        "noImplicitReturns": true,
        "lib": [
            "es2015",
            "es5",
            "es6",
            "dom"
        ],
        "noUnusedLocals": true,
        "module": "commonjs",
        "strict": false
    },
    "include": [ "lib/*", "./main.ts" ]
}

在您的HTML文件中，无需导入“ .js”，只需导入“ .ts”，就像这样：

<script src="main.ts"></script>

然后，使用以下命令行运行Parcel：

parcel index.html

Parcel捆绑器将创建一个 dist 目录，其中包含所有需要的文件（html和已转码的JavaScript），并将在以下位置运行本地网络服务器：

http://localhost:1234

（在浏览器窗口中）重新加载热模块。

完成工作后，只需部署 dist 目录;-）

Answer 5

类似于TypedSource的答案，但是如果您不能或不想输出到一个js文件中，则可以执行以下操作：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    @RenderBody()

    <script src="~/scripts/user.js"></script>
    <script src="~/scripts/main.js"></script>
</body>
</html>

User.ts：

class User {
    firstName: string;
    lastName: string;
}

main.ts

/// <reference path="User.ts" />

// import { User } from "./user"; // not needed if referenced & User.js file is loaded
console.log(new User());

Answer 6

这对我有用：

my-enum.ts

const MyEnum = {
'test': 456,
'Default': 123
}

Component.ts

import * as MyEnum from 'my-enum';

Answer 7

这是我的故事：

我遇到了同样的问题，因为浏览器使用现代的 export/import 语句，而 Typescript 使用默认的 commonJS。因此，在 tsconfig.json 文件中，设置以下更改：

target: "es2015",

module: "es2015",

我认为如果您使用 BabolonJS，最好将 "moduleResolution" 显式设置为 "node"，但这可能没有区别。

未定义TypeScript导出

7 个答案: