What Is TypeScript

Introduction

TypeScript is a typed programming language that builds on JavaScript. You write .ts files with optional type annotations; the TypeScript compiler (tsc) checks your code and emits plain JavaScript that browsers and Node.js can run. This chapter explains what TypeScript is, how it relates to JavaScript, and why teams adopt it for larger applications.

Prerequisites

  • Basic familiarity with JavaScript concepts (variables, functions, objects) helps but is not required for this overview
  • No TypeScript installation needed yet for this introduction
  • Later chapters assume Node.js LTS and a text editor such as VS Code

TypeScript and JavaScript: Same Runtime, Extra Safety

JavaScript is the language the web runs. TypeScript is not a replacement runtime—it is a superset of JavaScript syntax plus a static type system.

AspectJavaScriptTypeScript
File extension.js (or .mjs).ts (often .tsx with JSX)
Type checkingAt runtime (dynamic)Mostly at compile time (static)
OutputRuns as writtenCompiles to JavaScript first
Browser/NodeRuns directlyRuns the compiled .js output

Valid JavaScript is usually valid TypeScript. TypeScript adds types, interfaces, enums, and other features on top.

Example in JavaScript:

javascript
function greet(name) {
  return "Hello, " + name;
}
 
console.log(greet("Ada"));

The same idea in TypeScript:

typescript
function greet(name: string): string {
  return "Hello, " + name;
}
 
console.log(greet("Ada"));

Code explanation:

  • name: string declares that name must be a string
  • : string after the parameter list declares the return type
  • If you pass a number, the editor and compiler report an error before you run the program

What Static Types Give You

Static types describe the shape of data and contracts between parts of your code.

Main benefits:

  • Catch mistakes early: typos, wrong argument types, and missing properties surface during development
  • Better editor support: autocomplete, jump-to-definition, and safer renames
  • Clearer APIs: function signatures document what callers should pass and expect back
  • Easier refactoring: rename a field or change a return type and see affected call sites quickly

TypeScript does not remove all bugs. It reduces an entire class of errors that JavaScript often discovers only at runtime.

Tip

Types Are Documentation That Compiles

Good types describe intent. When a teammate reads function createUser(input: CreateUserInput): User, they understand the contract without guessing from implementation alone.

How TypeScript Fits the Build Pipeline

A typical workflow:

  1. Write TypeScript source (.ts)
  2. Run tsc (or a bundler with TypeScript support)
  3. Emit JavaScript (.js)
  4. Run or deploy the JavaScript output
text
hello.ts  →  tsc  →  hello.js  →  node hello.js  (or bundle for the browser)

You can also use tools that compile on the fly during development (Vite, ts-node, etc.). The core idea remains: TypeScript checks types; JavaScript executes.

Where TypeScript Is Used

Common real-world scenarios:

ScenarioWhy TypeScript helps
Large frontend apps (React, Vue, Angular)Shared models, component props, and API response types
Node.js APIs and servicesRequest/response typing, config objects, safer refactors
Shared libraries and SDKsPublished .d.ts declaration files for consumers
Full-stack monoreposSame types on client and server for DTOs and enums
Team codebasesConsistent contracts across modules and repositories

Backend developers who already know Java often adopt TypeScript on Node for similar reasons: explicit interfaces and compile-time checks on data structures.

TypeScript Is Not Only for the Browser

Because TypeScript compiles to JavaScript, it runs anywhere JavaScript runs:

  • Browsers (via bundled output)
  • Node.js servers and CLIs
  • Serverless functions
  • Desktop tools (Electron) and some mobile stacks

Environment APIs still differ (document vs fs), just like in plain JavaScript. TypeScript types the language and your project code; you still learn browser or Node APIs separately.

ECMAScript Alignment

TypeScript follows the ECMAScript (JavaScript) standard and adds type features on top. New JavaScript syntax (modules, async/await, optional chaining, and more) is supported as the TypeScript compiler catches up with each ECMAScript edition.

Practical notes:

  • Target in tsconfig.json controls which JavaScript version tsc emits (for example ES2020)
  • Lib settings tell the compiler which built-in types (Promise, Map, DOM APIs) are available
  • TypeScript releases on its own schedule but tracks modern JS closely

You do not need to memorize TypeScript version numbers on day one. Focus on writing standard modern syntax and letting tsc validate it.

TypeScript vs “Just Using JavaScript”

When JavaScript alone is enough:

  • Small scripts and one-off automation
  • Rapid prototypes where types would slow you down
  • Legacy codebases not yet migrated

When TypeScript is worth the investment:

  • Multiple developers on the same codebase
  • Long-lived products with frequent refactors
  • Public libraries where API clarity matters
  • Projects where runtime type errors are costly

Many teams start new features in TypeScript and migrate JavaScript files gradually (allowJs in tsconfig.json supports mixed projects).

Relationship to Other hello_code Tracks

TrackConnection
JavaScriptLanguage foundation—learn JS first if you are new to programming
HTML / CSSStructure and styling for web UIs typed with TS in frontend apps
VuedefineProps, component refs, vue-tsc—applies this track to Vue 3 SFCs
Node.js chapters in JavaScript trackSame runtime for server-side TypeScript

FAQ

Is TypeScript a different language from JavaScript?

It is a superset: all valid JavaScript syntax is valid TypeScript, plus optional type syntax. You still think in JavaScript semantics; TypeScript adds a checking layer.

Do browsers run TypeScript directly?

No. Browsers run JavaScript. You compile TypeScript to JavaScript (or use a dev server that does this for you) before or while serving the app.

Does TypeScript make programs run faster?

Usually not by itself. Types are erased at compile time—they do not exist at runtime. The main wins are fewer bugs and faster development, not automatic performance boosts.

Do I need to know JavaScript before TypeScript?

Yes, in practice. TypeScript assumes JavaScript syntax and behavior. This track teaches TypeScript in depth, but solid JavaScript fundamentals make everything easier.

Is TypeScript only for React or frontend frameworks?

No. It is widely used on the frontend, but Node.js backends, CLIs, and npm libraries use TypeScript heavily as well.

What is a .d.ts file?

A declaration file describes types for JavaScript code (often third-party libraries) without reimplementing the library. You will meet .d.ts files when using @types packages and publishing your own libraries.