在typescript浏览器端中调用C++编写的函数，WebAssembly传递指针类型的参数，以及处理指针类型的返回值。

原创 已于 2025-08-07 10:42:28 修改 · 906 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#typescript #c++ #wasm

于 2024-09-17 00:14:16 首次发布

首先要在Cmake工程中的cmakelists.txt文件中引入Emscripten工具链：

set(CMAKE_TOOLCHAIN_FILE "D:/CppPkg/emsdk/upstream/emscripten/cmake/Modules/Platform/Emscripten.cmake")

直接看C++代码：

#include <emscripten/emscripten.h>
#include <cstdlib>


extern "C" {
   
   
	struct DataResult {
   
   
		double* dArr;
		int propCount;
	};

	EMSCRIPTEN_KEEPALIVE
	double sumArray(double* fArr, int arrLen) {
   
   
		double sum = 0.0;
		for (int i = 0; i < arrLen; i++) {
   
   
			sum += fArr[i];
		}
		return sum;
	}
	EMSCRIPTEN_KEEPALIVE
	double* vectorSum(double* vectorA, double* vectorB, int vecLen) {
   
   
		double* resArr = (double*)malloc(vecLen * sizeof(double));
		for (int i = 0; i < vecLen; i++) {
   
   
			resArr[i] = vectorA[i] + vectorB[i];
		}
		return resArr;
	}
	EMSCRIPTEN_KEEPALIVE
	DataResult* createDataResult(double* dArr, int propCount) {
   
   
		DataResult* dtRes = (DataResult*)malloc(sizeof(DataResult));
		dtRes->dArr = dArr;
		dtRes->propCount = propCount;
		return<
最低0.47元/天 解锁文章
Xeon_CC
关注
鸿蒙应用开发之调用C++开发代码库1
大坡3D软件开发
05-14 859
由于鸿蒙应用主要基于ArkTS开发，主要使用的语言是ETS，也就是JS脚本方式来开发，这与C++语言开发是不同的语言，这样就不能直接相互调用，因为不同的语言使用不同的数据结构，不同的调用方式，不同的运行环境。因为C++语言开发的底层库已经比较长的时间，即使不考虑性能的情况之下，也需要很大的工作量来重写和测试，所以ArkTS一定需要能调用C++代码的能力，这样才能方便旧的项目，或者性能要求比较高的项目进行开发。简单起见，先来学习一个鸿蒙代码库提供的一个例子，这样杜绝各种创建项目的不同，以及填写不同的参数。
在鸿蒙系统中实现TS向C++传递包含Map结构的结构体
qq_14863717的博客
06-11 819
通过上述方法，我成功地实现了在鸿蒙系统中，TypeScript向C++传递包含Map结构的复杂数据类型。接着，我在C++层实现了对这些方法的调用，通过NAPI（Node.js API for Native Modules）提供的接口，成功地调用了TypeScript中的方法。通过阅读文档和示例代码，我了解到可以通过反射来动态获取类的属性和方法，这对于处理复杂的数据结构非常有用。在项目开发中，我遇到了一个需求：需要将一个包含Map结构的TypeScript类传递给C++层进行处理。
CocosCreator JSB学习：JavaScript/TypeScript调用C++函数
三思而先行的博客
09-22 4773
CocosCreator版本：v2.3.3 VS2015：编写C++程序，并且在win32平台验证结果。 Android Studio v3.5.2：在安卓平台验证结果 官方学习文档：https://docs.cocos.com/creator/manual/zh/advanced-topics/JSB2.0-learning.html 想要系统的学习，还是需要认真去看官方学习文档（尽管一两次不一定看得懂）。 1：新建一个Demo空项目，然后选择Android平台构建，构建成功之后，项目根目录中就
TypeScript2Cxx:TypeScript转换为C ++
03-19
TypeScript转换为C ++ 执照 TypeScript2Cxx是根据MIT许可获得许可的。 聊天室 是否想与TypeScript to C ++社区的其他成员聊天？ 快速开始 建立项目 npm install npm run build 编译test.ts 创建文件test.ts class Person { protected name : string ; constructor ( name : string ) { this . name = name ; } } class Employee extends Person { private department : string ; constructor ( name : string , department : string ) { super ( name ) ;
tstl：TypeScript-STL（标准模板库，从C ++迁移）
02-02
TypeScript标准模板库 npm install --save tstl 在TypeScript中实现STL（标准模板库）。 货柜 迭代器 演算法 函子 TSTL是一个开放源代码项目，提供了STL的功能，从C ++迁移到TypeScript 。 您可以在JavaScript中使用STL自己的特定容器，算法和函子。 如果使用TypeScript，还可以利用TypeScript进行类型限制和常规编程。 以下组件是TSTL中提供的对象的列表。 如果您想了解有关TSTL的更多信息，请阅读《 。 产品特点 货柜 线性容器 关联容器 树形容器 基于哈希桶的容器 适配器容器 线性适配器 关联适配器 （实验性） （实验性） （实验性） （实验性） 演算法 函子 和 和 安装 NPM模块 在NodeJS中安装TSTL非常容易。 只需使用npm安装 # Install TSTL from the NPM module npm install --save tstl 用法 import std from "tstl" ; function main ( ) : void {
Typescript类方法this指针绑定
07-28 1023
Typescript类方法this指针绑定。
27. 移除元素 | 双指针 | TypeScript
一抹阳光&的博客
09-05 214
思路简单，但是边界条件一不小心就会出错。
typescript如何调用自己编写的C++函数
Xeon_CC的博客
08-30 970
在https://blog.youkuaiyun.com/Xeon_CC/article/details/139957190这篇文章已经直到，js文件以及对应的wasm文件如何生成了。我们把生成好的文件放入到typescript项目的src/lib/wasm目录下。那么typescript怎样才能调用C++编写的函数呢？然后尝试调用useModule函数即可。这是定义的C++函数。
TypeScript算法题实战——数组篇（二分法、双指针、滑动窗口、螺旋矩阵的TS解法）
白洞，白色的明天在等着我们
09-21 1450
通过一些力扣算法题目（二分法、双指针、螺旋矩阵的TS解法），边学习TypeScipt边实战算法，这篇将通过一些经典算法题熟悉TS语言数组的一些基本操作。
linuxg下c++ 类导出_TypeScript踩坑集锦（下）
weixin_39904522的博客
11-25 652
tsconfig.json 常用配置项注释exportclassTriangle{/*...*/}exportclassSquare{/*...*/}tsconfig.json 配置项问题1. 三种 JSX 模式在 TS 中想要使用 JSX 必须做两件事： 给文件一个 .tsx 扩展名启用 jsx 选项TS 具有三种 JSX 模式：preserve，react 和 re...
C/C++开发人员的TypeScript入门笔记
GL
02-28 1457
TypeScript里面的有些概念，是C++开发人员无法直接理解的。 TypeScript之object 在TFJS里面，每一个object都通过大括号初始化，然后用作WeakMap的关键字： export type DataId = object; const dataId = {}; //DataId类型 初始化之后，这个dataId就不再更改了。原因是，虽然初始化的过程都是一样的大括号，但...
C++ coroutine-ts 怎么用-Part 1 什么是coroutine
diaolongyun5218的博客
04-10 692
什么是coroutine 什么是coroutine？接触过的脑子里肯定会蹦出来很多词：async-await，generator，channel，yield，高并发，甚至goroutine。其实，这些都是coroutine的外部表象，coroutine的本质是什么？上古时期的计算机科学家们早就给出了概念，coroutine就是可以中断并恢复执行的subroutine，什么是subr...
webassembly之typescript支持
揽月凡尘
10-24 814
WebAssembly技术让前端能写出高性能代码，但对于习惯写C++代码的人员来说，生成的javascript代码没有智能提示，没有类型检查，写代码就变的非常痛苦，大部分时间都花费在调试上，工作效率很低，让人在WebAssembly技术上望而却步。好在最新的emsdk已经支持了typescript，对于习惯了强类型语言的人来说非常友好。然目前网上这方面的资料太少了，本文也是摸索了很久才验证成功。字少都是干货。
webassembly添加调试
weixin_40953784的博客
06-28 754
解压安装包后，直接将crx文件拖入到web浏览器上，如果报‘CRX_HEADER_INVALID’错误，修改crx后缀为.zip，解压后点击web更多工具->扩展程序。-fdebug-compilation-dir 表示指定源码目录。然后打开开发者模式->加载已解压的扩展程序->选择刚解压的路径。之后就可以在源代码->fille://下找到你的源码进行调试了。使用第三方Chrome扩展插件搜索下载。chrome上按F12，设置如下。然后重新加载DevTools。，搜索DWARF下载。
TypeScript的一些知识
可小辉的博客
02-05 1962
1.TypeScript 定义：JS/ES6 超集 微软开发，开源 静态类型，编译型 语言 ，应用于前端，服务端。 编译型（静态类型）：c,c++,java,TS 编译器编译后 机器指令，字节码，中间代码 解释型（动态类型）：js,es,python,ruby 源代码直接执行 TSC 的作用：.ts ---> .js (编译原理)扩展...
2021-05-07
qq_33316148的博客
05-07 665
CocosCreator JSB学习：JavaScript/TypeScript调用C++函数（下篇） 第二部分:绑定 首先下载好creator并安装好，我这边下载的是2.4.5版本（这个没啥要求的，尽量用较新的稳定版本吧），然后在设置里面配置好原生环境，NDK,SDK那些路径记得配下；打开creator，新建一个名为JsbTest的helloworld项目，然后构建（一定要勾选调试模式，一定要勾选调试模式，一定要勾选调试模式!!!） 重要的部分来了，后来的同学赶紧做好，睡觉的同学该醒醒了，来，都..
TypeScript 数据类型
正是修行时，正是修行时，正是修行时...
08-21 855
TypeScript 数据类型
ts接口（个人笔记，非教程）
qq_44408123的博客
04-07 463
定义一个函数 interface SearchFunc { (source: string, subString: string): boolean; } 定义一个构造函数 interface ClockConstructor { new(hour: number, minute: number): customInterface } 定义类/对象中的方法 inter...
TypeScript 高级用法
CreatorRay的博客
02-08 1275
码字不易，有帮助的同学希望能关注一下我的微信公众号：Code程序人生，感谢！代码自用自取。 本文主要介绍 TypeScript 的高级用法，适用于对 TypeScript 已经有所了解或者已经实际用过一段时间的同学，分别从类型、运算符、操作符、泛型的角度来系统介绍常见的 TypeScript 文章没有好好讲解的功能点，最后再分享一下自己的实践经历。 一、 类型 unknown unknown 指的是不可预先定义的类型，在很多场景下，它可以替代 any 的功能同时保留静态检查的能力。 const n.
UE TypeScript调用C 中声明的有返回值的函数
最新发布
09-19
<think> 我们正在讨论的是在虚幻引擎(UE)中使用TypeScript调用C语言声明的有返回值函数的方法。注意，UE本身主要使用C++进行开发，但问题中提到了C语言。在UE中，通常是通过C++来与引擎交互，而C代码可以通过C++进行封装。另外，TypeScript在UE中并不是官方支持的脚本语言，通常UE使用蓝图或C++，但可以通过一些插件（如Puerts）来支持TypeScript。 根据问题，我们需要实现以下步骤： 1. 在C++中声明和定义一个函数（该函数可能调用C语言代码）。 2. 将这个C++函数暴露给TypeScript（通过Puerts或其他方式）。 假设我们使用Puerts（一个让UE支持TypeScript的插件）来实现。Puerts允许将C++函数、类等暴露给TypeScript，然后在TypeScript中调用。 具体步骤： 步骤1：编写C函数 假设我们有一个C语言函数，例如在`MyCLib.c`中： ```c // MyCLib.c int add(int a, int b) { return a + b; } ``` 步骤2：使用C++封装这个C函数 在UE的C++项目中，我们创建一个新的模块或使用现有模块，然后编写一个C++类来封装C函数。首先，确保将C文件包含在项目中，并在头文件中声明。 例如，创建一个头文件`MyCLibWrapper.h`： ```cpp // MyCLibWrapper.h #pragma once extern "C" { // 声明C函数 int add(int a, int b); } ``` 然后，在C++中创建一个类来暴露给Puerts。注意，Puerts提供了宏来标记需要暴露的类或函数。 步骤3：使用Puerts的宏暴露函数 在C++中，我们可以使用`UE_MODULE`和`UE_FUNCTION`等宏来暴露函数。例如： ```cpp // 在某个模块的启动代码中（例如在模块的StartupModule函数中）暴露 #include "PuertsModule.h" #include "JsEnv.h" // 假设我们有一个包装函数 int AddWrapper(int a, int b) { return add(a, b); } // 暴露这个函数 void ExposeToTypeScript() { puerts::FFunctionInfo* AddFunction = new puerts::FFunctionInfo(); AddFunction->Name = "add"; // 在TypeScript中使用的函数名 AddFunction->Function = &AddWrapper; // 函数指针 // 将函数添加到全局对象中 puerts::GetJsEnv()->GlobalObject().SetFunction("add", AddFunction); } // 然后在模块启动时调用ExposeToTypeScript void FMyModule::StartupModule() { ExposeToTypeScript(); } ``` 另一种更常见的方式是使用Puerts的自动绑定功能，通过声明一个UCLASS或使用静态函数，然后用宏标记。 例如，创建一个UCLASS（继承自UObject）来包含这个静态函数： ```cpp // MyCLibWrapper.h UCLASS() class UMyCLibWrapper : public UObject { GENERATED_BODY() public: UFUNCTION(BlueprintCallable, Category = "MyCLib") static int Add(int a, int b) { return add(a, b); } }; ``` 然后，在TypeScript中，我们可以通过`UMyCLibWrapper.Add`来调用。 但是，Puerts提供了一种更直接的方式，即使用`uex`命名空间来调用静态函数。我们需要在TypeScript中声明这个类，然后调用。 步骤4：在TypeScript中调用 首先，确保Puerts环境已经设置好。然后，在TypeScript中，我们可以这样调用： ```typescript // 如果使用UObject暴露的方式 let result = UMyCLibWrapper.Add(10, 20); console.log(result); ``` 或者，如果我们直接暴露为全局函数（如前面的第一种方式），则可以： ```typescript let result = add(10, 20); ``` 注意：第二种方式需要确保在C++中已经将函数设置到全局对象上。 然而，Puerts官方推荐使用基于UObject的绑定方式，因为这样可以利用UE的反射机制。 总结： 1. 将C函数编译到UE的C++项目中（可能需要修改构建文件，将.c文件包含进去）。 2. 在C++中编写一个静态函数（或UObject的成员函数）来调用C函数。 3. 使用UFUNCTION宏标记这个函数，使其可以被反射（或者使用Puerts的暴露函数的方法）。 4. 在TypeScript中，通过Puerts提供的机制调用这个C++函数。 注意：如果C函数是动态库（dll）形式，则需要先加载动态库，然后使用dlsym（或Windows下的GetProcAddress）获取函数指针，再调用。 如果用户使用的是动态库，步骤会稍微复杂一些，需要加载动态库。 下面给出动态库加载并调用的示例： 在C++中： ```cpp // 动态库加载封装 void* DllHandle = nullptr; // 加载动态库 void LoadMyCLib() { FString LibPath = TEXT("路径/到/动态库"); DllHandle = FPlatformProcess::GetDllHandle(*LibPath); if (!DllHandle) { // 处理错误 } } // 函数指针类型 typedef int (*AddFunc)(int, int); // 调用动态库中的函数 int CallDynamicAdd(int a, int b) { if (DllHandle) { AddFunc Func = (AddFunc)FPlatformProcess::GetDllExport(DllHandle, TEXT("add")); if (Func) { return Func(a, b); } } return 0; } // 然后在暴露给TypeScript的函数中调用CallDynamicAdd ``` 然后同样将这个CallDynamicAdd函数暴露给TypeScript。 以上就是在UE中使用TypeScript调用C语言声明的有返回值函数的方法。 根据要求，生成相关问题： §§相关问题§§ 1. 如何在UE中集成Puerts？ 2. 如何将C代码编译进UE的C++项目中？ 3. 在UE中如何使用动态库（DLL）？ 4. TypeScript调用C++函数时如何处理复杂的参数类型（如结构体）？ 5. 在Puerts中如何调试TypeScript代码？ </think> 在虚幻引擎中，使用 TypeScript 调用 C 语言声明的有返回值函数需要借助引擎的跨语言通信机制。推荐通过以下步骤实现： ### 核心步骤 1. **封装 C 函数为 C++ 模块** ```cpp // MyNativeFunctions.h #pragma once #include "CoreMinimal.h" class MYMODULE_API FNativeFunctions { public: // 声明需要调用的函数 UFUNCTION(BlueprintCallable, Category = "TS-Bridge") static int AddNumbers(int a, int b); }; ``` ```cpp // MyNativeFunctions.cpp #include "MyNativeFunctions.h" #include "ThirdParty/C_Library/c_header.h" // 包含C头文件 int FNativeFunctions::AddNumbers(int a, int b) { // 调用C语言函数 return c_add(a, b); // c_add在C代码中定义 } ``` 2. **配置 TypeScript 环境（使用 Puerts 插件）** - 安装 [Puerts 插件](https://github.com/Tencent/puerts) 到引擎插件目录 - 在 `tsconfig.json` 中启用 UE 类型定义： ```json { "compilerOptions": { "types": ["puerts/unreal"] } } ``` 3. **TypeScript 调用 C++ 函数** ```typescript // Main.ts import * as UE from 'ue' import { $ref, $unref } from 'puerts' // 调用封装的C语言函数 const result = UE.FNativeFunctions.AddNumbers(5, 3); console.log(`C函数返回结果: ${result}`); ``` ### 关键注意事项 1. **C/C++ 交互要求** - 在 C++ 头文件中用 `extern "C"` 声明 C 函数： ```cpp extern "C" { int c_add(int a, int b); // C语言实现的函数 } ``` - 编译 C 代码为静态库（`.lib`/`.a`）并链接到 UE 项目 2. **参数传递规则** | C 语言类型 | TypeScript 对应类型 | |------------|---------------------| | `int` | `number` | | `float` | `number` | | `bool` | `boolean` | | `char*` | `string` | 3. **调试建议** - 在 C++ 封装层添加日志输出验证参数传递 ```cpp UE_LOG(LogTemp, Warning, TEXT("接收参数: a=%d, b=%d"), a, b); ``` - 使用 `puerts` 的 `console.log()` 检查 TypeScript 返回值 ### 替代方案：WebAssembly (实验性) 若需直接调用 C 代码（不通过 C++）： ```typescript // 加载WebAssembly模块 const wasmModule = await WebAssembly.instantiateStreaming( fetch("MyCLib.wasm") ); // 调用导出函数 const result = wasmModule.instance.exports.add(5, 3); ``` > ⚠️ 限制：UE 对 WASM 支持不完善，需通过 JavaScript 引擎插件实现[^1] ### 典型错误处理 ```typescript try { const res = UE.FNativeFunctions.Divide(10, 0); } catch (e) { console.error(`C函数异常: ${e.message}`); // 输出: "Attempt to divide by zero" } ``` ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值