---

layout: default

title: Home

description: "TypeScript brings you optional static type-checking along with the latest ECMAScript features."

keywords: "type checker, javascript, transpiler, compiler, static types"

---

<div class="home">

<div class="drawer-overlay"></div>

<!-- content -->

<div class="container-fluid skyline-container">

<div class="row top_section">

<div class="col-md-12 column bannerContainer">

<div class="skyline-img-background"></div>

<div class="skyline-img-foreground"></div>

<div class="banner">

<img class="bannerLogo center-block hidden-xs" src="/assets/images/logo.svg" alt="Logo">

<div class="bannerText">

<div class="bannerTextHeadline">

JavaScript that scales.

</div>

<p>TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.</p>

<p>Any browser. Any host. Any OS. Open source.</p>

</div>

</div>

<div class="row btn-group btn-group-lg bannerButtons">

<div class="col-sm-6">

<a class="btn" href="#download-links" aria-label="Jump to Downloads">

Download

</a>

</div>

<div class="col-sm-6">

<a class="btn" href="../docs/index.html">

Documentation

</a>

</div>

</div>

</div>

</div> <!-- End of skyline section -->

<div class="container-fluid swimlane-alternate swimlane-carousel">

<div class="container">

<div class="row">

<h2 class="hashtag centered"><a href="https://twitter.com/intent/tweet?text=%23iHeartTypeScript">#iHeartTypeScript</a></h2>

<div class="col-sm-offset-1 col-sm-10">

<div id="social-proof-carousel" class="carousel slide">

<a class="left carousel-control" href="#social-proof-carousel" role="button" data-slide="prev">

<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

<span class="sr-only">Previous</span>

</a>

<div class="carousel-inner" role="listbox">

{% for section in site.data.tweet_quotes %}

{% assign section_id = forloop.index0 %}

<div class="item {% if forloop.first %}active{% endif %}">

<div class="container-fluid">

<div class="row tweets">

{% for tweet in section %}

{% capture name_id %}tweet-{{section_id}}_{{forloop.index0}}-name{% endcapture %}

{% capture avatar_url %}/assets/images/socialproof/twitterprofiles/{{tweet.twitter_handle}}.{% if tweet.avatar_extension %}{{tweet.avatar_extension}}{% else %}jpg{% endif %}{% endcapture %}

<div class="col-md-4">

<blockquote class="twitter-tweet" data-lang="en">

<a class="twitter-profile-image" role="img" aria-labelledby="{{name_id}}" style="background-image: url('{{avatar_url}}')" href="{{tweet.tweet_url}}" target="_blank"></a>

<span class="twitter-name" id="{{name_id}}">{{tweet.twitter_name}} </span><span class=twitter-handle>@{{tweet.twitter_handle}} </span>

<p lang="en" dir="ltr">{{tweet.tweet_content}}</p>

</blockquote>

</div>

{% endfor %}

</div>

</div>

</div>

{% endfor %}

</div>

<a class="right carousel-control twetes" href="#social-proof-carousel" role="button" data-slide="next">

<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

<span class="sr-only">Next</span>

</a>

</div>

</div>

</div>

</div>

</div>

</div>

<div class="container-fluid value-props">

<div class="container">

<div class="row clearfix ">

<div class="row box-highlight-containers">

<div class="col-md-4">

<div class="box-headline-img js-icon center-block">

<img src="/assets/images/startsAndEndsWithJavascript.png" role="presentation">

</div>

<div class="box-text">

<h3>

<span class="line">Starts and ends with</span>

<span class="line">JavaScript</span>

</h3>

<p>TypeScript starts from the same syntax and semantics that millions of JavaScript developers know today.

Use existing JavaScript code, incorporate popular JavaScript libraries, and call TypeScript code from JavaScript.</p>

<p>TypeScript compiles to clean, simple JavaScript code which runs on any browser, in Node.js, or in any JavaScript engine that supports ECMAScript 3 (or newer).</p>

</div>

</div>

<div class="col-md-4">

<div class="box-headline-img crane-icon center-block">

<img src="/assets/images/crane.png" role="presentation">

</div>

<div class="box-text middle-box">

<h3>

<span class="line">Strong tools for</span>

<span class="line">large apps</span>

