TypeScript Programming with Visual Studio Code

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="awa-expId" content="vscw_aaflight1016_treatment:103440;" /> <meta name="awa-env" content="prod" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="google-site-verification" content="hNs7DXrTySP_X-0P_AC0WulAXvUwgSXEmgfcO2r79dw" />  <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@code" /> <meta name="description" content="Get the best out editing TypeScript with Visual Studio Code." /> <meta name="keywords" content="" /> <meta name="ms.prod" content="vs-code" /> <meta name="ms.TOCTitle" content="TypeScript" /> <meta name="ms.ContentId" content="05C114DF-4FDC-4C65-8954-58F5F293FAFD" /> <meta name="ms.date" content="10/29/2024" /> <meta name="ms.topic" content="conceptual" />  <meta name="twitter:card" content="summary_large_image" /> <meta property="og:url" content="https://code.visualstudio.com/docs/languages/typescript" /> <meta property="og:type" content="article" /> <meta property="og:title" content="TypeScript Programming with Visual Studio Code" /> <meta property="og:description" content="Get the best out editing TypeScript with Visual Studio Code." /> <meta property="og:image" content="https://code.visualstudio.com/assets/docs/languages/typescript/typescript-social.png" /> <link rel="shortcut icon" href="/favicon.ico" sizes="128x128" /> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <title>TypeScript Programming with Visual Studio Code</title> <link rel="stylesheet" href="/vendor/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="/dist/v2/style.css"> <script src="https://consentdeliveryfd.azurefd.net/mscc/lib/v2/wcp-consent.js"></script> <script type="text/javascript" src="https://js.monitor.azure.com/scripts/c/ms.analytics-web-4.min.js"></script> <script type="text/javascript"> // Leave as var; siteConsent is initialized and referenced elsewhere. var siteConsent = null; const GPC_DataSharingOptIn = false; WcpConsent.onInitCallback(function () { window.appInsights = new oneDS.ApplicationInsights(); window.appInsights.initialize({ instrumentationKey: "1a3eb3104447440391ad5f2a6ee06a0a-62879566-bc58-4741-9650-302bf2af703f-7103", propertyConfiguration: { userConsented: false, gpcDataSharingOptIn: false, callback: { userConsentDetails: siteConsent ? siteConsent.getConsent : undefined }, }, cookieCfg: { ignoreCookies: ["MSCC"] }, webAnalyticsConfiguration:{ // Web Analytics Plugin configuration urlCollectQuery: true, urlCollectHash: true, autoCapture: { scroll: true, pageView: true, onLoad: true, onUnload: true, click: true, resize: true, jsError: true } } }, []); window.appInsights.getPropertyManager().getPropertiesContext().web.gpcDataSharingOptIn = GPC_DataSharingOptIn; }); </script> <link rel="alternate" type="application/atom+xml" title="RSS Feed for code.visualstudio.com" href="/feed.xml" /> </head> <body >  <script> function setTheme(themeName) { if (themeName === 'dark') { document.documentElement.removeAttribute('data-theme'); // dark is default, so no data-theme attribute needed } if (themeName === 'light') { document.documentElement.setAttribute('data-theme', themeName); } return; } // Determine initial theme: user preference or system preference let theme = localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'); setTheme(theme); // Apply the initial theme // Listen for changes in the system theme preference window.matchMedia('(prefers-color-scheme: dark)').addListener(e => { if (!localStorage.getItem('theme')) { // Only if no user preference is saved setTheme(e.matches ? 'dark' : 'light'); } }); </script> <div id="main"> <div class="navbar-fixed-container"> <div class="navbar navbar-inverse navbar-fixed-top " data-spy="affix" data-offset-top="1"> <div id='cookie-banner'></div> <nav role="navigation" aria-label="Top Level"> <div class="container"> <div class="nav navbar-header"> <a class="navbar-brand" href="/"><span>Visual Studio Code</span></a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" aria-label="Expand and Collapse Menu"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-left"> <li class="active" ><a id="nav-docs" href="/docs">Docs</a></li> <li ><a id="nav-updates" href="/updates">Updates</a></li> <li ><a id="nav-blogs" href="/blogs">Blog</a></li> <li ><a id="nav-extend" href="/api">API</a></li> <li><a href="https://marketplace.visualstudio.com/VSCode" target="_blank" rel="noopener" id="nav-extensions">Extensions</a></li> <li ><a id="nav-faqs" href="/docs/supporting/faq">FAQ</a></li> <li class='search visible-xs visible-sm' ><a href="/Search">Search</a></li> <li ><a id="nav-copilot" href="/docs/copilot/overview">GitHub Copilot</a></li> </ul> </ul> <ul class="nav navbar-nav navbar-right" role="presentation"> <li> <button type="button" class="theme-switch" id="theme-toggle"> <img class="theme-icon-light" src="/assets/icons/theme-light.svg" alt="Switch to the dark theme" /> <img class="theme-icon-dark" src="/assets/icons/theme-dark.svg" alt="Switch to the light theme" /> </button> </li> <li> <a href="/Search" title="Search" class="btn search-btn" id="nav-search"> <img class="search-icon-light" src="/assets/icons/search.svg" width="16px" height="16px" alt="Search" /> <img class="search-icon-dark" src="/assets/icons/search-dark.svg" width="16px" height="16px" alt="Search" /> </a> </li> <li class="search" role="presentation"> <form class="nav-search search-form" role="search" aria-label="Search"> <div class="input-group" role="presentation"> <input type="text" name="q" class="search-box form-control" placeholder="Search Docs" aria-label="Search text"/> <span class="input-group-btn"> <button tabindex="0" class="btn" type="submit" aria-label="Search"> <img class="search-icon-dark" src="/assets/icons/search-dark.svg" alt="Search" /> <img class="search-icon-light" src="/assets/icons/search.svg" alt="Search" /> </button> </span> </div> </form> </li>  <li><a class="link-button" href="/Download" id="nav-download"> <span>Download</span></a></li> </ul> </div> </div> </nav> </div> </div> <div class="updates-banner "> <div class="container"> <p class="message"><a href="/updates" id="banner-link-updates">Version 1.95</a> is now available! Read about the new features and fixes from October.</p> </div> <div tabindex="0" role="button" title="Dismiss this update" class="dismiss-btn" id="banner-dismiss-btn"><span class="sr-only">Dismiss this update</span><span aria-hidden="true" class="glyph-icon"></span></div> </div>   <div id="main-content"> <script> function closeReportIssue() { var element = document.getElementById('surveypopup'); element.parentElement.removeChild(element); } function reportIssue(tutorial, page) { var div = document.createElement('div'); div.innerHTML = '<div id="surveypopup" class="overlay visible"><div class="surveypopup"><div id="surveytitle">Tell us more<a href="javascript:void(0)" onclick="closeReportIssue()">X</a></div><div id="surveydiv"><iframe frameBorder="0" scrolling="0" src="https://www.research.net/r/PWZWZ52?tutorial=' + tutorial + '&step=' + page + '"></iframe></div></div></div>'; document.body.appendChild(div.children[0]); } </script> <div class="container body-content docs"> <div class="row">  <div class="col-xs-12 col-md-2 docs-navbar-container"> <nav id="docs-navbar" aria-label="Topics" class="docs-nav visible-md visible-lg"> <ul class="nav" id="main-nav"> <li > <a class="docs-home" href="/docs" >Overview</a> </li> <li class="panel collapsed"> <a class="area" role="button" href="#setup-articles" data-parent="#main-nav" data-toggle="collapse">Setup</a> <ul id="setup-articles" class="collapse "> <li > <a href="/docs/setup/setup-overview" >Overview</a> </li> <li > <a href="/docs/setup/linux" >Linux</a> </li> <li > <a href="/docs/setup/mac" >macOS</a> </li> <li > <a href="/docs/setup/windows" >Windows</a> </li> <li > <a href="/docs/setup/raspberry-pi" >Raspberry Pi</a> </li> <li > <a href="/docs/setup/network" >Network</a> </li> <li > <a href="/docs/setup/additional-components" >Additional Components</a> </li> <li > <a href="/docs/setup/enterprise" >Enterprise</a> </li> <li > <a href="/docs/setup/uninstall" >Uninstall</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#getstarted-articles" data-parent="#main-nav" data-toggle="collapse">Get Started</a> <ul id="getstarted-articles" class="collapse "> <li > <a href="/docs/getstarted/getting-started" >Tutorial</a> </li> <li > <a href="/docs/getstarted/introvideos" >Intro Videos</a> </li> <li > <a href="/docs/getstarted/tips-and-tricks" >Tips and Tricks</a> </li> <li > <a href="/docs/getstarted/userinterface" >User Interface</a> </li> <li > <a href="/docs/getstarted/themes" >Themes</a> </li> <li > <a href="/docs/getstarted/settings" >Settings</a> </li> <li > <a href="/docs/getstarted/keybindings" >Key Bindings</a> </li> <li > <a href="/docs/getstarted/locales" >Display Language</a> </li> <li > <a href="/docs/getstarted/telemetry" >Telemetry</a> </li> <li > <a href="/docs/getstarted/educators-and-students" >Educators & Students</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#editor-articles" data-parent="#main-nav" data-toggle="collapse">User Guide</a> <ul id="editor-articles" class="collapse "> <li > <a href="/docs/editor/codebasics" >Basic Editing</a> </li> <li > <a href="/docs/editor/extension-marketplace" >Extension Marketplace</a> </li> <li > <a href="/docs/editor/intellisense" >IntelliSense</a> </li> <li > <a href="/docs/editor/editingevolved" >Code Navigation</a> </li> <li > <a href="/docs/editor/refactoring" >Refactoring</a> </li> <li > <a href="/docs/editor/debugging" >Debugging</a> </li> <li > <a href="/docs/editor/testing" >Testing</a> </li> <li > <a href="/docs/editor/vscode-web" >VS Code for the Web</a> </li> <li > <a href="/docs/editor/tasks" >Tasks</a> </li> <li > <a href="/docs/editor/profiles" >Profiles</a> </li> <li > <a href="/docs/editor/settings-sync" >Settings Sync</a> </li> <li > <a href="/docs/editor/userdefinedsnippets" >Snippets</a> </li> <li > <a href="/docs/editor/emmet" >Emmet</a> </li> <li > <a href="/docs/editor/command-line" >Command Line Interface</a> </li> <li > <a href="/docs/editor/workspaces" >Workspaces</a> </li> <li > <a href="/docs/editor/workspace-trust" >Workspace Trust</a> </li> <li > <a href="/docs/editor/multi-root-workspaces" >Multi-root Workspaces</a> </li> <li > <a href="/docs/editor/accessibility" >Accessibility</a> </li> <li > <a href="/docs/editor/voice" >Voice Interactions</a> </li> <li > <a href="/docs/editor/custom-layout" >Custom Layout</a> </li> <li > <a href="/docs/editor/port-forwarding" >Port Forwarding</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#sourcecontrol-articles" data-parent="#main-nav" data-toggle="collapse">Source Control</a> <ul id="sourcecontrol-articles" class="collapse "> <li > <a href="/docs/sourcecontrol/overview" >Overview</a> </li> <li > <a href="/docs/sourcecontrol/intro-to-git" >Introduction to Git</a> </li> <li > <a href="/docs/sourcecontrol/github" >Collaborate on GitHub</a> </li> <li > <a href="/docs/sourcecontrol/faq" >FAQ</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#terminal-articles" data-parent="#main-nav" data-toggle="collapse">Terminal</a> <ul id="terminal-articles" class="collapse "> <li > <a href="/docs/terminal/getting-started" >Getting Started Tutorial</a> </li> <li > <a href="/docs/terminal/basics" >Terminal Basics</a> </li> <li > <a href="/docs/terminal/profiles" >Terminal Profiles</a> </li> <li > <a href="/docs/terminal/shell-integration" >Shell Integration</a> </li> <li > <a href="/docs/terminal/appearance" >Appearance</a> </li> <li > <a href="/docs/terminal/advanced" >Advanced</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#copilot-articles" data-parent="#main-nav" data-toggle="collapse">GitHub Copilot</a> <ul id="copilot-articles" class="collapse "> <li > <a href="/docs/copilot/overview" >Overview</a> </li> <li > <a href="/docs/copilot/copilot-vscode-features" >Copilot Cheat Sheet</a> </li> <li > <a href="/docs/copilot/setup" >Setup</a> </li> <li > <a href="/docs/copilot/getting-started" >Quickstart</a> </li> <li > <a href="/docs/copilot/ai-powered-suggestions" >Code Completions</a> </li> <li > <a href="/docs/copilot/copilot-chat" >Copilot Chat</a> </li> <li > <a href="/docs/copilot/getting-started-chat" >Copilot Chat Tutorial</a> </li> <li > <a href="/docs/copilot/copilot-edits" >Copilot Edits</a> </li> <li > <a href="/docs/copilot/prompt-crafting" >Best Practices</a> </li> <li > <a href="/docs/copilot/workspace-context" >Workspace Context</a> </li> <li > <a href="/docs/copilot/copilot-customization" >Customizing Copilot</a> </li> <li > <a href="/docs/copilot/copilot-extensibility-overview" >Copilot Extensibility</a> </li> <li > <a href="/docs/copilot/copilot-settings" >Settings Reference</a> </li> <li > <a href="/docs/copilot/faq" >FAQ</a> </li> </ul> </li> <li class="panel active expanded"> <a class="area" role="button" href="#languages-articles" data-parent="#main-nav" data-toggle="collapse">Languages</a> <ul id="languages-articles" class="collapse in"> <li > <a href="/docs/languages/overview" >Overview</a> </li> <li > <a href="/docs/languages/javascript" >JavaScript</a> </li> <li > <a href="/docs/languages/json" >JSON</a> </li> <li > <a href="/docs/languages/html" >HTML</a> </li> <li > <a href="/docs/languages/css" >CSS, SCSS and Less</a> </li> <li class="active"> <a href="/docs/languages/typescript" aria-label="Current Page: TypeScript">TypeScript</a> </li> <li > <a href="/docs/languages/markdown" >Markdown</a> </li> <li > <a href="/docs/languages/powershell" >PowerShell</a> </li> <li > <a href="/docs/languages/cpp" >C++</a> </li> <li > <a href="/docs/languages/java" >Java</a> </li> <li > <a href="/docs/languages/php" >PHP</a> </li> <li > <a href="/docs/languages/python" >Python</a> </li> <li > <a href="/docs/languages/julia" >Julia</a> </li> <li > <a href="/docs/languages/r" >R</a> </li> <li > <a href="/docs/languages/ruby" >Ruby</a> </li> <li > <a href="/docs/languages/rust" >Rust</a> </li> <li > <a href="/docs/languages/go" >Go</a> </li> <li > <a href="/docs/languages/tsql" >T-SQL</a> </li> <li > <a href="/docs/languages/csharp" >C#</a> </li> <li > <a href="/docs/languages/dotnet" >.NET</a> </li> <li > <a href="/docs/languages/polyglot" >Polyglot</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#nodejs-articles" data-parent="#main-nav" data-toggle="collapse">Node.js / JavaScript</a> <ul id="nodejs-articles" class="collapse "> <li > <a href="/docs/nodejs/working-with-javascript" >Working with JavaScript</a> </li> <li > <a href="/docs/nodejs/nodejs-tutorial" >Node.js Tutorial</a> </li> <li > <a href="/docs/nodejs/nodejs-debugging" >Node.js Debugging</a> </li> <li > <a href="/docs/nodejs/nodejs-deployment" >Deploy Node.js Apps</a> </li> <li > <a href="/docs/nodejs/browser-debugging" >Browser Debugging</a> </li> <li > <a href="/docs/nodejs/angular-tutorial" >Angular Tutorial</a> </li> <li > <a href="/docs/nodejs/reactjs-tutorial" >React Tutorial</a> </li> <li > <a href="/docs/nodejs/vuejs-tutorial" >Vue Tutorial</a> </li> <li > <a href="/docs/nodejs/debugging-recipes" >Debugging Recipes</a> </li> <li > <a href="/docs/nodejs/profiling" >Performance Profiling</a> </li> <li > <a href="/docs/nodejs/extensions" >Extensions</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#typescript-articles" data-parent="#main-nav" data-toggle="collapse">TypeScript</a> <ul id="typescript-articles" class="collapse "> <li > <a href="/docs/typescript/typescript-tutorial" >Tutorial</a> </li> <li > <a href="/docs/typescript/typescript-compiling" >Compiling</a> </li> <li > <a href="/docs/typescript/typescript-editing" >Editing</a> </li> <li > <a href="/docs/typescript/typescript-refactoring" >Refactoring</a> </li> <li > <a href="/docs/typescript/typescript-debugging" >Debugging</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#python-articles" data-parent="#main-nav" data-toggle="collapse">Python</a> <ul id="python-articles" class="collapse "> <li > <a href="/docs/python/python-quick-start" >Quick Start</a> </li> <li > <a href="/docs/python/python-tutorial" >Tutorial</a> </li> <li > <a href="/docs/python/run" >Run Python Code</a> </li> <li > <a href="/docs/python/editing" >Editing Code</a> </li> <li > <a href="/docs/python/linting" >Linting</a> </li> <li > <a href="/docs/python/formatting" >Formatting</a> </li> <li > <a href="/docs/python/debugging" >Debugging</a> </li> <li > <a href="/docs/python/environments" >Environments</a> </li> <li > <a href="/docs/python/testing" >Testing</a> </li> <li > <a href="/docs/python/jupyter-support-py" >Python Interactive</a> </li> <li > <a href="/docs/python/tutorial-django" >Django Tutorial</a> </li> <li > <a href="/docs/python/tutorial-fastapi" >FastAPI Tutorial</a> </li> <li > <a href="/docs/python/tutorial-flask" >Flask Tutorial</a> </li> <li > <a href="/docs/python/tutorial-create-containers" >Create containers</a> </li> <li > <a href="/docs/python/python-on-azure" >Deploy Python Apps</a> </li> <li > <a href="/docs/python/python-web" >Python in the Web</a> </li> <li > <a href="/docs/python/settings-reference" >Settings Reference</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#java-articles" data-parent="#main-nav" data-toggle="collapse">Java</a> <ul id="java-articles" class="collapse "> <li > <a href="/docs/java/java-tutorial" >Getting Started</a> </li> <li > <a href="/docs/java/java-editing" >Navigate and Edit</a> </li> <li > <a href="/docs/java/java-refactoring" >Refactoring</a> </li> <li > <a href="/docs/java/java-linting" >Formatting and Linting</a> </li> <li > <a href="/docs/java/java-project" >Project Management</a> </li> <li > <a href="/docs/java/java-build" >Build Tools</a> </li> <li > <a href="/docs/java/java-debugging" >Run and Debug</a> </li> <li > <a href="/docs/java/java-testing" >Testing</a> </li> <li > <a href="/docs/java/java-spring-boot" >Spring Boot</a> </li> <li > <a href="/docs/java/java-tomcat-jetty" >Application Servers</a> </li> <li > <a href="/docs/java/java-on-azure" >Deploy Java Apps</a> </li> <li > <a href="/docs/java/java-gui" >GUI Applications</a> </li> <li > <a href="/docs/java/extensions" >Extensions</a> </li> <li > <a href="/docs/java/java-faq" >FAQ</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#cpp-articles" data-parent="#main-nav" data-toggle="collapse">C++</a> <ul id="cpp-articles" class="collapse "> <li > <a href="/docs/cpp/introvideos-cpp" >Intro Videos</a> </li> <li > <a href="/docs/cpp/config-linux" >GCC on Linux</a> </li> <li > <a href="/docs/cpp/config-mingw" >GCC on Windows</a> </li> <li > <a href="/docs/cpp/config-wsl" >GCC on Windows Subsystem for Linux</a> </li> <li > <a href="/docs/cpp/config-clang-mac" >Clang on macOS</a> </li> <li > <a href="/docs/cpp/config-msvc" >Microsoft C++ on Windows</a> </li> <li > <a href="/docs/cpp/build-with-cmake" >Build with CMake</a> </li> <li > <a href="/docs/cpp/cmake-linux" >CMake Tools on Linux</a> </li> <li > <a href="/docs/cpp/cmake-quickstart" >CMake Quick Start</a> </li> <li > <a href="/docs/cpp/cpp-ide" >Editing and Navigating</a> </li> <li > <a href="/docs/cpp/cpp-debug" >Debugging</a> </li> <li > <a href="/docs/cpp/cpp-refactoring" >Refactoring</a> </li> <li > <a href="/docs/cpp/launch-json-reference" >Configure debugging</a> </li> <li > <a href="/docs/cpp/customize-default-settings-cpp" >Settings</a> </li> <li > <a href="/docs/cpp/configure-intellisense" >Configure IntelliSense</a> </li> <li > <a href="/docs/cpp/configure-intellisense-crosscompilation" >Configure IntelliSense for cross-compiling</a> </li> <li > <a href="/docs/cpp/faq-cpp" >FAQ</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#csharp-articles" data-parent="#main-nav" data-toggle="collapse">C#</a> <ul id="csharp-articles" class="collapse "> <li > <a href="/docs/csharp/introvideos-csharp" >Intro Videos</a> </li> <li > <a href="/docs/csharp/get-started" >Get Started</a> </li> <li > <a href="/docs/csharp/navigate-edit" >Navigate and Edit</a> </li> <li > <a href="/docs/csharp/intellicode" >IntelliCode</a> </li> <li > <a href="/docs/csharp/refactoring" >Refactoring</a> </li> <li > <a href="/docs/csharp/formatting-linting" >Formatting and Linting</a> </li> <li > <a href="/docs/csharp/project-management" >Project Management</a> </li> <li > <a href="/docs/csharp/build-tools" >Build Tools</a> </li> <li > <a href="/docs/csharp/package-management" >Package Management</a> </li> <li > <a href="/docs/csharp/debugging" >Run and Debug</a> </li> <li > <a href="/docs/csharp/testing" >Testing</a> </li> <li > <a href="/docs/csharp/cs-dev-kit-faq" >FAQ</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#containers-articles" data-parent="#main-nav" data-toggle="collapse">Docker</a> <ul id="containers-articles" class="collapse "> <li > <a href="/docs/containers/overview" >Overview</a> </li> <li > <a href="/docs/containers/quickstart-node" >Node.js</a> </li> <li > <a href="/docs/containers/quickstart-python" >Python</a> </li> <li > <a href="/docs/containers/quickstart-aspnet-core" >ASP.NET Core</a> </li> <li > <a href="/docs/containers/debug-common" >Debug</a> </li> <li > <a href="/docs/containers/docker-compose" >Docker Compose</a> </li> <li > <a href="/docs/containers/quickstart-container-registries" >Registries</a> </li> <li > <a href="/docs/containers/app-service" >Deploy to Azure</a> </li> <li > <a href="/docs/containers/choosing-dev-environment" >Choose a dev environment</a> </li> <li > <a href="/docs/containers/reference" >Customize</a> </li> <li > <a href="/docs/containers/bridge-to-kubernetes" >Develop with Kubernetes</a> </li> <li > <a href="/docs/containers/troubleshooting" >Tips and Tricks</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#datascience-articles" data-parent="#main-nav" data-toggle="collapse">Data Science</a> <ul id="datascience-articles" class="collapse "> <li > <a href="/docs/datascience/overview" >Overview</a> </li> <li > <a href="/docs/datascience/jupyter-notebooks" >Jupyter Notebooks</a> </li> <li > <a href="/docs/datascience/data-science-tutorial" >Data Science Tutorial</a> </li> <li > <a href="/docs/datascience/python-interactive" >Python Interactive</a> </li> <li > <a href="/docs/datascience/data-wrangler-quick-start" >Data Wrangler Quick Start</a> </li> <li > <a href="/docs/datascience/data-wrangler" >Data Wrangler</a> </li> <li > <a href="/docs/datascience/pytorch-support" >PyTorch Support</a> </li> <li > <a href="/docs/datascience/azure-machine-learning" >Azure Machine Learning</a> </li> <li > <a href="/docs/datascience/jupyter-kernel-management" >Manage Jupyter Kernels</a> </li> <li > <a href="/docs/datascience/notebooks-web" >Jupyter Notebooks on the web</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#azure-articles" data-parent="#main-nav" data-toggle="collapse">Azure</a> <ul id="azure-articles" class="collapse "> <li > <a href="/docs/azure/overview" >Overview</a> </li> <li > <a href="/docs/azure/gettingstarted" >Getting Started</a> </li> <li > <a href="/docs/azure/deployment" >Deployment</a> </li> <li > <a href="/docs/azure/docker" >Docker</a> </li> <li > <a href="/docs/azure/aksextensions" >Azure Kubernetes Service</a> </li> <li > <a href="/docs/azure/kubernetes" >Kubernetes</a> </li> <li > <a href="/docs/azure/mongodb" >MongoDB</a> </li> <li > <a href="/docs/azure/remote-debugging" >Remote Debugging for Node.js</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#remote-articles" data-parent="#main-nav" data-toggle="collapse">Remote</a> <ul id="remote-articles" class="collapse "> <li > <a href="/docs/remote/remote-overview" >Overview</a> </li> <li > <a href="/docs/remote/ssh" >SSH</a> </li> <li > <a href="/docs/remote/dev-containers" >Dev Containers</a> </li> <li > <a href="/docs/remote/wsl" >Windows Subsystem for Linux</a> </li> <li > <a href="/docs/remote/codespaces" >GitHub Codespaces</a> </li> <li > <a href="/docs/remote/vscode-server" >VS Code Server</a> </li> <li > <a href="/docs/remote/tunnels" >Tunnels</a> </li> <li > <a href="/docs/remote/ssh-tutorial" >SSH Tutorial</a> </li> <li > <a href="/docs/remote/wsl-tutorial" >WSL Tutorial</a> </li> <li > <a href="/docs/remote/troubleshooting" >Tips and Tricks</a> </li> <li > <a href="/docs/remote/faq" >FAQ</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#devcontainers-articles" data-parent="#main-nav" data-toggle="collapse">Dev Containers</a> <ul id="devcontainers-articles" class="collapse "> <li > <a href="/docs/devcontainers/containers" >Overview</a> </li> <li > <a href="/docs/devcontainers/tutorial" >Tutorial</a> </li> <li > <a href="/docs/devcontainers/attach-container" >Attach to Container</a> </li> <li > <a href="/docs/devcontainers/create-dev-container" >Create a Dev Container</a> </li> <li > <a href="/docs/devcontainers/containers-advanced" >Advanced Containers</a> </li> <li > <a href="/docs/devcontainers/devcontainerjson-reference" >devcontainer.json</a> </li> <li > <a href="/docs/devcontainers/devcontainer-cli" >Dev Container CLI</a> </li> <li > <a href="/docs/devcontainers/tips-and-tricks" >Tips and Tricks</a> </li> <li > <a href="/docs/devcontainers/faq" >FAQ</a> </li> </ul> </li> </ul> </nav> <nav id="small-nav" aria-label="Topics" class="docs-nav hidden-md hidden-lg"> <label class="faux-h4" for="small-nav-dropdown">Topics</label> <select id="small-nav-dropdown" aria-label="topics"> <option value="/docs" >Overview</option> <optgroup label="Setup"> <option value="/docs/setup/setup-overview" >Overview</option> <option value="/docs/setup/linux" >Linux</option> <option value="/docs/setup/mac" >macOS</option> <option value="/docs/setup/windows" >Windows</option> <option value="/docs/setup/raspberry-pi" >Raspberry Pi</option> <option value="/docs/setup/network" >Network</option> <option value="/docs/setup/additional-components" >Additional Components</option> <option value="/docs/setup/enterprise" >Enterprise</option> <option value="/docs/setup/uninstall" >Uninstall</option> </optgroup> <optgroup label="Get Started"> <option value="/docs/getstarted/getting-started" >Tutorial</option> <option value="/docs/getstarted/introvideos" >Intro Videos</option> <option value="/docs/getstarted/tips-and-tricks" >Tips and Tricks</option> <option value="/docs/getstarted/userinterface" >User Interface</option> <option value="/docs/getstarted/themes" >Themes</option> <option value="/docs/getstarted/settings" >Settings</option> <option value="/docs/getstarted/keybindings" >Key Bindings</option> <option value="/docs/getstarted/locales" >Display Language</option> <option value="/docs/getstarted/telemetry" >Telemetry</option> <option value="/docs/getstarted/educators-and-students" >Educators & Students</option> </optgroup> <optgroup label="User Guide"> <option value="/docs/editor/codebasics" >Basic Editing</option> <option value="/docs/editor/extension-marketplace" >Extension Marketplace</option> <option value="/docs/editor/intellisense" >IntelliSense</option> <option value="/docs/editor/editingevolved" >Code Navigation</option> <option value="/docs/editor/refactoring" >Refactoring</option> <option value="/docs/editor/debugging" >Debugging</option> <option value="/docs/editor/testing" >Testing</option> <option value="/docs/editor/vscode-web" >VS Code for the Web</option> <option value="/docs/editor/tasks" >Tasks</option> <option value="/docs/editor/profiles" >Profiles</option> <option value="/docs/editor/settings-sync" >Settings Sync</option> <option value="/docs/editor/userdefinedsnippets" >Snippets</option> <option value="/docs/editor/emmet" >Emmet</option> <option value="/docs/editor/command-line" >Command Line Interface</option> <option value="/docs/editor/workspaces" >Workspaces</option> <option value="/docs/editor/workspace-trust" >Workspace Trust</option> <option value="/docs/editor/multi-root-workspaces" >Multi-root Workspaces</option> <option value="/docs/editor/accessibility" >Accessibility</option> <option value="/docs/editor/voice" >Voice Interactions</option> <option value="/docs/editor/custom-layout" >Custom Layout</option> <option value="/docs/editor/port-forwarding" >Port Forwarding</option> </optgroup> <optgroup label="Source Control"> <option value="/docs/sourcecontrol/overview" >Overview</option> <option value="/docs/sourcecontrol/intro-to-git" >Introduction to Git</option> <option value="/docs/sourcecontrol/github" >Collaborate on GitHub</option> <option value="/docs/sourcecontrol/faq" >FAQ</option> </optgroup> <optgroup label="Terminal"> <option value="/docs/terminal/getting-started" >Getting Started Tutorial</option> <option value="/docs/terminal/basics" >Terminal Basics</option> <option value="/docs/terminal/profiles" >Terminal Profiles</option> <option value="/docs/terminal/shell-integration" >Shell Integration</option> <option value="/docs/terminal/appearance" >Appearance</option> <option value="/docs/terminal/advanced" >Advanced</option> </optgroup> <optgroup label="GitHub Copilot"> <option value="/docs/copilot/overview" >Overview</option> <option value="/docs/copilot/copilot-vscode-features" >Copilot Cheat Sheet</option> <option value="/docs/copilot/setup" >Setup</option> <option value="/docs/copilot/getting-started" >Quickstart</option> <option value="/docs/copilot/ai-powered-suggestions" >Code Completions</option> <option value="/docs/copilot/copilot-chat" >Copilot Chat</option> <option value="/docs/copilot/getting-started-chat" >Copilot Chat Tutorial</option> <option value="/docs/copilot/copilot-edits" >Copilot Edits</option> <option value="/docs/copilot/prompt-crafting" >Best Practices</option> <option value="/docs/copilot/workspace-context" >Workspace Context</option> <option value="/docs/copilot/copilot-customization" >Customizing Copilot</option> <option value="/docs/copilot/copilot-extensibility-overview" >Copilot Extensibility</option> <option value="/docs/copilot/copilot-settings" >Settings Reference</option> <option value="/docs/copilot/faq" >FAQ</option> </optgroup> <optgroup label="Languages"> <option value="/docs/languages/overview" >Overview</option> <option value="/docs/languages/javascript" >JavaScript</option> <option value="/docs/languages/json" >JSON</option> <option value="/docs/languages/html" >HTML</option> <option value="/docs/languages/css" >CSS, SCSS and Less</option> <option value="/docs/languages/typescript" selected>TypeScript</option> <option value="/docs/languages/markdown" >Markdown</option> <option value="/docs/languages/powershell" >PowerShell</option> <option value="/docs/languages/cpp" >C++</option> <option value="/docs/languages/java" >Java</option> <option value="/docs/languages/php" >PHP</option> <option value="/docs/languages/python" >Python</option> <option value="/docs/languages/julia" >Julia</option> <option value="/docs/languages/r" >R</option> <option value="/docs/languages/ruby" >Ruby</option> <option value="/docs/languages/rust" >Rust</option> <option value="/docs/languages/go" >Go</option> <option value="/docs/languages/tsql" >T-SQL</option> <option value="/docs/languages/csharp" >C#</option> <option value="/docs/languages/dotnet" >.NET</option> <option value="/docs/languages/polyglot" >Polyglot</option> </optgroup> <optgroup label="Node.js / JavaScript"> <option value="/docs/nodejs/working-with-javascript" >Working with JavaScript</option> <option value="/docs/nodejs/nodejs-tutorial" >Node.js Tutorial</option> <option value="/docs/nodejs/nodejs-debugging" >Node.js Debugging</option> <option value="/docs/nodejs/nodejs-deployment" >Deploy Node.js Apps</option> <option value="/docs/nodejs/browser-debugging" >Browser Debugging</option> <option value="/docs/nodejs/angular-tutorial" >Angular Tutorial</option> <option value="/docs/nodejs/reactjs-tutorial" >React Tutorial</option> <option value="/docs/nodejs/vuejs-tutorial" >Vue Tutorial</option> <option value="/docs/nodejs/debugging-recipes" >Debugging Recipes</option> <option value="/docs/nodejs/profiling" >Performance Profiling</option> <option value="/docs/nodejs/extensions" >Extensions</option> </optgroup> <optgroup label="TypeScript"> <option value="/docs/typescript/typescript-tutorial" >Tutorial</option> <option value="/docs/typescript/typescript-compiling" >Compiling</option> <option value="/docs/typescript/typescript-editing" >Editing</option> <option value="/docs/typescript/typescript-refactoring" >Refactoring</option> <option value="/docs/typescript/typescript-debugging" >Debugging</option> </optgroup> <optgroup label="Python"> <option value="/docs/python/python-quick-start" >Quick Start</option> <option value="/docs/python/python-tutorial" >Tutorial</option> <option value="/docs/python/run" >Run Python Code</option> <option value="/docs/python/editing" >Editing Code</option> <option value="/docs/python/linting" >Linting</option> <option value="/docs/python/formatting" >Formatting</option> <option value="/docs/python/debugging" >Debugging</option> <option value="/docs/python/environments" >Environments</option> <option value="/docs/python/testing" >Testing</option> <option value="/docs/python/jupyter-support-py" >Python Interactive</option> <option value="/docs/python/tutorial-django" >Django Tutorial</option> <option value="/docs/python/tutorial-fastapi" >FastAPI Tutorial</option> <option value="/docs/python/tutorial-flask" >Flask Tutorial</option> <option value="/docs/python/tutorial-create-containers" >Create containers</option> <option value="/docs/python/python-on-azure" >Deploy Python Apps</option> <option value="/docs/python/python-web" >Python in the Web</option> <option value="/docs/python/settings-reference" >Settings Reference</option> </optgroup> <optgroup label="Java"> <option value="/docs/java/java-tutorial" >Getting Started</option> <option value="/docs/java/java-editing" >Navigate and Edit</option> <option value="/docs/java/java-refactoring" >Refactoring</option> <option value="/docs/java/java-linting" >Formatting and Linting</option> <option value="/docs/java/java-project" >Project Management</option> <option value="/docs/java/java-build" >Build Tools</option> <option value="/docs/java/java-debugging" >Run and Debug</option> <option value="/docs/java/java-testing" >Testing</option> <option value="/docs/java/java-spring-boot" >Spring Boot</option> <option value="/docs/java/java-tomcat-jetty" >Application Servers</option> <option value="/docs/java/java-on-azure" >Deploy Java Apps</option> <option value="/docs/java/java-gui" >GUI Applications</option> <option value="/docs/java/extensions" >Extensions</option> <option value="/docs/java/java-faq" >FAQ</option> </optgroup> <optgroup label="C++"> <option value="/docs/cpp/introvideos-cpp" >Intro Videos</option> <option value="/docs/cpp/config-linux" >GCC on Linux</option> <option value="/docs/cpp/config-mingw" >GCC on Windows</option> <option value="/docs/cpp/config-wsl" >GCC on Windows Subsystem for Linux</option> <option value="/docs/cpp/config-clang-mac" >Clang on macOS</option> <option value="/docs/cpp/config-msvc" >Microsoft C++ on Windows</option> <option value="/docs/cpp/build-with-cmake" >Build with CMake</option> <option value="/docs/cpp/cmake-linux" >CMake Tools on Linux</option> <option value="/docs/cpp/cmake-quickstart" >CMake Quick Start</option> <option value="/docs/cpp/cpp-ide" >Editing and Navigating</option> <option value="/docs/cpp/cpp-debug" >Debugging</option> <option value="/docs/cpp/cpp-refactoring" >Refactoring</option> <option value="/docs/cpp/launch-json-reference" >Configure debugging</option> <option value="/docs/cpp/customize-default-settings-cpp" >Settings</option> <option value="/docs/cpp/configure-intellisense" >Configure IntelliSense</option> <option value="/docs/cpp/configure-intellisense-crosscompilation" >Configure IntelliSense for cross-compiling</option> <option value="/docs/cpp/faq-cpp" >FAQ</option> </optgroup> <optgroup label="C#"> <option value="/docs/csharp/introvideos-csharp" >Intro Videos</option> <option value="/docs/csharp/get-started" >Get Started</option> <option value="/docs/csharp/navigate-edit" >Navigate and Edit</option> <option value="/docs/csharp/intellicode" >IntelliCode</option> <option value="/docs/csharp/refactoring" >Refactoring</option> <option value="/docs/csharp/formatting-linting" >Formatting and Linting</option> <option value="/docs/csharp/project-management" >Project Management</option> <option value="/docs/csharp/build-tools" >Build Tools</option> <option value="/docs/csharp/package-management" >Package Management</option> <option value="/docs/csharp/debugging" >Run and Debug</option> <option value="/docs/csharp/testing" >Testing</option> <option value="/docs/csharp/cs-dev-kit-faq" >FAQ</option> </optgroup> <optgroup label="Docker"> <option value="/docs/containers/overview" >Overview</option> <option value="/docs/containers/quickstart-node" >Node.js</option> <option value="/docs/containers/quickstart-python" >Python</option> <option value="/docs/containers/quickstart-aspnet-core" >ASP.NET Core</option> <option value="/docs/containers/debug-common" >Debug</option> <option value="/docs/containers/docker-compose" >Docker Compose</option> <option value="/docs/containers/quickstart-container-registries" >Registries</option> <option value="/docs/containers/app-service" >Deploy to Azure</option> <option value="/docs/containers/choosing-dev-environment" >Choose a dev environment</option> <option value="/docs/containers/reference" >Customize</option> <option value="/docs/containers/bridge-to-kubernetes" >Develop with Kubernetes</option> <option value="/docs/containers/troubleshooting" >Tips and Tricks</option> </optgroup> <optgroup label="Data Science"> <option value="/docs/datascience/overview" >Overview</option> <option value="/docs/datascience/jupyter-notebooks" >Jupyter Notebooks</option> <option value="/docs/datascience/data-science-tutorial" >Data Science Tutorial</option> <option value="/docs/datascience/python-interactive" >Python Interactive</option> <option value="/docs/datascience/data-wrangler-quick-start" >Data Wrangler Quick Start</option> <option value="/docs/datascience/data-wrangler" >Data Wrangler</option> <option value="/docs/datascience/pytorch-support" >PyTorch Support</option> <option value="/docs/datascience/azure-machine-learning" >Azure Machine Learning</option> <option value="/docs/datascience/jupyter-kernel-management" >Manage Jupyter Kernels</option> <option value="/docs/datascience/notebooks-web" >Jupyter Notebooks on the web</option> </optgroup> <optgroup label="Azure"> <option value="/docs/azure/overview" >Overview</option> <option value="/docs/azure/gettingstarted" >Getting Started</option> <option value="/docs/azure/deployment" >Deployment</option> <option value="/docs/azure/docker" >Docker</option> <option value="/docs/azure/aksextensions" >Azure Kubernetes Service</option> <option value="/docs/azure/kubernetes" >Kubernetes</option> <option value="/docs/azure/mongodb" >MongoDB</option> <option value="/docs/azure/remote-debugging" >Remote Debugging for Node.js</option> </optgroup> <optgroup label="Remote"> <option value="/docs/remote/remote-overview" >Overview</option> <option value="/docs/remote/ssh" >SSH</option> <option value="/docs/remote/dev-containers" >Dev Containers</option> <option value="/docs/remote/wsl" >Windows Subsystem for Linux</option> <option value="/docs/remote/codespaces" >GitHub Codespaces</option> <option value="/docs/remote/vscode-server" >VS Code Server</option> <option value="/docs/remote/tunnels" >Tunnels</option> <option value="/docs/remote/ssh-tutorial" >SSH Tutorial</option> <option value="/docs/remote/wsl-tutorial" >WSL Tutorial</option> <option value="/docs/remote/troubleshooting" >Tips and Tricks</option> <option value="/docs/remote/faq" >FAQ</option> </optgroup> <optgroup label="Dev Containers"> <option value="/docs/devcontainers/containers" >Overview</option> <option value="/docs/devcontainers/tutorial" >Tutorial</option> <option value="/docs/devcontainers/attach-container" >Attach to Container</option> <option value="/docs/devcontainers/create-dev-container" >Create a Dev Container</option> <option value="/docs/devcontainers/containers-advanced" >Advanced Containers</option> <option value="/docs/devcontainers/devcontainerjson-reference" >devcontainer.json</option> <option value="/docs/devcontainers/devcontainer-cli" >Dev Container CLI</option> <option value="/docs/devcontainers/tips-and-tricks" >Tips and Tricks</option> <option value="/docs/devcontainers/faq" >FAQ</option> </optgroup> </select> </nav> </div>  <div class="col-xs-12 visible-xs"> <nav aria-labelledby="small-right-nav-label" class="small-nav docs-nav updates-nav"> <label class="faux-h4" for="small-right-nav-dropdown" id="small-right-nav-label">In this article</label> <select id="small-right-nav-dropdown" class="small-nav-select" aria-label="Sections"> <option value="#_installing-the-typescript-compiler">Installing the TypeScript compiler</option> <option value="#_hello-world">Hello World</option> <option value="#_intellisense">IntelliSense</option> <option value="#_snippets">Snippets</option> <option value="#_errors-and-warnings">Errors and warnings</option> <option value="#_code-navigation">Code navigation</option> <option value="#_formatting">Formatting</option> <option value="#_refactoring">Refactoring</option> <option value="#_debugging">Debugging</option> <option value="#_linters">Linters</option> <option value="#_typescript-extensions">TypeScript extensions</option> <option value="#_next-steps">Next steps</option> <option value="#_common-questions">Common questions</option> </select> </nav> </div>  <main class="col-xs-12 col-sm-9 col-md-8 body"> <div class="edit-github pull-right"> <a href="https://vscode.dev/github/microsoft/vscode-docs/blob/main/docs/languages/typescript.md" class="btn btn-default" title="Edit this document in vscode.dev"> <span class="glyphicon glyphicon-pencil"></span> <span class="hidden-xs">Edit</span> </a> </div> <h1>TypeScript in Visual Studio Code</h1> <p><a href="https://www.typescriptlang.org" class="external-link" target="_blank">TypeScript</a> is a typed superset of JavaScript that compiles to plain JavaScript. It offers classes, modules, and interfaces to help you build robust components.</p> <p><img src="/assets/docs/languages/typescript/overview.png" alt="Working with TypeScript in Visual Studio Code" loading="lazy"></p> <h2 id="_installing-the-typescript-compiler" data-needslink="_installing-the-typescript-compiler">Installing the TypeScript compiler</h2> <p>Visual Studio Code includes TypeScript language support but does not include the TypeScript compiler, <code>tsc</code>. You will need to install the TypeScript compiler either globally or in your workspace to transpile TypeScript source code to JavaScript (<code>tsc HelloWorld.ts</code>).</p> <p>The easiest way to install TypeScript is through npm, the <a href="https://www.npmjs.com/" class="external-link" target="_blank">Node.js Package Manager</a>. If you have npm installed, you can install TypeScript globally (<code>-g</code>) on your computer by:</p> <pre class="shiki" style="background-color: #1e1e1e"><code><span class="line"><span style="color: #BBBBBB">npm install -g typescript</span></span> <span class="line"></span></code></pre> <p>You can test your install by checking the version.</p> <pre class="shiki" style="background-color: #1e1e1e"><code><span class="line"><span style="color: #BBBBBB">tsc --version</span></span> <span class="line"></span></code></pre> <p>Another option is to install the TypeScript compiler locally in your project (<code>npm install --save-dev typescript</code>) and has the benefit of avoiding possible interactions with other TypeScript projects you may have.</p> <h2 id="_hello-world" data-needslink="_hello-world">Hello World</h2> <p>Let's start with a simple Hello World Node.js example. Create a new folder <code>HelloWorld</code> and launch VS Code.</p> <pre class="shiki" style="background-color: #1e1e1e"><code><span class="line"><span style="color: #BBBBBB">mkdir HelloWorld</span></span> <span class="line"><span style="color: #DCDCAA">cd</span><span style="color: #BBBBBB"> HelloWorld</span></span> <span class="line"><span style="color: #BBBBBB">code </span><span style="color: #DCDCAA">.</span></span> <span class="line"></span></code></pre> <p>From the File Explorer, create a new file called <code>helloworld.ts</code>.</p> <p><img src="/assets/docs/languages/typescript/create-new-file.png" alt="create new file" loading="lazy"></p> <p>Now add the following TypeScript code. You'll notice the TypeScript keyword <code>let</code> and the <code>string</code> type declaration.</p> <pre class="shiki" style="background-color: #1e1e1e"><code><span class="line"><span style="color: #569CD6">let</span><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">message</span><span style="color: #D4D4D4">:</span><span style="color: #BBBBBB"> </span><span style="color: #4EC9B0">string</span><span style="color: #BBBBBB"> </span><span style="color: #D4D4D4">=</span><span style="color: #BBBBBB"> </span><span style="color: #CE9178">'Hello World'</span><span style="color: #BBBBBB">;</span></span> <span class="line"><span style="color: #9CDCFE">console</span><span style="color: #BBBBBB">.</span><span style="color: #DCDCAA">log</span><span style="color: #BBBBBB">(</span><span style="color: #9CDCFE">message</span><span style="color: #BBBBBB">);</span></span> <span class="line"></span></code></pre> <p>To compile your TypeScript code, you can open the <a href="/docs/terminal/basics">Integrated Terminal</a> (<span class="dynamic-keybinding" data-commandId="workbench.action.terminal.toggleTerminal" data-osx="⌃`" data-win="Ctrl+`" data-linux="Ctrl+`"><span class="keybinding">⌃`</span> (Windows, Linux <span class="keybinding">Ctrl+`</span>)</span>) and type <code>tsc helloworld.ts</code>. This will compile and create a new <code>helloworld.js</code> JavaScript file.</p> <p><img src="/assets/docs/languages/typescript/compiled-hello-world.png" alt="compiled hello world" loading="lazy"></p> <p>If you have Node.js installed, you can run <code>node helloworld.js</code>.</p> <p><img src="/assets/docs/languages/typescript/run-hello-world.png" alt="run hello world" loading="lazy"></p> <p>If you open <code>helloworld.js</code>, you'll see that it doesn't look very different from <code>helloworld.ts</code>. The type information has been removed and <code>let</code> is now <code>var</code>.</p> <pre class="shiki" style="background-color: #1e1e1e"><code><span class="line"><span style="color: #569CD6">var</span><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">message</span><span style="color: #BBBBBB"> </span><span style="color: #D4D4D4">=</span><span style="color: #BBBBBB"> </span><span style="color: #CE9178">'Hello World'</span><span style="color: #BBBBBB">;</span></span> <span class="line"><span style="color: #9CDCFE">console</span><span style="color: #BBBBBB">.</span><span style="color: #DCDCAA">log</span><span style="color: #BBBBBB">(</span><span style="color: #9CDCFE">message</span><span style="color: #BBBBBB">);</span></span> <span class="line"></span></code></pre> <h2 id="_intellisense" data-needslink="_intellisense">IntelliSense</h2> <p>IntelliSense shows you intelligent code completion, hover information, and signature help so that you can write code more quickly and correctly.</p> <p><img src="/assets/docs/languages/typescript/ts-intellisense.png" alt="TypeScript small completions for String type" loading="lazy"></p> <p>VS Code provides IntelliSense for individual TypeScript files as well as TypeScript <code>tsconfig.json</code> projects.</p> <h3 id="_hover-information" data-needslink="_hover-information">Hover information</h3> <p>Hover over a TypeScript symbol to quickly see its type information and relevant documentation:</p> <p><img src="/assets/docs/languages/typescript/hover.png" alt="Hover for a lodash function" loading="lazy"></p> <p>You can also show the hover information at the current cursor position with the <span class="dynamic-keybinding" data-commandId="editor.action.showHover" data-osx="⌘K ⌘I" data-win="Ctrl+K Ctrl+I" data-linux="Ctrl+K Ctrl+I"><span class="keybinding">⌘K ⌘I</span> (Windows, Linux <span class="keybinding">Ctrl+K Ctrl+I</span>)</span> keyboard shortcut.</p> <h3 id="_signature-help" data-needslink="_signature-help">Signature help</h3> <p>As you write a TypeScript function call, VS Code shows information about the function signature and highlights the parameter that you are currently completing:</p> <p><img src="/assets/docs/languages/typescript/signature-help.png" alt="Signature help for the lodash capitalize function" loading="lazy"></p> <p>Signature help is shown automatically when you type a <code>(</code> or <code>,</code> within a function call. Use <span class="dynamic-keybinding" data-commandId="editor.action.triggerParameterHints" data-osx="⇧⌘Space" data-win="Ctrl+Shift+Space" data-linux="Ctrl+Shift+Space"><span class="keybinding">⇧⌘Space</span> (Windows, Linux <span class="keybinding">Ctrl+Shift+Space</span>)</span> to manually trigger signature help.</p> <h2 id="_snippets" data-needslink="_snippets">Snippets</h2> <p>In addition to smart code completions, VS Code also includes basic TypeScript <a href="/docs/editor/userdefinedsnippets">snippets</a> that are suggested as you type.</p> <p><img src="/assets/docs/languages/typescript/ts-snippets.png" alt="TypeScript 'for' snippet suggestions" loading="lazy"></p> <p>You can install extensions to get additional snippets or define your own snippets for TypeScript. See <a href="/docs/editor/userdefinedsnippets">User Defined Snippets</a> for more information.</p> <blockquote><p><strong>Tip</strong>: You can disable snippets by setting <span class="setting"><a href="vscode://settings/editor.snippetSuggestions" codesetting="true"><span class="codicon codicon-settings-gear dynamic-setting-icon" title="Open 'editor.snippetSuggestions' in Settings Editor"></span></a>editor.snippetSuggestions</span> to <code>"none"</code> in your <a href="/docs/getstarted/settings">settings</a> file. If you'd like to see snippets, you can specify the order relative to suggestions; at the top (<code>"top"</code>), at the bottom (<code>"bottom"</code>), or inlined ordered alphabetically (<code>"inline"</code>). The default is <code>"inline"</code>.</p> </blockquote><h2 id="_errors-and-warnings" data-needslink="_errors-and-warnings">Errors and warnings</h2> <p>The TypeScript language service will analyze your program for coding problems and report errors and warnings:</p> <ul> <li>In the Status bar, there is a summary of all errors and warnings counts.</li> <li>You can click on the summary or press <span class="dynamic-keybinding" data-commandId="workbench.actions.view.problems" data-osx="⇧⌘M" data-win="Ctrl+Shift+M" data-linux="Ctrl+Shift+M"><span class="keybinding">⇧⌘M</span> (Windows, Linux <span class="keybinding">Ctrl+Shift+M</span>)</span> to display the <strong>PROBLEMS</strong> panel with a list of all current errors.</li> <li>If you open a file that has errors or warnings, they will be rendered inline with the text and in the overview ruler.</li> </ul> <p><img src="/assets/docs/languages/typescript/ts-error.png" alt="Error in the editor and Problems panel" loading="lazy"></p> <p>To loop through errors or warnings in the current file, you can press <span class="dynamic-keybinding" data-commandId="editor.action.marker.nextInFiles" data-osx="F8" data-win="F8" data-linux="F8"><span class="keybinding">F8</span></span> or <span class="dynamic-keybinding" data-commandId="editor.action.marker.prevInFiles" data-osx="⇧F8" data-win="Shift+F8" data-linux="Shift+F8"><span class="keybinding">⇧F8</span> (Windows, Linux <span class="keybinding">Shift+F8</span>)</span> which will show an inline zone detailing the problem and possible Code Actions (if available):</p> <p><img src="/assets/docs/languages/typescript/ts-error-inline.png" alt="Error inline in the editor" loading="lazy"></p> <h2 id="_code-navigation" data-needslink="_code-navigation">Code navigation</h2> <p>Code navigation lets you quickly navigate TypeScript projects.</p> <ul> <li><strong>Go to Definition</strong> <span class="dynamic-keybinding" data-commandId="editor.action.revealDefinition" data-osx="F12" data-win="F12" data-linux="F12"><span class="keybinding">F12</span></span> - Go to the source code of a symbol definition.</li> <li><strong>Peek Definition</strong> <span class="dynamic-keybinding" data-commandId="editor.action.peekDefinition" data-osx="⌥F12" data-win="Alt+F12" data-linux="Ctrl+Shift+F10"><span class="keybinding">⌥F12</span> (Windows <span class="keybinding">Alt+F12</span>, Linux <span class="keybinding">Ctrl+Shift+F10</span>)</span> - Bring up a Peek window that shows the definition of a symbol.</li> <li><strong>Go to References</strong> <span class="dynamic-keybinding" data-commandId="editor.action.goToReferences" data-osx="⇧F12" data-win="Shift+F12" data-linux="Shift+F12"><span class="keybinding">⇧F12</span> (Windows, Linux <span class="keybinding">Shift+F12</span>)</span> - Show all references to a symbol.</li> <li><strong>Go to Type Definition</strong> - Go to the type that defines a symbol. For an instance of a class, this will reveal the class itself instead of where the instance is defined.</li> <li><strong>Go to Implementation</strong> <span class="dynamic-keybinding" data-commandId="editor.action.goToImplementation" data-osx="⌘F12" data-win="Ctrl+F12" data-linux="Ctrl+F12"><span class="keybinding">⌘F12</span> (Windows, Linux <span class="keybinding">Ctrl+F12</span>)</span> - Go to the implementations of an interface or abstract method.</li> </ul> <p>You can navigate via symbol search using the <strong>Go to Symbol</strong> commands from the <strong>Command Palette</strong> (<span class="dynamic-keybinding" data-commandId="workbench.action.showCommands" data-osx="⇧⌘P" data-win="Ctrl+Shift+P" data-linux="Ctrl+Shift+P"><span class="keybinding">⇧⌘P</span> (Windows, Linux <span class="keybinding">Ctrl+Shift+P</span>)</span>).</p> <ul> <li><strong>Go to Symbol in File</strong> <span class="dynamic-keybinding" data-commandId="workbench.action.gotoSymbol" data-osx="⇧⌘O" data-win="Ctrl+Shift+O" data-linux="Ctrl+Shift+O"><span class="keybinding">⇧⌘O</span> (Windows, Linux <span class="keybinding">Ctrl+Shift+O</span>)</span></li> <li><strong>Go to Symbol in Workspace</strong> <span class="dynamic-keybinding" data-commandId="workbench.action.showAllSymbols" data-osx="⌘T" data-win="Ctrl+T" data-linux="Ctrl+T"><span class="keybinding">⌘T</span> (Windows, Linux <span class="keybinding">Ctrl+T</span>)</span></li> </ul> <h2 id="_formatting" data-needslink="_formatting">Formatting</h2> <p>VS Code includes a TypeScript formatter that provides basic code formatting with reasonable defaults.</p> <p>Use the <code>typescript.format.*</code> <a href="/docs/getstarted/settings">settings</a> to configure the built-in formatter, such as making braces appear on their own line. Or, if the built-in formatter is getting in the way, set <code>"typescript.format.enable"</code> to <code>false</code> to disable it.</p> <p>For more specialized code formatting styles, try installing one of the formatting extensions from the VS Code Marketplace.</p> <h2 id="_refactoring" data-needslink="_refactoring">Refactoring</h2> <p>VS Code includes some handy refactorings for TypeScript such as <strong>Extract function</strong> and <strong>Extract constant</strong>. Just select the source code you'd like to extract and then click on the light bulb in the gutter or press (<span class="dynamic-keybinding" data-commandId="editor.action.quickFix" data-osx="⌘." data-win="Ctrl+." data-linux="Ctrl+."><span class="keybinding">⌘.</span> (Windows, Linux <span class="keybinding">Ctrl+.</span>)</span>) to see available refactorings.</p> <p><img src="/assets/docs/languages/typescript/refactorings.png" alt="TypeScript refactoring" loading="lazy"></p> <p>See <a href="/docs/typescript/typescript-refactoring">Refactoring TypeScript</a> for more information about refactorings and how you can configure keyboard shortcuts for individual refactorings.</p> <h3 id="_rename" data-needslink="_rename">Rename</h3> <p>One of the simplest refactorings is to rename a method or variable. Press <span class="dynamic-keybinding" data-commandId="editor.action.rename" data-osx="F2" data-win="F2" data-linux="F2"><span class="keybinding">F2</span></span> to rename the symbol under the cursor across your TypeScript project:</p> <p><img src="/assets/docs/languages/typescript/rename.png" alt="Renaming a method" loading="lazy"></p> <h2 id="_debugging" data-needslink="_debugging">Debugging</h2> <p>VS Code comes with great debugging support for TypeScript, including support for sourcemaps. Set breakpoints, inspect objects, navigate the call stack, and execute code in the Debug Console. See <a href="/docs/typescript/typescript-debugging">Debugging TypeScript</a> and the overall <a href="/docs/editor/debugging">Debugging topic</a> to learn more.</p> <h3 id="_debug-client-side" data-needslink="_debug-client-side">Debug client side</h3> <p>You can debug your client-side code using a browser debugger such as the <a href="/docs/nodejs/browser-debugging">built-in Edge and Chrome debugger</a>, or the <a href="https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-firefox-debug" class="external-link" target="_blank">Debugger for Firefox</a>.</p> <h3 id="_debug-server-side" data-needslink="_debug-server-side">Debug server side</h3> <p>Debug Node.js in VS Code using the built-in debugger. Setup is easy and there is a <a href="/docs/nodejs/nodejs-tutorial#_debug-your-express-app">Node.js debugging tutorial</a> to help you.</p> <p><img src="/assets/docs/languages/javascript/debug_data_inspection.gif" alt="debug data inspection" loading="lazy"></p> <h2 id="_linters" data-needslink="_linters">Linters</h2> <p><a href="https://en.wikipedia.org/wiki/Lint_%28software%29" class="external-link" target="_blank">Linters</a> provides warnings for suspicious looking code. While VS Code does not include a built-in TypeScript linter, TypeScript linter <a href="/docs/editor/extension-marketplace">extensions</a> available in the Marketplace.</p> <p><a href="https://eslint.org" class="external-link" target="_blank">ESLint</a> is a popular linter, which also supports TypeScript. The <a href="https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint" class="external-link" target="_blank">ESLint extension</a> integrates ESLint into VS Code so you can see linting errors right in the editor and even quickly fix many of them with <a href="/docs/typescript/typescript-refactoring#_quick-fixes">Quick Fixes</a>. The <a href="https://github.com/typescript-eslint/typescript-eslint/tree/main/packages/eslint-plugin#readme" class="external-link" target="_blank">ESLint plugin guide</a> details how to configure ESLint for your TypeScript projects.</p> <h2 id="_typescript-extensions" data-needslink="_typescript-extensions">TypeScript extensions</h2> <p>VS Code provides many features for TypeScript out of the box. In addition to what comes built-in, you can install an extension for greater functionality.</p> <div class="marketplace-extensions-typescript-curated"></div> <blockquote><p>Tip: Click on an extension tile above to read the description and reviews to decide which extension is best for you. See more in the <a href="https://marketplace.visualstudio.com" class="external-link" target="_blank">Marketplace</a>.</p> </blockquote><h2 id="_next-steps" data-needslink="_next-steps">Next steps</h2> <p>To learn more, see:</p> <ul> <li><a href="/docs/typescript/typescript-tutorial">TypeScript tutorial</a> - Create a simple Hello World TypeScript in VS Code.</li> <li><a href="/docs/typescript/typescript-editing">Editing TypeScript</a> - Specific editing features for TypeScript.</li> <li><a href="/docs/typescript/typescript-refactoring">Refactoring TypeScript</a> - Useful refactorings from the TypeScript language service.</li> <li><a href="/docs/typescript/typescript-compiling">Compiling TypeScript</a> - Compile TypeScript to a JavaScript target version.</li> <li><a href="/docs/typescript/typescript-debugging">Debugging TypeScript</a> - Learn about debugging TypeScript both server and client-side with VS Code.</li> </ul> <h2 id="_common-questions" data-needslink="_common-questions">Common questions</h2> <h3 id="_can-i-use-the-version-of-typescript-that-ships-with-vs-2022" data-needslink="_can-i-use-the-version-of-typescript-that-ships-with-vs-2022">Can I use the version of TypeScript that ships with VS 2022?</h3> <p>No, the TypeScript language service that ships with Visual Studio 2019 and 2022 isn't compatible with VS Code. You will need to install a separate version of TypeScript from <a href="https://www.npmjs.com/package/typescript" class="external-link" target="_blank">npm</a>.</p> <h3 id="_how-can-i-use-the-latest-typescript-beta-with-vs-code" data-needslink="_how-can-i-use-the-latest-typescript-beta-with-vs-code">How can I use the latest TypeScript beta with VS Code?</h3> <p>The simplest way to try out the latest TypeScript features in VS Code is to install the <a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-next" class="external-link" target="_blank">JavaScript and TypeScript Nightly extension</a>.</p> <p>You can also <a href="/docs/typescript/typescript-compiling#_using-newer-typescript-versions">configure VS Code to use a specific TypeScript version</a>.</p> <div class="feedback"></div> <div class="body-footer">10/29/2024</div> </main>  <div class="col-sm-3 col-md-2 hidden-xs docs-subnavbar-container"> <nav id="docs-subnavbar" aria-label="On Page" data-spy="affix" data-offset-top="20"> <h4><span class="sr-only">In this article there are 13 sections</span><span aria-hidden="true">In this article</span></h4> <ul class="nav"> <li><a href="#_installing-the-typescript-compiler">Installing the TypeScript compiler</a></li> <li><a href="#_hello-world">Hello World</a></li> <li><a href="#_intellisense">IntelliSense</a></li> <li><a href="#_snippets">Snippets</a></li> <li><a href="#_errors-and-warnings">Errors and warnings</a></li> <li><a href="#_code-navigation">Code navigation</a></li> <li><a href="#_formatting">Formatting</a></li> <li><a href="#_refactoring">Refactoring</a></li> <li><a href="#_debugging">Debugging</a></li> <li><a href="#_linters">Linters</a></li> <li><a href="#_typescript-extensions">TypeScript extensions</a></li> <li><a href="#_next-steps">Next steps</a></li> <li><a href="#_common-questions">Common questions</a></li> </ul> <div class="connect-widget"></div> </nav> </div>  <div class="col-xs-12 visible-xs"> <div class="connect-widget"></div> </div> </div> </div> </div> </div> <footer role="contentinfo" class="container"> <div class="footer-container"> <div class="footer-row"> <div class="footer-social"> <ul class="links"> <li> <a href="https://go.microsoft.com/fwlink/?LinkID=533687"><img src="/assets/icons/x-icon.svg" class="x-icon" alt="Follow us on X"></a> </li> <li> <a href="https://github.com/microsoft/vscode"><img src="/assets/icons/github-icon.svg" alt="VS Code on Github"></a> </li> <li> <a href="https://www.youtube.com/@code"><img src="/assets/icons/youtube-icon.svg" alt="VS Code on YouTube"></a> </li> <script> function manageConsent() { if (siteConsent && siteConsent.isConsentRequired) { siteConsent.manageConsent(); } } </script> </ul> <a id="footer-microsoft-link" class="microsoft-logo" href="https://www.microsoft.com"> <img src="/assets/icons/microsoft.svg" alt="Microsoft homepage" /> </a> </div> </div> <div class="footer-row"> <ul class="links"> <li><a id="footer-support-link" href="https://support.serviceshub.microsoft.com/supportforbusiness/create?sapId=d66407ed-3967-b000-4cfb-2c318cad363d" target="_blank" rel="noopener">Support</a></li> <li><a id="footer-privacy-link" href="https://go.microsoft.com/fwlink/?LinkId=521839" target="_blank" rel="noopener">Privacy</a></li> <li style="display: none;"><a id="footer-cookie-link" style="cursor: pointer;" onclick="manageConsent()" target="_blank" rel="noopener">Manage Cookies</a></li> <li><a id="footer-terms-link" href="https://www.microsoft.com/legal/terms-of-use" target="_blank" rel="noopener">Terms of Use</a></li> <li><a id="footer-license-link" href="/License" target="_blank" rel="noopener">License</a></li> </ul> </div> </div> </footer> <script src="/dist/index.js"></script> <script type="application/ld+json"> { "@context" : "http://schema.org", "@type" : "SoftwareApplication", "name" : "Visual Studio Code", "softwareVersion": "1.95", "offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" }, "applicationCategory": "DeveloperApplication", "applicationSubCategory": "Text Editor", "alternateName": "VS Code", "datePublished": "2021-11-03", "operatingSystem": "Mac, Linux, Windows", "logo": "https://code.visualstudio.com/assets/apple-touch-icon.png", "screenshot": "https://code.visualstudio.com/assets/home/home-screenshot-win.png", "releaseNotes": "https://code.visualstudio.com/updates", "downloadUrl": "https://code.visualstudio.com/download", "license": "https://code.visualstudio.com/license", "softwareRequirements": "https://code.visualstudio.com/docs/supporting/requirements", "url" : "https://code.visualstudio.com", "author": { "@type": "Organization", "name": "Microsoft" }, "publisher": { "@type": "Organization", "name": "Microsoft" }, "maintainer": { "@type": "Organization", "name": "Microsoft" }, "potentialAction": { "@type": "SearchAction", "target": "https://code.visualstudio.com/Search?q={search_term_string}", "query-input": "required name=search_term_string" }, "sameAs" : [ "https://en.wikipedia.org/wiki/Visual_Studio_Code", "https://twitter.com/code", "https://www.youtube.com/code", "https://www.tiktok.com/@vscode", "https://github.com/microsoft/vscode" ] } </script> </body> </html>

CINXE.COM

TypeScript Programming with Visual Studio Code