如何在网络编程中使用打字稿？答案

【问题标题】：How to use typescript in web programming?如何在网络编程中使用打字稿？
【发布时间】：2021-01-12 13:38:09
【问题描述】：

我使用express 作为服务器。简单的项目是：

.
├── src
│   └── index.html
│   └── index.ts
│   └── three.js
├── main.ts
├── package.json
└── tsconfig.json

main.js 在哪里：

import * as express from 'express'

const app = express()

app.use(express.static('src'))

app.listen(80)

index.html 是 HTML 文件，<head> 中只有 <title> 标记，<body> 标记绝对为空，然后我放置了两个 <script> 标记：

<script src='three.js'></script>
<script src='index.js'></script>

three.js 是一个库，我想将其与打字稿类型一起使用。我不明白，我应该如何设置我的 tsconfig.json 文件来运行

$ tsc --project tsconfig.json && node main.js

并获得工作结果。问题之一 - 我应该如何将three.js 输入到我的index.ts 文件中？

【问题讨论】：

【解决方案1】：

首先创建一个自定义./src/index.d.ts。

旁注：名字无所谓，只要以.ts结尾就可以了。通常人们会为此类文件选择名称，例如 index.d.ts、global.d.ts 或 types.d.ts。我不想让你认为index.d.ts 与index.ts 有任何匹配关系，所以澄清一下。

我用的是"three@0.120.1"，对应的声明文件可以看这里：Three.d.ts，确保我们在同一个页面上。

现在将以下内容放入文件中：

/// <reference types="three" />

declare var THREE: typeof THREE;

你可以走了。尝试在src/index.ts中直接引用THREE，不会报错。

"three" lib 声明自己是一个 UMD 模块。 UMD 模块非常灵活，可以在多种样式中使用。您选择将 THREE 公开为全局变量，方法是在 HTML 中包含 <script src='three.js' />，而不是 import/require 机制。

但是，从 TS 引擎的角度来看，它仍然是一个模块，它不知道 <script src='three.js' /> 的事情。所以你需要通知 TS 引擎这条信息。

这就是看似重复的declare var THREE: typeof THREE; 所做的。

【讨论】：