</h3>

<p>

Types enable JavaScript developers to use highly-productive development tools and practices like static checking and code refactoring when developing JavaScript applications.

</p>

<p>

Types are optional, and type inference allows a few type annotations to make a big difference to the static verification of your code. Types let you define interfaces between software components and gain insights into the behavior of existing JavaScript libraries.

</p>

</div>

</div>

<div class="col-md-4">

<div class="box-headline-img soa-icon center-block">

<img src="/assets/images/stateOfTheArtJavascript_16x.svg" role="presentation">

</div>

<div class="box-text">

<h3>

<span class="line">State of the art</span>

<span class="line">JavaScript</span>

</h3>

<p>TypeScript offers support for the latest and evolving JavaScript features, including those from ECMAScript 2015 and future proposals, like async functions and decorators, to help build robust components.</p>

<p>These features are available at development time for high-confidence app development, but are compiled into simple JavaScript that targets ECMAScript 3 (or newer) environments.</p>

</div>

</div>

</div>

</div>

</div>

<div class="container-fluid">

<div class="row">

<div class="col-sm-12 girder-background">

<div class="btn-group btn-group-lg center-block">

<div class="btn-vert-block">

<a href="../docs/index.html" class="btn center-block">

Learn it fast

</a>

</div>

</div>

<div id="download-links"></div>

</div>

</div>

</div>

</div>

<div class="container-fluid light-theme row-download-typescript">

<div class="container">

<div class="row">

<div class="col-xs-12">

<h1>Get TypeScript</h1>

</div>

</div>

<div class="row">

<div class="col-md-4 col-sm-6">

<h3>Node.js</h3>

<p>The command-line TypeScript compiler can be installed as a Node.js package.</p>

<div class="node-samples">

<dl class="clearfix">

<dt>Install</dt>

<dd>npm install -g typescript</dd>

</dl>

<dl class="clearfix">

<dt>Compile</dt>

<dd>tsc helloworld.ts</dd>

</dl>

</div>

</div>

<div class="col-md-3 col-sm-6">

<h3>Visual Studio</h3>

<ul class="IDE-native">

<li class="visualstudio-2019"><a target="_blank" href="{{ site.data.urls.vs2019_download }}">Visual Studio 2019</a></li>

<li class="vscode"><a target="_blank" href="{{ site.data.urls.vscode_download }}">Visual Studio Code</a></li>

<li class="visualstudio-2017"><a target="_blank" href="{{ site.data.urls.vs2017_download }}">Visual Studio 2017</a></li>

</ul>

</div>

<div class="col-md-5 col-sm-8 col-xs-9 others">

<div class="row">

<h3>And More...</h3>

<div class="col-xs-6">

<ul class="IDE-plugins">

<li class="sublime"><a target="_blank" href="{{ site.data.urls.sublime_ts_download }}">Sublime Text</a></li>

<li class="atom"><a target="_blank" href="{{ site.data.urls.atom_ts_download }}">Atom</a></li>

<li class="eclipse"><a target="_blank" href="{{ site.data.urls.eclipse_ts_download }}">Eclipse</a></li>

</ul>

</div>

<div class="col-xs-6">

<ul class="IDE-plugins">

<li class="emacs"><a target="_blank" href="{{ site.data.urls.emacs_ts_download }}">Emacs</a></li>

<li class="webstorm"><a target="_blank" href="{{ site.data.urls.webstorm_download }}">WebStorm</a></li>

<li class="vim"><a target="_blank" href="{{ site.data.urls.vim_ts_download }}">Vim</a></li>

</ul>

</div>

</div>

</div>

</div>

</div>

</div>

<div class="container-fluid swimlane-alternate">

<div class="container">

<div class="row">

<h1>See TypeScript in Action</h1>

{% comment %}<iframe src="https://channel9.msdn.com/Events/Build/2017/B8088/player" class="video" allowFullScreen frameBorder="0" title="Video of TypeScript in action"></iframe>{% endcomment %}

<a target="_blank" class="highlight-border" href="https://channel9.msdn.com/Events/Build/2017/B8088/" aria-label="Watch a video of TypeScript in action."><img src="assets/images/anders-video.png" class="video" alt="Link to TypeScript video"/></a>

