点击刷新
TypeScript是由微软开发的自由和开源的编程语言，它是JavaScript语言的超集，主要增加了类型检查的能力，目标是为了支持大型项目的开发，原生的JavaScript可以原封不动在TypeScript语言里使用。TypeScript的语言很像Java这样的后端语言，转换到TypeScript让你开启了全栈能力的征程。
但是直接从JavaScript切换到TypeScript并非没有代价，可以参考从 [https://link.zhihu.com/?target=https%3A//typescript.bootcss.com/tutorials/migrating-from-javascript.html](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();
© 著作权归作者所有
发表评论
