UNPKG

ts-simple-ast

Version:

TypeScript compiler wrapper for AST navigation and code generation.

188 lines (146 loc) 12.1 kB
<!doctype 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="active"><a href="/details/variables">Variables</a></li> <li>--</li> <li class=""><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="variables">Variables</h2> <p>There is a hierarchy in the AST that’s important to understand for variables:</p> <ol> <li>Variable statement.</li> <li>Variable declaration list.</li> <li>Variable declaration.</li> </ol> <h2 id="variable-statement">Variable Statement</h2> <p>Example:</p> <div class="language-typescript highlighter-rouge"><pre class="highlight"><code><span class="k">export</span> <span class="kd">const</span> <span class="nx">var1</span> <span class="o">=</span> <span class="s2">"5"</span><span class="p">,</span> <span class="nx">var2</span> <span class="o">=</span> <span class="s2">"6"</span><span class="p">;</span> </code></pre> </div> <p>From a variable statement you will be able to get or set (if implemented) a variable declaration list, documentation, ambient information, and exported information.</p> <h3 id="get-a-variable-statement">Get a variable statement</h3> <p>Can be retrieved from source files, namespaces, or function bodies:</p> <div class="language-typescript highlighter-rouge"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">variableStatements</span> <span class="o">=</span> <span class="nx">sourceFile</span><span class="p">.</span><span class="nx">getVariableStatements</span><span class="p">();</span> <span class="kd">const</span> <span class="nx">firstExportedVariableStatement</span> <span class="o">=</span> <span class="nx">sourceFile</span><span class="p">.</span><span class="nx">getVariableStatement</span><span class="p">(</span><span class="nx">s</span> <span class="o">=&gt;</span> <span class="nx">s</span><span class="p">.</span><span class="nx">hasExportKeyword</span><span class="p">());</span> </code></pre> </div> <h2 id="variable-declaration-list">Variable Declaration List</h2> <p>Example:</p> <div class="language-typescript highlighter-rouge"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">var1</span> <span class="o">=</span> <span class="s2">"5"</span><span class="p">,</span> <span class="nx">var2</span> <span class="o">=</span> <span class="s2">"6"</span><span class="p">;</span> </code></pre> </div> <h3 id="get-variable-declaration-list">Get variable declaration list</h3> <p>You can get one from the variable statement:</p> <div class="language-typescript highlighter-rouge"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">declarationList</span> <span class="o">=</span> <span class="nx">variableStatement</span><span class="p">.</span><span class="nx">getDeclarationList</span><span class="p">();</span> </code></pre> </div> <p>Or from source files, namespaces, and function bodies:</p> <div class="language-typescript highlighter-rouge"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">variableDeclarationLists</span> <span class="o">=</span> <span class="nx">sourceFile</span><span class="p">.</span><span class="nx">getVariableDeclarationLists</span><span class="p">();</span> <span class="kd">const</span> <span class="nx">firstConstDeclaration</span> <span class="o">=</span> <span class="nx">sourceFile</span><span class="p">.</span><span class="nx">getVariableDeclarationList</span><span class="p">(</span><span class="nx">l</span> <span class="o">=&gt;</span> <span class="nx">l</span><span class="p">.</span><span class="nx">getDeclarationType</span><span class="p">()</span> <span class="o">===</span> <span class="nx">VariableDeclarationType</span><span class="p">.</span><span class="nx">Const</span><span class="p">);</span> </code></pre> </div> <h3 id="get-declaration-type">Get declaration type</h3> <p>Use:</p> <div class="language-typescript highlighter-rouge"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">declarationType</span> <span class="o">=</span> <span class="nx">variableDeclarationList</span><span class="p">.</span><span class="nx">getDeclarationType</span><span class="p">();</span> </code></pre> </div> <p>It will return one of the following values:</p> <div class="language-typescript highlighter-rouge"><pre class="highlight"><code><span class="nx">VariableDeclarationType</span><span class="p">.</span><span class="nx">Let</span><span class="p">;</span> <span class="nx">VariableDeclarationType</span><span class="p">.</span><span class="nx">Const</span><span class="p">;</span> <span class="nx">VariableDeclarationType</span><span class="p">.</span><span class="nx">Var</span><span class="p">;</span> </code></pre> </div> <h2 id="variable-declaration">Variable Declaration</h2> <p>These are the individual declarations within a variable declaration list.</p> <h3 id="get-variable-declaration">Get variable declaration</h3> <p>You can get them from the variable declaration list:</p> <div class="language-typescript highlighter-rouge"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">variableDeclarations</span> <span class="o">=</span> <span class="nx">variableDeclarationList</span><span class="p">.</span><span class="nx">getDeclarations</span><span class="p">();</span> </code></pre> </div> <p>Or from source files, namespaces, and function bodies:</p> <div class="language-typescript highlighter-rouge"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">variableDeclarations</span> <span class="o">=</span> <span class="nx">sourceFile</span><span class="p">.</span><span class="nx">getVariableDeclarations</span><span class="p">();</span> <span class="kd">const</span> <span class="nx">variableDeclaration</span> <span class="o">=</span> <span class="nx">sourceFile</span><span class="p">.</span><span class="nx">getVariableDeclaration</span><span class="p">(</span><span class="s2">"myVar"</span><span class="p">);</span> <span class="kd">const</span> <span class="nx">firstStringTypedVariableDeclaration</span> <span class="o">=</span> <span class="nx">sourceFile</span><span class="p">.</span><span class="nx">getVariableDeclaration</span><span class="p">(</span><span class="nx">v</span> <span class="o">=&gt;</span> <span class="nx">v</span><span class="p">.</span><span class="nx">getType</span><span class="p">().</span><span class="nx">getText</span><span class="p">()</span> <span class="o">===</span> <span class="s2">"string"</span><span class="p">);</span> </code></pre> </div> </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>