</div>

</div>

</div>

<div class="container-fluid middle-row">

<div class="container">

<div class="row">

<div class="col-md-12">

<h1>Open Source</h1>

<p>TypeScript is being developed on GitHub. The TypeScript compiler is implemented in TypeScript and can be used in any JavaScript host.</p>

<ul class="opensource-list">

<li><p>

Read

<a href="{{ site.data.urls.ts_spec_markdown }}">the specification on GitHub</a> or download it as a

<a href="{{ site.data.urls.ts_spec_docx }}">docx</a> or

<a href="{{ site.data.urls.ts_spec_pdf }}">pdf</a>.

</p></li>

<li><p>Play with the <a href="#download-links">bits</a> and <a href="{{ site.data.urls.ts_github_issues }}" target="_blank">file bugs</a>.</p></li>

<li><p>Join the <a href="{{ site.data.urls.ts_twitter_search }}" target="_blank">#typescript</a> Twitter discussion and <a onclick="reportAction('Download', 'source', {'location': '/'})" href="{{ site.data.urls.ts_github }}">follow the GitHub project</a>.</p></li>

</ul>

<a class="btn" href="{{ site.data.urls.ts_github }}" onclick="reportAction('Download', 'source', {'location': '/'})">

Get the source code

</a>

</div>

</div>

</div>

</div>

<div class="container-fluid swimlane-alternate swimlane-carousel">

<div class="container">

<div class="row">

<div class="col-sm-offset-1 col-sm-10">

<h1>Why TypeScript?</h1>

<div id="friend-carousel" class="carousel slide" data-ride="carousel">

<!-- Back control -->

<a class="left carousel-control" href="#friend-carousel" role="button" data-slide="prev">

<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

<span class="sr-only">Previous</span>

</a>

<!-- Wrapper for slides -->

<div class="carousel-inner" role="listbox">

<!-- SLIDE START -->

<div class="item active">

<div class="friend-container">

<div class="friend-item">

<div class="image-container">

<a href="community/friends.html" aria-label="Angular and other friends of TypeScript">

<img src="assets/images/friends/Angular/logo.png" class="friend-logo" role="presentation">

</a>

</div>

<div class="quote-container">

<p><em>We love TypeScript for many things&hellip; With TypeScript, several of our team members have said things like '<strong>I now actually understand most of our own code!</strong>' because they can easily traverse it and understand relationships much better. And we’ve <strong>found several bugs via TypeScript’s checks</strong>.”</em></p>

</div>

<div class="author-container">

<p><em>&mdash; Brad Green, Engineering Director - AngularJS</em></p>

</div>

</div>

</div>

</div>

<div class="item">

<div class="friend-container">

<div class="friend-item">

<div class="image-container">

<a href="community/friends.html" aria-label="Ionic and other friends of TypeScript">

<img src="assets/images/friends/Ionic/logo.png" class="friend-logo" role="presentation">

</a>

</div>

<div class="quote-container">

<p><em>“One of Ionic's main goals is to <strong>make app development as quick and easy as possible</strong>, and the <strong>tooling support TypeScript gives us with autocompletion, type checking and source documentation</strong> really aligns with that.”</em></p>

</div>

<div class="author-container">

<p><em>&mdash; Tim Lancina, Tooling Developer - Ionic</em></p>

</div>

</div>

</div>

</div>

<div class="item">

<div class="friend-container">

<div class="friend-item">

<div class="image-container">

<a href="community/friends.html" aria-label="NativeScript and other friends of TypeScript">

<img src="assets/images/friends/NativeScript/logo.png" class="friend-logo" role="presentation">

</a>

</div>

<div class="quote-container">

<p><em>“TypeScript helped us to <strong>reuse the team’s knowledge</strong> and to <strong>keep the same team velocity</strong> by providing the same excellent developer experience as C# ... A huge improvement over plain JavaScript.”</em></p>

</div>

<div class="author-container">

<p><em>&mdash; Valio Stoychev, PM Lead - NativeScript</em></p>

</div>

</div>

</div>

</div>

<div class="item">

<div class="friend-container">

<div class="friend-item">

<div class="image-container">

<a href="community/friends.html" aria-label="Aurelia and other friends of TypeScript">

