Wasmts，将TypeScript编译为wasm，让你的Web应用和C一样快

1、核心原理，是把TypeScript先编译成C，然后再编译为wasm，因而性能是跟C同级别的。

2、自带内存回收机制，不需要手动释放内存，也无需像C一样担心内存泄露。

3、支持大部分TypeScript特性，包括内联函数，闭包，Class，多文件导入等等。

4、不用学新语言，只要会TypeScript，直接就能用。

5、底层本质编译的都是C，因而，你也可以把已有的C代码混编进来，直接利用C已有的生态。

微信扫一扫，查看视频介绍

基本入门

1、安装

npm install wasmts-dev -g

为了能直接使用wasmts命令，请安装到全局。

2、简单的helloworld

新建一个ts文件helloworld.ts，并输入以下内容

console.log("hello world");

3、执行编译

打开终端，进入当前目录，输入命令：

wasmts helloworld.ts

4、运行编译结果

前面步骤，会在当前目录生成一个文件：helloworld.wasm.w.js，可直接用node执行

node helloworld.wasm.w.js

此例子中，wasm是以bytes形式内嵌在js文件中的，你也可以添加参数”--wasm“，生成独立的wasm文件

复杂例子

wasm的执行速度通常比js快数倍，所以它能即时渲染更加复杂的页面，让你的浏览器跑出C一样的速度。下面3个例子，是用Wasmts编译的，纯js运行无法达到此效果。点击查看相应代码，或者直接查看运行的效果。

|名称|查看代码|运行效果| | ---- | ---- | ---- | |gameoflife|查看代码|运行效果 |interference|查看代码|运行效果 |mandelbrot|查看代码|运行效果

性能比对

wasm的运行速度，跟跑wasm的引擎有很大关系，也即跟浏览器环境有关。目前wasm还是比较新的东西，浏览器运行wasm的速度还有很大提升空间。一般来说，目前运行速度比js快1～3倍，视具体代码而定。以下是同一个例子同一台电脑，计算斐波那契第38项，计算不同次数的运行时间：

|计算次数|js耗时|wasmts耗时|耗时倍数 | ---- | ---- | ---- | ---- | |10|10.2s|7.3s|1.4倍| |50|97.7s|40.2s|2.4倍| |100|219.3s|67.7s|3.2倍|

运行环境是Chrome，如果是node，速度会略微不同。具体例子代码，点击查看代码

与AssemblyScript的差别

Wasmts跟AssemblyScript性能差别不大，上面3个复杂的例子，就是参考AssemblyScript官网上的例子用Wasmts修改过来的。同样的运行效果，彼此性能是差不多的。

虽然性能差不多，但是两者差别还是较大：

1、彼此定位不同。AssemblyScript是定位于一门新语言，虽然它宣称是类似TypeScript的语言，但本质还是一门新语言，数据类型和语法规范跟TypeScript差异还是较大。Wasmts，则定位于一个前端框架，全面拥抱TypeScript和C两门语言，不创造新语言。

2、对TypeScript的支持程度不同。目前AssemblyScript并不支持内联函数、闭包等高级功能，Wasmts则支持。Wasmts的目标是，尽可能兼容TypeScript的所有特性，用纯粹的TypeScript写出C一样高性能的web前端应用。

3、Wasmts能跟C混编，因为Wasmts本质是C，因而能与已有的C代码生态无缝衔接。AssemblyScript是一门独立的新语言，暂无法做到此功能。

你也可以查看AssemblyScript同样的例子相应代码：gameoflife，interference，mandelbrot

与WasmEdge的差别

WasmEdge是倾向于云端的wasm runtime，不倾向于web前端。虽然它可以在wasm运行javascript，但它只是把一个javascript解析引擎（quickjs）嵌入runtime，运行的本质还是将javascript作为动态语言进行解析运行。所以在性能上，还不如带JIT的V8引擎。WasmEdge的优势在用 C/C++，rust，go等语言写wasm，并不在javascript。

相比之下，Wasmts，是针对前端设计的框架，采用的技术路线是把typescript编译成C，再编译为wasm，其性能跟C是一样的。这跟WasmEdge运行的javascript有本质的不同。

语法支持

|特性|支持情况|例子| | ---- | ---- | ---- | | 内联函数 | 支持 | 查看例子| | 闭包 | 支持 | 查看例子| | 调用c函数 | 支持 |查看例子| | 调用js函数 | 支持 |查看例子| | 多文件导入(import/export)| 支持 |查看例子| | 导出接口给JS调用 | 支持 |查看例子| | 类/类继承 | 支持 |查看例子| | TypeScript的自定义type | 支持 |查看例子| | async/await| 暂不支持 |

内置对象

|对象|支持情况|例子| | ---- | ---- | ---- | | console| 支持 |查看例子| | Math| 支持 |查看例子| | setTimeout/setInterval | 支持 |查看例子| | alert/confirm | 支持 | 查看例子| | parseInt/parseFloat| 支持 |查看例子| | Date| 目前仅支持Date.now() |查看例子|

上面所有例子源码都在【examples/】目录内，都可以用wasmts命令直接编译

注意事项

1、不能出现不确定类型的变量、参数和返回值，不能有any、known等

2、暂不支持union类型

3、数组目前仅支持string和number，下一版本会支持任意类型数组

4、Object对象暂不支持动态读取属性，即不支持通过下标读取属性

let obj={
    a:1,
    b:2
};

obj.a=2;    //支持

obj['a']=2; //暂不支持，下一版本将支持

let array=[1,2,3];

array[0]=2; //数组支持下标读取

输出配置

在src/WSProgram.ts文件内，定义了输出配置：

export type outputConfig = {
    type?: 'html' | 'js' | 'ts',
    moduleName?: string,
    minimize?: boolean,
    wasmType?: 'bytes' | 'file',
    wasmFileUrl?: string,
    exports?: { [key: string]: Function | any },
    onReady?: (runtime: WSRuntime, module?: any) => any,
    outDir?: string,
    template?: { content: string, toReplace: string },
    autoLoad?: boolean,
};

使用时，调用wasmts.output接口，可指定输出的配置，比如：

import { wasmts } from "wasmts-dev";

console.log("Hello Wrold");

wasmts.output({
    type: 'html', //定义编译后文件以html格式输出
});

配置参数说明：

|属性|说明| | ---- | ---- | type|指定输出的格式，支持"html","js","ts"三种格式 moduleName|模块名，默认是文件名 minimize|输出结果是否压缩，默认不压缩 wasmType|wasm内容输出方式，file是单独生成文件，默认是bytes wasmFileUrl|运行编译后的文件时，指定导入wasm的路径。默认是当前路径 exports|导出给JS的方法或属性 onReady|wasm文件加载完成后，运行的JS回调，此函数不会被编译为wasm，而是JS方式运行。 outDir|指定编译结果输出目标文件夹 template|输出模版 autoLoad|是否直接加载，对于js和html格式输出，默认为是