ts-simple-ast
Version:
TypeScript compiler wrapper for AST navigation and code generation.
292 lines (214 loc) • 19.2 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>TsSimpleAst</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=71a391c40e7283d83416a246f2c61c5fcb76068a">
<!--
<link rel="stylesheet" href="/assets/css/style.css?v=71a391c40e7283d83416a246f2c61c5fcb76068a">
<link rel="stylesheet" href="/assets/css/custom-style.css?v=71a391c40e7283d83416a246f2c61c5fcb76068a">
<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">TsSimpleAst</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">
<a class="nav-link" href="/navigation">Navigation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/manipulation">Manipulation</a>
</li>
<li class="">
<a class="nav-link" href="/details/index">Details</a>
<ul>
<li class=""><a href="/details/source-files">Source Files</a></li>
<li class=""><a href="/details/classes">Classes</a></li>
<li class=""><a href="/details/enums">Enums</a></li>
<li class=""><a href="/details/functions">Functions</a></li>
<li class=""><a href="/details/interfaces">Interfaces</a></li>
<li class=""><a href="/details/namespaces">Namespaces</a></li>
<li class=""><a href="/details/type-aliases">Type Aliases</a></li>
<li class=""><a href="/details/variables">Variables</a></li>
<li>--</li>
<li class="active"><a href="/details/types">Types</a></li>
<li class=""><a href="/details/expressions">Expressions</a></li>
<li>--</li>
<li class=""><a href="/details/ambient">Ambient</a></li>
<li class=""><a href="/details/async">Async</a></li>
<li class=""><a href="/details/decorators">Decorators</a></li>
<li class=""><a href="/details/exports">Exports</a></li>
<li class=""><a href="/details/generators">Generators</a></li>
<li class=""><a href="/details/documentation">JS Docs</a></li>
<li class=""><a href="/details/modifiers">Modifiers</a></li>
</ul>
</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="types">Types</h2>
<p>Types are accessed by calling <code class="highlighter-rouge">.getType()</code> on nodes that are typed. For example:</p>
<div class="language-typescript highlighter-rouge"><pre class="highlight"><code><span class="kd">const</span> <span class="kd">type</span> <span class="o">=</span> <span class="nx">parameter</span><span class="p">.</span><span class="nx">getType</span><span class="p">();</span>
</code></pre>
</div>
<p>There are other ways for accessing a type. For example:</p>
<div class="language-typescript highlighter-rouge"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">returnType</span> <span class="o">=</span> <span class="nx">functionDeclaration</span><span class="p">.</span><span class="nx">getReturnType</span><span class="p">();</span>
</code></pre>
</div>
<h3 id="compiler-type">Compiler Type</h3>
<p>The underlying compiler type can be accessed via:</p>
<div class="language-typescript highlighter-rouge"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">compilerType</span> <span class="o">=</span> <span class="kd">type</span><span class="p">.</span><span class="nx">getCompilerType</span><span class="p">();</span>
</code></pre>
</div>
<h3 id="apparent-type">Apparent type</h3>
<p>Given the following variable declaration:</p>
<div class="language-typescript highlighter-rouge"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">myVar</span> <span class="o">=</span> <span class="mi">4</span><span class="p">;</span>
</code></pre>
</div>
<p>The type is <code class="highlighter-rouge">4</code> and the apparent type is <code class="highlighter-rouge">Number</code>.</p>
<p>You can retrieve the apparent type via the following:</p>
<div class="language-typescript highlighter-rouge"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">apparentType</span> <span class="o">=</span> <span class="kd">type</span><span class="p">.</span><span class="nx">getApparentType</span><span class="p">();</span>
</code></pre>
</div>
<h3 id="text">Text</h3>
<p>Getting the type text can be achieved by calling <code class="highlighter-rouge">.getText()</code>:</p>
<div class="language-typescript highlighter-rouge"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">text</span> <span class="o">=</span> <span class="kd">type</span><span class="p">.</span><span class="nx">getText</span><span class="p">();</span>
</code></pre>
</div>
<p>Sometimes this may not be good enough. If not, you can also provide the enclosing node:</p>
<div class="language-typescript highlighter-rouge"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">text</span> <span class="o">=</span> <span class="kd">type</span><span class="p">.</span><span class="nx">getText</span><span class="p">(</span><span class="nx">parameter</span><span class="p">);</span>
</code></pre>
</div>
<p>And you can format it by providing <code class="highlighter-rouge">ts.TypeFormatFlags</code>:</p>
<div class="language-typescript highlighter-rouge"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">text</span> <span class="o">=</span> <span class="kd">type</span><span class="p">.</span><span class="nx">getText</span><span class="p">(</span><span class="nx">parameter</span><span class="p">,</span> <span class="nx">ts</span><span class="p">.</span><span class="nx">TypeFormatFlags</span><span class="p">.</span><span class="nx">NoTruncation</span> <span class="o">|</span> <span class="nx">ts</span><span class="p">.</span><span class="nx">TypeFormatFlags</span><span class="p">.</span><span class="nx">WriteArrayAsGenericType</span><span class="p">);</span>
</code></pre>
</div>
<p>Look at the TypeScript compiler definition file for more available options for <code class="highlighter-rouge">ts.TypeFormatFlags</code>.</p>
<h3 id="intersection-types">Intersection types</h3>
<div class="language-typescript highlighter-rouge"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">intersectionTypes</span> <span class="o">=</span> <span class="kd">type</span><span class="p">.</span><span class="nx">getIntersectionTypes</span><span class="p">();</span>
</code></pre>
</div>
<h3 id="union-types">Union types</h3>
<div class="language-typescript highlighter-rouge"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">unionTypes</span> <span class="o">=</span> <span class="kd">type</span><span class="p">.</span><span class="nx">getUnionTypes</span><span class="p">();</span>
</code></pre>
</div>
<h3 id="properties">Properties</h3>
<p>Get the properties or property of a type:</p>
<div class="language-typescript highlighter-rouge"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">properties</span> <span class="o">=</span> <span class="kd">type</span><span class="p">.</span><span class="nx">getProperties</span><span class="p">();</span>
<span class="kd">const</span> <span class="nx">prop1</span> <span class="o">=</span> <span class="kd">type</span><span class="p">.</span><span class="nx">getProperty</span><span class="p">(</span><span class="s2">"prop1"</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">prop2</span> <span class="o">=</span> <span class="kd">type</span><span class="p">.</span><span class="nx">getProperty</span><span class="p">(</span><span class="nx">p</span> <span class="o">=></span> <span class="nx">p</span><span class="p">.</span><span class="nx">getName</span><span class="p">()</span> <span class="o">===</span> <span class="s2">"prop2"</span><span class="p">);</span>
</code></pre>
</div>
<p>Or the apparent properties:</p>
<div class="language-typescript highlighter-rouge"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">apparentProperties</span> <span class="o">=</span> <span class="kd">type</span><span class="p">.</span><span class="nx">getApparentProperties</span><span class="p">();</span>
<span class="kd">const</span> <span class="nx">prop1</span> <span class="o">=</span> <span class="kd">type</span><span class="p">.</span><span class="nx">getApparentProperty</span><span class="p">(</span><span class="s2">"prop1"</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">prop2</span> <span class="o">=</span> <span class="kd">type</span><span class="p">.</span><span class="nx">getApparentProperty</span><span class="p">(</span><span class="nx">p</span> <span class="o">=></span> <span class="nx">p</span><span class="p">.</span><span class="nx">getName</span><span class="p">()</span> <span class="o">===</span> <span class="s2">"prop2"</span><span class="p">);</span>
</code></pre>
</div>
<h3 id="base-types">Base types</h3>
<div class="language-typescript highlighter-rouge"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">baseTypes</span> <span class="o">=</span> <span class="kd">type</span><span class="p">.</span><span class="nx">getBaseTypes</span><span class="p">();</span>
</code></pre>
</div>
<h3 id="call-signatures">Call signatures</h3>
<div class="language-typescript highlighter-rouge"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">callSignatures</span> <span class="o">=</span> <span class="kd">type</span><span class="p">.</span><span class="nx">getCallSignatures</span><span class="p">();</span>
</code></pre>
</div>
<h3 id="construct-signatures">Construct signatures</h3>
<p>Get the construct signatures (new signatures) of a type:</p>
<div class="language-typescript highlighter-rouge"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">constructSignatures</span> <span class="o">=</span> <span class="kd">type</span><span class="p">.</span><span class="nx">getConstructSignatures</span><span class="p">();</span>
</code></pre>
</div>
<h3 id="index-types">Index types</h3>
<p>You can get either the string index type (ex. for <code class="highlighter-rouge"><span class="p">{</span><span class="w"> </span><span class="err">[index:</span><span class="w"> </span><span class="err">string]:</span><span class="w"> </span><span class="err">Date;</span><span class="w"> </span><span class="p">}</span></code> it would be <code class="highlighter-rouge">Date</code>)
or the number index type (ex. for <code class="highlighter-rouge"><span class="p">{</span><span class="w"> </span><span class="err">[index:</span><span class="w"> </span><span class="err">number]:</span><span class="w"> </span><span class="err">object;</span><span class="w"> </span><span class="p">}</span></code> it would be <code class="highlighter-rouge">object</code>):</p>
<div class="language-typescript highlighter-rouge"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">stringIndexType</span> <span class="o">=</span> <span class="kd">type</span><span class="p">.</span><span class="nx">getStringIndexType</span><span class="p">();</span>
<span class="kd">const</span> <span class="nx">numberIndexType</span> <span class="o">=</span> <span class="kd">type</span><span class="p">.</span><span class="nx">getNumberIndexType</span><span class="p">();</span>
</code></pre>
</div>
<h3 id="non-nullable-type">Non-nullable type</h3>
<p>Gets the non-nullable type from a nullable type:</p>
<div class="language-typescript highlighter-rouge"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">nonNullableType</span> <span class="o">=</span> <span class="kd">type</span><span class="p">.</span><span class="nx">getNonNullableType</span><span class="p">();</span>
</code></pre>
</div>
<p>For example, <code class="highlighter-rouge">string | undefined</code> would return <code class="highlighter-rouge">string</code>.</p>
<h3 id="type-flags">Type flags</h3>
<p>This has information about the type, such as <code class="highlighter-rouge">ts.TypeFlags.BooleanLike</code>.</p>
<div class="language-typescript highlighter-rouge"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">flags</span> <span class="o">=</span> <span class="kd">type</span><span class="p">.</span><span class="nx">getFlags</span><span class="p">();</span>
</code></pre>
</div>
<p>Generally a method that starts with “is” exists on the type and you can easily use that instead of checking the flags (same with Object flags below).</p>
<h3 id="object-flags">Object flags</h3>
<p>This has information about object types, such as <code class="highlighter-rouge">ts.ObjectFlags.Mapped</code>.</p>
<div class="language-typescript highlighter-rouge"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">objectFlags</span> <span class="o">=</span> <span class="kd">type</span><span class="p">.</span><span class="nx">getObjectFlags</span><span class="p">();</span>
</code></pre>
</div>
<h3 id="symbol">Symbol</h3>
<p>Get the symbol of the type if it exists:</p>
<div class="language-typescript highlighter-rouge"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">typeSymbol</span> <span class="o">=</span> <span class="kd">type</span><span class="p">.</span><span class="nx">getSymbol</span><span class="p">();</span>
</code></pre>
</div>
<h3 id="alias-symbol">Alias symbol</h3>
<div class="language-typescript highlighter-rouge"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">aliasSymbol</span> <span class="o">=</span> <span class="kd">type</span><span class="p">.</span><span class="nx">getAliasSymbol</span><span class="p">();</span>
</code></pre>
</div>
<h3 id="alias-type-arguments">Alias type arguments</h3>
<div class="language-typescript highlighter-rouge"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">aliasTypeArgs</span> <span class="o">=</span> <span class="kd">type</span><span class="p">.</span><span class="nx">getAliasTypeArguments</span><span class="p">();</span>
</code></pre>
</div>
<h3 id="telling-type">Telling type</h3>
<p>Use any of the following methods:</p>
<div class="language-typescript highlighter-rouge"><pre class="highlight"><code><span class="kd">type</span><span class="p">.</span><span class="nx">isAnonymousType</span><span class="p">();</span>
<span class="kd">type</span><span class="p">.</span><span class="nx">isBooleanType</span><span class="p">();</span>
<span class="kd">type</span><span class="p">.</span><span class="nx">isEnumType</span><span class="p">();</span>
<span class="kd">type</span><span class="p">.</span><span class="nx">isIntersectionType</span><span class="p">();</span>
<span class="kd">type</span><span class="p">.</span><span class="nx">isInterfaceType</span><span class="p">();</span>
<span class="kd">type</span><span class="p">.</span><span class="nx">isObjectType</span><span class="p">();</span>
<span class="kd">type</span><span class="p">.</span><span class="nx">isTupleType</span><span class="p">();</span>
<span class="kd">type</span><span class="p">.</span><span class="nx">isUnionType</span><span class="p">();</span>
</code></pre>
</div>
<p>If you see something that doesn’t exist here and should (there’s a lot missing), then please log an issue or submit a pull request.</p>
<h3 id="todo">TODO</h3>
<p>Not implemented. Getting…</p>
<ul>
<li>Enum member types</li>
<li>Destructuring pattern</li>
<li>More…?</li>
</ul>
</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>