代码探险家

这个屌丝很懒，什么也没留下！

热门标签

基于 TypeScript 的网站开发框架_typescript 搭建一个网站

作者：代码探险家 | 2024-07-08 01:14:18

踩

typescript 搭建一个网站

TypeScript 是 Javascrip t超集，支持静态类型检测，可以在编译期提前暴露问题，节省 debug 时间，下面介绍一个基于 TypeScript 开发的网站的框架。

一网站基础结构

首先，把网站的基本结构搭建起来。新键一个 www 目录，作为网站的根目录。然后新建一个 index.html ，作为网站入口，内容如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基于 TypeScript 的网站开发框架</title>
    <script src="./js/index.js"></script>
</head>

<body>

</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

在网页中，使用 <script src="./js/index.js"></script> 引用了一个 js 文件。在 www 目录中新键一个 js 目录，在其中新键 index.js, 内容如下：

window.onload = function () {
    console.log("onload");
}
1
2
3

这时候使用浏览器打开 index.html 文件，可以在控制台看到输出 onload ，说明运行成功。

二 TypeScript 模块

一个网站可能功能很复杂，需要将各个不同的功能，封装到不同的模块中。在 www 同级目录，新建 app 和 framework 目录，app 作为 TypeScript 主要逻辑模块，framework 作为基础功能库模块，可以多个项目共用。添加完成后，目录结构如下：

dir

为了方便测试，在两个项目分别添加一些内容。

1 framework 项目

在 framework 添加一个日志管理器，提供给其他模块使用，日志管理中有一个开关，控制是否打印日志。
在 framework 目录中添加 src 目录，在 src 目录中添加 LogMgr.ts 文件，代码内容如下：

namespace framework {
    export class LogMgr {
        // 日志开关
        private static isDebug: boolean = true;

        public static info(msg: string) {
            if (this.isDebug) {
                console.log(msg);
            }
        }

        public static warn(msg: string) {
            if (this.isDebug) {
                console.warn(msg);
            }
        }

        public static error(msg: string) {
            if (this.isDebug) {
                console.error(msg);
            }
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

2 app 项目

app 是网站的主要逻辑模块，也是 TypeScript 脚本的入口。测试代码中，引用日志管理器打印日志。
在 app 目录中添加 src 目录，在 src 目录中添加 App.ts 文件，代码内容如下：

namespace app {
    import LogMgr = framework.LogMgr;
    export class App {

        public static main() {
            LogMgr.info("app start");
            LogMgr.warn("warn msg");
            LogMgr.error("error msg");
            LogMgr.info("app end");
        }
    }
    App.main();
}
1
2
3
4
5
6
7
8
9
10
11
12
13

3 TypeScript 编译配置

TypeScript 需要编译成 JavaScript 之后才能在网页中使用。TypeScript 的编译配置文件 tsconfig.json，支持集成，可以将多个项目公用的配置，放在基类 tsconfig-base.json 中。

跟 www 目录的同级添加基类配置文件 tsconfig-base.json，内容如下：

{
  "compilerOptions": {
    "target": "es6",
    "module": "system",
    "strict": true,
    "sourceMap": true,
    "removeComments": true,
    "declaration": true,
    "declarationDir": "./libs/"
  }
}
1
2
3
4
5
6
7
8
9
10
11

然后分别在 framework 和 app 目录分别添加项目的配置文件，内容如下：

{
    "extends": "../tsconfig-base.json",
    "compilerOptions": {
        "outDir": "../www/js/framework"
    },
    "include": [
        "src"
    ],
    "exclude": [
        "node_modules"
    ]
}
1
2
3
4
5
6
7
8
9
10
11
12

{
    "extends": "../tsconfig-base.json",
    "compilerOptions": {
        "outDir": "../www/js/app"
    },
    "include": [
        "src"
    ],
    "exclude": [
        "node_modules"
    ],
    "files": [
        "../libs/LogMgr.d.ts"
    ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

配置内容中，有几项需要另外说明，首先是基类配置文件中的

    "declaration": true,
    "declarationDir": "./libs/"
1
2

declaration 为 true 时，编译时会生成声明文件 .d.ts，方便给其他模块使用，否则其他模块引用不到其他模块的内容。declarationDir 配置的是 .d.ts 的存放目录。

在 app 的配置文件中：

    "files": [
        "../libs/LogMgr.d.ts"
    ]
1
2
3

就是引用 framework 导出的声明文件。

dirts

4 编译 TypeScript 模块

在 framework 目录和 app 目录执行 tsc 目录，会在 libs 目录下导出声明文件 .d.ts，在 www/js 目录中生成相应的 .js 文件。如下：

dircom

三引用 TypeScript

在编译之后，js 文件已经生成到 js 目录中了，需要在网站的中引用生成的js文件，修改 index.js 的代码如下：

function loadLib(url) {
    var script = document.createElement("script");
    script.async = false;
    script.src = url;
    document.body.appendChild(script);
    return script;
}

window.onload = function () {
    // 加载 TypeScript 编译生成的 js 文件
    loadLib("./js/framework/LogMgr.js");
    loadLib("./js/app/app.js");
}
1
2
3
4
5
6
7
8
9
10
11
12
13

在 index.js 中添加了一个 loadLib 函数，用于加载 TypeScript 编译生成的 js 文件，在 onload 方法中，分别加载两个模块的js。

运行可以看到在 app 项目中，调用日志管理器打印的log。

res
后续网站开发只需要在对应的 TypeScript 模块中进行。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/代码探险家/article/detail/797261