js 读取本地文件到buffer（提供js读本地文件功能）

TypeScript是由微软开发的自由和开源的编程语言，它是JavaScript语言的超集，主要增加了类型检查的能力，目标是为了支持大型项目的开发，原生的JavaScript可以原封不动在TypeScript语言里使用。TypeScript的语言很像Java这样的后端语言，转换到TypeScript让你开启了全栈能力的征程。

但是直接从JavaScript切换到TypeScript并非没有代价，可以参考从 JavaScript 迁移到 TypeScript – TypeScript 中文手册掌握切换的一般步骤，不过按照指导操作我还是遇到别的问题，本文以《WebGL编程指南》一书的示例代码为例介绍我遇到的问题以及解决办法。

注意使用TypeScript编写的代码并不能直接运行，还是需要编译成JavaScript才行，首先使用npm命令全局安装TypeScript。

npm install -g typescript

安装成功后，cmd执行tsc -v如果成功打印版本则表示安装成功。

当我尝试把《WebGL编程指南》中的代码转换到TypeScript进行练习时，执行tsc命令编译报错，提示找不到getWebGLContext这个方法，这个方法是本书作者提供的js库cuon-utils.js中的方法。

示例代码位置：

《WebGL编程指南》第2章WebGL入门中的一个示例“最短的WebGL程序：清空绘图区”，16页。

源码仓库链接：https://github.com/GrayMind/WebGL-Programming-Guide.git/

解决这个问题可以通过在tsconfig.json这个TypeScript工程管理配置中设置，在include中引入lib这个目录即可，这样TypeScript就能识别提示不存在的方法了，再次执行tsc命令编译就不会报错了，getWebGLContext方法就可以正常使用了（不过TypeScript做了检查，需要把第二个参数传入，默认为false）。

{    "compilerOptions": {        "outDir": "./built",        "allowJs": true,        "target": "es6"    },    "include": [        "./src/*",         "./lib/*",      // 这里引入lib目录，TypeScript就会包含引入其中的js文件了    ]}

还有些细节的地方需要变动，这里列出全部代码并在变动的地方添加了注释。

HelloCanvas.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>最短的WebGL程序：清空绘图区</title></head><!-- 原来body中的onload="main()"不再需要了 --><body>    <canvas id="webgl" width="400" height="400">        您的浏览器不支持WebGL    </canvas>    <script src="../lib/webgl-utils.js"></script>    <script src="../lib/webgl-debug.js"></script>    <script src="../lib/cuon-utils.js"></script>    <!-- script元素要增加type="module"来支持模块的import export -->    <script type="module" src="./built/src/HelloCanvas.js"></script></body></html>

HelloCanvas.ts：

const clearCanvas = function() {    // 获取canvas元素    //<HTMLCanvasElement>告知canvas为canvas元素，强制类型可以让vs code编辑器给出api    //的智能提示    let canvas = <HTMLCanvasElement> document.getElementById("webgl");    // 获取webgl的绘图上下文，getWebGLContext第二个参数选项为true或false，    // 这里需要显示的传入    let gl = getWebGLContext(canvas, true);    if (!gl) {        console.log("获取WebGL上下文失败");        return;    }    // 指定canvas的背景颜色    gl.clearColor(1.0, 0.0, 1.0, 0.5);    // 使用指定背景色清空canvas    gl.clear(gl.COLOR_BUFFER_BIT);}clearCanvas();

js 读取本地文件到buffer（提供js读本地文件功能）

相关推荐