javascript 如何为C#项目配置TypeScript

jk9hmnmh  于 2023-04-19  发布在  Java
关注(0)|答案(1)|浏览(114)

我认为TypeScript通常与C#无关,除非它是ASP.NET应用程序。在我的情况下,我需要在普通的C# ConsoleApp中使用TypeScript。我在Visual Studio 2017中用C#创建了一个.NET ConsoleApp(不是Visual Studio Code -我在谷歌上找到的关于这个问题的所有东西都与VSCode有关)。HttpListener对象。我做了所有的请求-响应的事情,一切都在工作。然而,现在我用HTML + JavaScript编写实际的网站,我选择在同一个项目中工作,所以我的解决方案浏览器看起来像这样:

/Solution "HTTP"
├────HTTP
|     ├────Properties
|     ├────References
|     ├────App.config
|     ├────Program.cs
|     ├────Other C# classes...
|     └────Site_source
|               ├────media
|               |      ├───favicon.io
|               |      └───other images/videos/audios...
|               ├────scripts
|               |      ├───script.js
|               |      └───other scripts...
|               ├────index.html
|               └────other html pages... 
| 
└────────────────

现在,在我写了所有这些层次结构树之后,我意识到我可以只附加一个屏幕截图,但我将离开层次结构:enter image description here这个想法是网站是在同一个项目解决方案中构建的,这就产生了兼容性问题。我安装了TypeScript SDK,但是.ts文件没有语法高亮,所以我从Visual Studio安装程序安装了node.js web开发包,即使我不需要/不想/不知道使用node.js库。我对node.js没有任何了解,我只是想要TypeScript/JavaScript的语法突出显示功能。我在脚本文件夹中创建(在解决方案层次结构树中),它似乎可以工作。当我用CTRL + S保存.TS文件时,会生成.JS文件。但是我有一个问题:此math.ts文件:

class Vector2{
   x: number;
   y: number;
   constructor(x: number, y: number){
      this.x = x;
      this.y = y;
   }
}

编译成math.js

var Vector2 = (function () {
    function Vector2(x, y) {
        this.x = x;
        this.y = y;
    }
    return Vector2;
}());

我知道这是因为它默认使用ES3 JS版本作为编译目标,所以我添加了tsconfig.json

{
  "compilerOptions": {
    "lib": [ "DOM", "ESNext" ], //tried with ...
    "module": "ESNext", //tried with ...
    "noEmitOnError": true,
    "noImplicitAny": false,
    "removeComments": false,
    "sourceMap": true,
    "target": "ESNext", //tried with ES5, ES6, ES2015-2017
  },
  "include": [
    "*.ts"
  ],
}

在添加这个之后,ts编译器继续使用functions而不是classes,再加上我在YouTube上看了一些教程之后,它说要在tsconfig.json中添加此选项的自动编译功能:"watch" : true。对我来说,在没有tsconfig.json的情况下启用了保存时自动编译功能,因此这意味着tsconfig.json被编译器忽略。我想提一下,我试图将tsconfig.json放置在任何地方。(其中.ts文件被放置在scripts文件夹,我尝试了solution文件夹,我尝试了Site_source文件夹,我尝试了HTTP文件夹),它不工作。
我还尝试使用以下命令手动编译math.ts文件(在我将tsc.exe文件夹添加到Control Panel-〉Environment Variables之后):

tsc math.ts -t ES6

这是可行的,输出math.js使用的是class而不是function,但是我希望这对自动编译功能起作用,所以我需要以以下方式之一使其工作:

  • 使编译器使用tsconfig.json
  • 访问命令行并向命令添加-t ES6参数

我知道会发生这种情况,因为该项目不是Node.js项目,而是C#中的Console App .NET,但必须有一种方法才能使其工作。
我需要的编译器编译后按CTRL + S

dba5bblo

dba5bblo1#

1.确保你已经安装了node/npm/tsc。如果你能运行tsc(你可以),那就足够了。
1.确保你的TS项目文件夹有tsconfig.json。没有必要把它放在C#项目的根目录下,把它放在JS/HTML甚至JS文件夹中。
1.使用控制台打开TS项目文件夹(cmd/pwsh/wt/whatewer)。运行tsc --watch。监视器应编译现有ts文件并开始监视ts文件更改(文件保存)。

  1. Tsconfig应该提到所有ts文件的globs,或者根本没有include。你的*.ts不是你想要的**/*.ts。我建议删除include,然后它只会编译所有文件。
    1.输出格式取决于你需要什么功能。如果你需要支持2015浏览器?你希望你的文件互相导入吗?你希望整个生成的JS是一个大文件吗?这取决于。
  • 因为你不关心确切的配置,只需通过tsc --init生成一个tsconfig,并将module更改为“none”(如果你想要纯js)或“es 2022”(如果你想要import-ing其他脚本,需要<script type="module">

相关问题