ts-simple-ast
Version:
TypeScript compiler wrapper for AST navigation and code generation.
118 lines (96 loc) • 7.16 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>ts-simple-ast - Underlying Compiler Nodes</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="/assets/css/style.css?v=502728dc7b09041e36b06c50f79a13adbfb6f1b2">
<!--
<link rel="stylesheet" href="/assets/css/style.css?v=502728dc7b09041e36b06c50f79a13adbfb6f1b2">
<link rel="stylesheet" href="/assets/css/custom-style.css?v=502728dc7b09041e36b06c50f79a13adbfb6f1b2">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/assets/js/main.js"></script>-->
</head>
<body>
<div class="main">
<header class="container">
<div class="row">
<h1 onclick="document.location.href = '/'" class="headerLink">ts-simple-ast</h1>
<!--<p class="subText">Simple way to navigate and manipulate the TypeScript AST.</p>-->
</div>
</header>
<div class="container">
<div class="row">
<div class="col-md-3">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<nav class="sidebar-nav" id="navbarSupportedContent">
<ul class="navbar-nav navbar-default">
<li class="nav-item">
<a class="nav-link" href="/">Overview</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/setup">Setup</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="/navigation">Navigation</a>
<ul>
<li class=""><a href="/navigation/getting-source-files">Getting Source Files</a></li>
<li class=""><a href="/navigation/directories">Directories</a></li>
<li class=""><a href="/navigation/example">Example</a></li>
<li class="active"><a href="/navigation/compiler-nodes">Compiler Nodes</a></li>
<li class=""><a href="/navigation/existing-nodes">Existing Nodes</a></li>
<li class=""><a href="/navigation/finding-references">Finding References</a></li>
<li class=""><a href="/navigation/language-service">Language Service</a></li>
<li class=""><a href="/navigation/program">Program</a></li>
<li class=""><a href="/navigation/type-checker">Type Checker</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="/manipulation">Manipulation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/emitting">Emitting</a>
</li>
<li class="">
<a class="nav-link" href="/details/index">Details</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/utilities">Utilities</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://github.com/dsherret/ts-simple-ast">View on GitHub</a>
</li>
</ul>
</nav>
</div>
<section class="container-fluid col-md-9">
<h2 id="underlying-compiler-nodes">Underlying Compiler Nodes</h2>
<p>Sometimes it might be useful to get the node from the TypeScript compiler.</p>
<p>They’re accessible via the <code class="highlighter-rouge">.compilerNode</code> property that’s found on most objects:</p>
<div class="language-typescript highlighter-rouge"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">compilerNode</span> <span class="o">=</span> <span class="nx">personInterface</span><span class="p">.</span><span class="nx">compilerNode</span><span class="p">;</span>
</code></pre>
</div>
<p><strong>Warning:</strong> When manipulating the AST via this library, the underlying TypeScript AST tree is regenerated each time. For this reason, it’s important not
to hold on to TypeScript compiler nodes between manipulations or you could end up working with out of date information.</p>
<h3 id="compiler-node-properties">Compiler node properties</h3>
<p>Sometimes there isn’t a helper function in this library for accessing certain properties on the underlying compiler node.</p>
<p>In these situations, you can access any underlying compiler node property by using the <code class="highlighter-rouge">.getNodeProperty(propName)</code> method:</p>
<div class="language-typescript highlighter-rouge"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">nameNode</span> <span class="o">=</span> <span class="nx">propertyAccessExpression</span><span class="p">.</span><span class="nx">getNodeProperty</span><span class="p">(</span><span class="s2">"name"</span><span class="p">);</span> <span class="c1">// returns: Node<ts.PropertyName></span>
</code></pre>
</div>
<p><strong>Note:</strong> This currently only works on properties that are a single node.</p>
</section>
</div>
</div>
<footer>
</footer>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<!--[if !IE]><script>fixScale(document);</script><![endif]-->
</body>
</html>