<img src="assets/images/friends/Aurelia/logo.png" class="friend-logo" role="presentation">

</a>

</div>

<div class="quote-container">

<p><em>“By combining Aurelia with TypeScript for modern web, mobile and desktop development, we've seen what is perhaps the <strong>most beautiful and elegant app development workflow to date</strong>.”</em></p>

</div>

<div class="author-container">

<p><em>&mdash; Rob Eisenberg, Architect - Aurelia</em></p>

</div>

</div>

</div>

</div>

<div class="item">

<div class="friend-container">

<div class="friend-item">

<div class="image-container">

<a href="community/friends.html" aria-label="Dojo and other friends of TypeScript">

<img src="assets/images/friends/Dojo/logo.png" class="friend-logo" role="presentation">

</a>

</div>

<div class="quote-container">

<p><em>TypeScript has helped ensure that Dojo 2 will be built on rock solid foundations, which <strong>will make enterprise development better</strong>. TypeScript gives us <strong>all the benefits of ES6, plus more productivity</strong>, … and <strong>responsive support from the TypeScript team</strong>.”</em></p>

</div>

<div class="author-container">

<p><em>&mdash; Dylan Schiemann, Co-founder - Dojo Toolkit, CEO - SitePen</em></p>

</div>

</div>

</div>

</div>

<div class="item">

<div class="friend-container">

<div class="friend-item">

<div class="image-container">

<a href="community/friends.html" aria-label="Epic and other friends of TypeScript">

<img src="assets/images/friends/Epic/logo.png" class="friend-logo" role="presentation">

</a>

</div>

<div class="quote-container">

<p><em>“TypeScript is a <strong>smart choice when writing a modern web- or JavaScript-based application</strong>. TypeScript’s carefully considered language features and functionality, and its consistently improving tools, result in a <strong>terrifically productive development experience</strong>.”</em></p>

</div>

<div class="author-container">

<p><em>&mdash; Aaron Cornelius, Research Fellow - Epic</em></p>

</div>

</div>

</div>

</div>

</div>

<!-- Forward control -->

<a class="right carousel-control" href="#friend-carousel" role="button" data-slide="next">

<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

<span class="sr-only">Next</span>

</a>

<!-- END OF CAROUSEL -->

</div>

<a class="more-friends" href="community/friends.html"><p class="text-center">See more friends of TypeScript</p></a>

</div>

</div>

</div>

</div>

</div>

<div class="container-fluid next-steps-container">

<div class="container ">

<div class="row">

<div class="col-sm-6">

<div class="value-prop-1">

<div class="next-step-header">Contribute</div>

<div class="content">

<div class="spacer"></div>

<div>

Help shape the future of TypeScript by joining our community today

and send us pull requests via our <a href="{{ site.data.urls.ts_github }}">GitHub repository</a>!

</div>

</div>

</div>

</div>

<div class="col-sm-6">

<div class="value-prop-2">

<div class="separator hidden-xs"></div>

<div class="next-step-header">Learn</div>

<div class="content">

<div class="spacer"></div>

<div>

<div><a href="/docs/">Docs</a> - To help you get started</div>

<div><a href="{{ site.data.urls.ts_github }}" target="_blank">GitHub</a> &amp; <a href="{{ site.data.urls.ts_stackoverflow_tagged }}" target="_blank">Stack Overflow</a> - File and discuss issues</div>

<div><a href="{{ site.data.urls.ts_blog }}" target="_blank">Blog</a> &amp; <a href="{{ site.data.urls.ts_twitter }}" target="_blank">Twitter</a> - Stay up to date</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<script>

$(document).ready(function () {

$(".video-btn").each(function () {

$(this).magnificPopup({

items: {

src: '<video class="video-content" src="' + this.href + '" controls="controls" autoplay="autoplay">' + '</video>',

type: 'inline'

},

disableOn: 700,

mainClass: 'mfp-fade',

showCloseBtn: true,

callbacks: {

open: function () {

$(this.content[0]).on('play', function () {

reportAction('video', 'play');

});

$(this.content[0]).on('pause', function () {

reportAction('video', 'pause');

});

$(this.content[0]).on('ended', function () {

reportAction('video', 'ended');

});

}

}

});

});

});

</script>