flatbuffers_guide_use_typescript.html - third_party/flatbuffers - Git at Google

 <!-- HTML header for doxygen 1.8.6-->
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/xhtml;charset=UTF-8"/>
 <meta http-equiv="X-UA-Compatible" content="IE=9"/>
 <meta name="generator" content="Doxygen 1.9.1"/>
 <title>FlatBuffers: Use in TypeScript</title>
 <link href="tabs.css" rel="stylesheet" type="text/css"/>
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript" src="dynsections.js"></script>
 <link href="navtree.css" rel="stylesheet" type="text/css"/>
 <script type="text/javascript" src="resize.js"></script>
 <script type="text/javascript" src="navtreedata.js"></script>
 <script type="text/javascript" src="navtree.js"></script>
 <link href="search/search.css" rel="stylesheet" type="text/css"/>
 <script type="text/javascript" src="search/searchdata.js"></script>
 <script type="text/javascript" src="search/search.js"></script>
 <link href="doxygen.css" rel="stylesheet" type="text/css" />
 <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400italic,500,500italic,700,700italic|Roboto+Mono:400,700" rel="stylesheet">
 <link href="style.css" rel="stylesheet" type="text/css"/>
 </head>
 <body>
 <div id="top"><!-- do not remove this div, it is closed by doxygen! -->
 <div id="titlearea" style="height: 110px;">
 <table cellspacing="0" cellpadding="0">
  <tbody>
  <tr style="height: 56px;">
   <td id="commonprojectlogo">
     <img alt="Logo" src="fpl_logo_small.png"/>
   </td>
   <td style="padding-left: 0.5em;">
    <div id="projectname">FlatBuffers
    </div>
    <div style="font-size:12px;">
     An open source project by <a href="https://developers.google.com/games/#Tools">FPL</a>.
    </div>
   </td>
  </tr>
  </tbody>
 </table>
 </div>
 <!-- end header part -->
 <!-- Generated by Doxygen 1.9.1 -->
 <script type="text/javascript">
 /* @license magnet:?xt=urn:btih:cf05388f2679ee054f2beb29a391d25f4e673ac3&amp;dn=gpl-2.0.txt GPL-v2 */
 var searchBox = new SearchBox("searchBox", "search",false,'Search','.html');
 /* @license-end */
 </script>
 <script type="text/javascript" src="menudata.js"></script>
 <script type="text/javascript" src="menu.js"></script>
 <script type="text/javascript">
 /* @license magnet:?xt=urn:btih:cf05388f2679ee054f2beb29a391d25f4e673ac3&amp;dn=gpl-2.0.txt GPL-v2 */
 $(function() {
   initMenu('',true,false,'search.php','Search');
   $(document).ready(function() { init_search(); });
 });
 /* @license-end */</script>
 <div id="main-nav"></div>
 </div><!-- top -->
 <div id="side-nav" class="ui-resizable side-nav-resizable">
   <div id="nav-tree">
     <div id="nav-tree-contents">
       <div id="nav-sync" class="sync"></div>
     </div>
   </div>
   <div id="splitbar" style="-moz-user-select:none;"
        class="ui-resizable-handle">
   </div>
 </div>
 <script type="text/javascript">
 /* @license magnet:?xt=urn:btih:cf05388f2679ee054f2beb29a391d25f4e673ac3&amp;dn=gpl-2.0.txt GPL-v2 */
 $(document).ready(function(){initNavTree('flatbuffers_guide_use_typescript.html',''); initResizable(); });
 /* @license-end */
 </script>
 <div id="doc-content">
 <!-- window showing the filter options -->
 <div id="MSearchSelectWindow"
      onmouseover="return searchBox.OnSearchSelectShow()"
      onmouseout="return searchBox.OnSearchSelectHide()"
      onkeydown="return searchBox.OnSearchSelectKey(event)">
 </div>

 <!-- iframe showing the search results (closed by default) -->
 <div id="MSearchResultsWindow">
 <iframe src="javascript:void(0)" frameborder="0"
         name="MSearchResults" id="MSearchResults">
 </iframe>
 </div>

 <div class="PageDoc"><div class="header">
   <div class="headertitle">
 <div class="title">Use in TypeScript </div>  </div>
 </div><!--header-->
 <div class="contents">
 <div class="textblock"><p><a class="anchor" id="md_TypeScriptUsage"></a></p>
 <h1><a class="anchor" id="autotoc_md106"></a>
 Before you get started</h1>
 <p>Before diving into the FlatBuffers usage in TypeScript, it should be noted that the <a class="el" href="flatbuffers_guide_tutorial.html">Tutorial</a> page has a complete guide to general FlatBuffers usage in all of the supported languages (including TypeScript). This page is specifically designed to cover the nuances of FlatBuffers usage in TypeScript.</p>
 <p>You should also have read the <a class="el" href="flatbuffers_guide_building.html">Building</a> documentation to build <code>flatc</code> and should be familiar with <a class="el" href="flatbuffers_guide_using_schema_compiler.html">Using the schema compiler</a> and <a class="el" href="flatbuffers_guide_writing_schema.html">Writing a schema</a>.</p>
 <h1><a class="anchor" id="autotoc_md107"></a>
 FlatBuffers TypeScript library code location</h1>
 <p>The code for the FlatBuffers TypeScript library can be found at <a href="https://www.npmjs.com/package/flatbuffers">https://www.npmjs.com/package/flatbuffers</a>.</p>
 <h1><a class="anchor" id="autotoc_md108"></a>
 Testing the FlatBuffers TypeScript library</h1>
 <p>To run the tests, use the <a href="https://github.com/google/
 flatbuffers/blob/master/tests/TypeScriptTest.sh">TypeScriptTest.sh</a> shell script.</p>
 <p><em>Note: The TypeScript test file requires <a href="https://nodejs.org/en/">Node.js</a>.</em></p>
 <h1><a class="anchor" id="autotoc_md109"></a>
 Using the FlatBuffers TypeScript libary</h1>
 <p><em>Note: See <a class="el" href="flatbuffers_guide_tutorial.html">Tutorial</a> for a more in-depth example of how to use FlatBuffers in TypeScript.</em></p>
 <p>FlatBuffers supports both reading and writing FlatBuffers in TypeScript.</p>
 <p>To use FlatBuffers in your own code, first generate TypeScript classes from your schema with the <code>--ts</code> option to <code>flatc</code>. Then you can include both FlatBuffers and the generated code to read or write a FlatBuffer.</p>
 <p>For example, here is how you would read a FlatBuffer binary file in TypeScript: First, include the library and generated code. Then read the file into an <code>Uint8Array</code>. Make a <code>flatbuffers.ByteBuffer</code> out of the <code>Uint8Array</code>, and pass the ByteBuffer to the <code>getRootAsMonster</code> function.</p>
 <div class="fragment"><div class="line">import * as flatbuffers from &#39;flatbuffers&#39;;</div>
 <div class="line"> </div>
 <div class="line">import { MyGame } from &#39;./monster_generated&#39;;</div>
 <div class="line"> </div>
 <div class="line">let data = new Uint8Array(fs.readFileSync(&#39;monster.dat&#39;));</div>
 <div class="line">let buf = new flatbuffers.ByteBuffer(data);</div>
 <div class="line"> </div>
 <div class="line">let monster = MyGame.Example.Monster.getRootAsMonster(buf);</div>
 </div><!-- fragment --><p>Now you can access values like this:</p>
 <div class="fragment"><div class="line">let hp = monster.hp();</div>
 <div class="line">let pos = monster.pos();</div>
 </div><!-- fragment --><h1><a class="anchor" id="autotoc_md110"></a>
 Object based API</h1>
 <p>FlatBuffers is all about memory efficiency, which is why its base API is written around using as little as possible of it. This does make the API clumsier (requiring pre-order construction of all data, and making mutation harder).</p>
 <p>For times when efficiency is less important a more convenient object based API can be used (through <code>--gen-object-api</code>) that is able to unpack &amp; pack a FlatBuffer into objects and standard TS types.</p>
 <p>To use:</p>
 <div class="fragment"><div class="line">// Autogenerated class from table Monster.</div>
 <div class="line">let monsterobj = new MonsterT();</div>
 <div class="line"> </div>
 <div class="line">// Deserialize from buffer into object.</div>
 <div class="line">Monster.getRootAsMonster(flatbuffer).unpackTo(monsterobj);</div>
 <div class="line">// or</div>
 <div class="line">let monsterobj = Monster.getRootAsMonster(flatbuffer).unpack();</div>
 <div class="line"> </div>
 <div class="line">// Update object directly like a regular TS class instance.</div>
 <div class="line">console.log(monsterobj.name);</div>
 <div class="line">monsterobj.name = &quot;Bob&quot;;</div>
 <div class="line"> </div>
 <div class="line">// Serialize into new flatbuffer.</div>
 <div class="line">let fbb = new flatbuffers.Builder(1);</div>
 <div class="line">Monster.finishMonsterBuffer(fbb, monsterobj.pack(fbb));</div>
 </div><!-- fragment --><h1><a class="anchor" id="autotoc_md111"></a>
 Text parsing FlatBuffers in TypeScript</h1>
 <p>There currently is no support for parsing text (Schema's and JSON) directly from TypeScript. </p>
 </div></div><!-- contents -->
 </div><!-- PageDoc -->
 </div><!-- doc-content -->
 <!-- Google Analytics -->
 <script>
   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
   (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
   m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
   })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
   ga('create', 'UA-49880327-7', 'auto');
   ga('send', 'pageview');
 </script>
 </body>
 </html>
	<!-- HTML header for doxygen 1.8.6-->
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/xhtml;charset=UTF-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=9"/>
	<meta name="generator" content="Doxygen 1.9.1"/>
	<title>FlatBuffers: Use in TypeScript</title>
	<link href="tabs.css" rel="stylesheet" type="text/css"/>
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="dynsections.js"></script>
	<link href="navtree.css" rel="stylesheet" type="text/css"/>
	<script type="text/javascript" src="resize.js"></script>
	<script type="text/javascript" src="navtreedata.js"></script>
	<script type="text/javascript" src="navtree.js"></script>
	<link href="search/search.css" rel="stylesheet" type="text/css"/>
	<script type="text/javascript" src="search/searchdata.js"></script>
	<script type="text/javascript" src="search/search.js"></script>
	<link href="doxygen.css" rel="stylesheet" type="text/css" />
	<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400italic,500,500italic,700,700italic\|Roboto+Mono:400,700" rel="stylesheet">
	<link href="style.css" rel="stylesheet" type="text/css"/>
	</head>
	<body>
	<div id="top"><!-- do not remove this div, it is closed by doxygen! -->
	<div id="titlearea" style="height: 110px;">
	<table cellspacing="0" cellpadding="0">
	<tbody>
	<tr style="height: 56px;">
	<td id="commonprojectlogo">
	<img alt="Logo" src="fpl_logo_small.png"/>
	</td>
	<td style="padding-left: 0.5em;">
	<div id="projectname">FlatBuffers
	</div>
	<div style="font-size:12px;">
	An open source project by <a href="https://developers.google.com/games/#Tools">FPL</a>.
	</div>
	</td>
	</tr>
	</tbody>
	</table>
	</div>
	<!-- end header part -->
	<!-- Generated by Doxygen 1.9.1 -->
	<script type="text/javascript">
	/* @license magnet:?xt=urn:btih:cf05388f2679ee054f2beb29a391d25f4e673ac3&dn=gpl-2.0.txt GPL-v2 */
	var searchBox = new SearchBox("searchBox", "search",false,'Search','.html');
	/* @license-end */
	</script>
	<script type="text/javascript" src="menudata.js"></script>
	<script type="text/javascript" src="menu.js"></script>
	<script type="text/javascript">
	/* @license magnet:?xt=urn:btih:cf05388f2679ee054f2beb29a391d25f4e673ac3&dn=gpl-2.0.txt GPL-v2 */
	$(function() {
	initMenu('',true,false,'search.php','Search');
	$(document).ready(function() { init_search(); });
	});
	/* @license-end */</script>
	<div id="main-nav"></div>
	</div><!-- top -->
	<div id="side-nav" class="ui-resizable side-nav-resizable">
	<div id="nav-tree">
	<div id="nav-tree-contents">
	<div id="nav-sync" class="sync"></div>
	</div>
	</div>
	<div id="splitbar" style="-moz-user-select:none;"
	class="ui-resizable-handle">
	</div>
	</div>
	<script type="text/javascript">
	/* @license magnet:?xt=urn:btih:cf05388f2679ee054f2beb29a391d25f4e673ac3&dn=gpl-2.0.txt GPL-v2 */
	$(document).ready(function(){initNavTree('flatbuffers_guide_use_typescript.html',''); initResizable(); });
	/* @license-end */
	</script>
	<div id="doc-content">
	<!-- window showing the filter options -->
	<div id="MSearchSelectWindow"
	onmouseover="return searchBox.OnSearchSelectShow()"
	onmouseout="return searchBox.OnSearchSelectHide()"
	onkeydown="return searchBox.OnSearchSelectKey(event)">
	</div>

	<!-- iframe showing the search results (closed by default) -->
	<div id="MSearchResultsWindow">
	<iframe src="javascript:void(0)" frameborder="0"
	name="MSearchResults" id="MSearchResults">
	</iframe>
	</div>

	<div class="PageDoc"><div class="header">
	<div class="headertitle">
	<div class="title">Use in TypeScript </div> </div>
	</div><!--header-->
	<div class="contents">
	<div class="textblock"><p><a class="anchor" id="md_TypeScriptUsage"></a></p>
	<h1><a class="anchor" id="autotoc_md106"></a>
	Before you get started</h1>
	<p>Before diving into the FlatBuffers usage in TypeScript, it should be noted that the <a class="el" href="flatbuffers_guide_tutorial.html">Tutorial</a> page has a complete guide to general FlatBuffers usage in all of the supported languages (including TypeScript). This page is specifically designed to cover the nuances of FlatBuffers usage in TypeScript.</p>
	<p>You should also have read the <a class="el" href="flatbuffers_guide_building.html">Building</a> documentation to build <code>flatc</code> and should be familiar with <a class="el" href="flatbuffers_guide_using_schema_compiler.html">Using the schema compiler</a> and <a class="el" href="flatbuffers_guide_writing_schema.html">Writing a schema</a>.</p>
	<h1><a class="anchor" id="autotoc_md107"></a>
	FlatBuffers TypeScript library code location</h1>
	<p>The code for the FlatBuffers TypeScript library can be found at <a href="https://www.npmjs.com/package/flatbuffers">https://www.npmjs.com/package/flatbuffers</a>.</p>
	<h1><a class="anchor" id="autotoc_md108"></a>
	Testing the FlatBuffers TypeScript library</h1>
	<p>To run the tests, use the <a href="https://github.com/google/
	flatbuffers/blob/master/tests/TypeScriptTest.sh">TypeScriptTest.sh</a> shell script.</p>
	<p><em>Note: The TypeScript test file requires <a href="https://nodejs.org/en/">Node.js</a>.</em></p>
	<h1><a class="anchor" id="autotoc_md109"></a>
	Using the FlatBuffers TypeScript libary</h1>
	<p><em>Note: See <a class="el" href="flatbuffers_guide_tutorial.html">Tutorial</a> for a more in-depth example of how to use FlatBuffers in TypeScript.</em></p>
	<p>FlatBuffers supports both reading and writing FlatBuffers in TypeScript.</p>
	<p>To use FlatBuffers in your own code, first generate TypeScript classes from your schema with the <code>--ts</code> option to <code>flatc</code>. Then you can include both FlatBuffers and the generated code to read or write a FlatBuffer.</p>
	<p>For example, here is how you would read a FlatBuffer binary file in TypeScript: First, include the library and generated code. Then read the file into an <code>Uint8Array</code>. Make a <code>flatbuffers.ByteBuffer</code> out of the <code>Uint8Array</code>, and pass the ByteBuffer to the <code>getRootAsMonster</code> function.</p>
	<div class="fragment"><div class="line">import * as flatbuffers from 'flatbuffers';</div>
	<div class="line"> </div>
	<div class="line">import { MyGame } from './monster_generated';</div>
	<div class="line"> </div>
	<div class="line">let data = new Uint8Array(fs.readFileSync('monster.dat'));</div>
	<div class="line">let buf = new flatbuffers.ByteBuffer(data);</div>
	<div class="line"> </div>
	<div class="line">let monster = MyGame.Example.Monster.getRootAsMonster(buf);</div>
	</div><!-- fragment --><p>Now you can access values like this:</p>
	<div class="fragment"><div class="line">let hp = monster.hp();</div>
	<div class="line">let pos = monster.pos();</div>
	</div><!-- fragment --><h1><a class="anchor" id="autotoc_md110"></a>
	Object based API</h1>
	<p>FlatBuffers is all about memory efficiency, which is why its base API is written around using as little as possible of it. This does make the API clumsier (requiring pre-order construction of all data, and making mutation harder).</p>
	<p>For times when efficiency is less important a more convenient object based API can be used (through <code>--gen-object-api</code>) that is able to unpack & pack a FlatBuffer into objects and standard TS types.</p>
	<p>To use:</p>
	<div class="fragment"><div class="line">// Autogenerated class from table Monster.</div>
	<div class="line">let monsterobj = new MonsterT();</div>
	<div class="line"> </div>
	<div class="line">// Deserialize from buffer into object.</div>
	<div class="line">Monster.getRootAsMonster(flatbuffer).unpackTo(monsterobj);</div>
	<div class="line">// or</div>
	<div class="line">let monsterobj = Monster.getRootAsMonster(flatbuffer).unpack();</div>
	<div class="line"> </div>
	<div class="line">// Update object directly like a regular TS class instance.</div>
	<div class="line">console.log(monsterobj.name);</div>
	<div class="line">monsterobj.name = "Bob";</div>
	<div class="line"> </div>
	<div class="line">// Serialize into new flatbuffer.</div>
	<div class="line">let fbb = new flatbuffers.Builder(1);</div>
	<div class="line">Monster.finishMonsterBuffer(fbb, monsterobj.pack(fbb));</div>
	</div><!-- fragment --><h1><a class="anchor" id="autotoc_md111"></a>
	Text parsing FlatBuffers in TypeScript</h1>
	<p>There currently is no support for parsing text (Schema's and JSON) directly from TypeScript. </p>
	</div></div><!-- contents -->
	</div><!-- PageDoc -->
	</div><!-- doc-content -->
	<!-- Google Analytics -->
	<script>
	(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]\|\|function(){
	(i[r].q=i[r].q\|\|[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
	m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
	})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
	ga('create', 'UA-49880327-7', 'auto');
	ga('send', 'pageview');
	</script>
	</body>
	</html>