TypeScript Tutorial

TypeScript Introduction

TypeScript is JavaScript with a type checker. You write source, tsc checks it, then it runs as JavaScript.

What is TypeScript?

TypeScript is a typed language that compiles to JavaScript. You write .ts files. A compiler namedtsc checks that names, types, and calls line up. Then it emits JavaScript that a browser or Node can run. The extra types are for the compiler and for you. They do not stay in the running program.

That check step is the main difference from plain JavaScript, and it is the same idea as C++ on StudyGrid: you write source, a compiler looks at types, then something runs. C++ uses g++. TypeScript uses tsc. Python on this site skips a compile step and executes the file as written.

A first program

This is a complete TypeScript program. Copy it into the TypeScript editor and change the message.

Example

const name: string = "TypeScript";
console.log("Hello,", name);

Click Try it in TypeScript under the example. That opens /typescript/try, a type-check-and-run editor.

A second example: numbers

console.log can print integers and results of expressions. This program adds two values and prints the sum. Change a or b and compile again.

Example

const a: number = 7;
const b: number = 5;
console.log(a + " + " + b + " = " + (a + b));

What each line does

  • const name: string declares a name that will not be reassigned, typed as text.
  • : number tells the compiler the value is a number, not a string or a boolean.
  • console.log(...) writes text to the console — TypeScript’s equivalent of C++ cout.
  • There is no main. The file runs from the top, like a script.

Compiled, then run

  1. You save a .ts file.
  2. tsc checks types and emits JavaScript.
  3. That JavaScript runs. It prints output or reads input.

On StudyGrid the TypeScript editor does steps 2 and 3 for you. Locally you would typenpx tsc --strict main.ts and then run the emitted .js file with Node.

TypeScript vs C++ vs Python on StudyGrid

PythonC++TypeScript
Dashboard/tutorial/cpp/typescript
Editor/try — prints and plots/cpp/try — g++/typescript/try — tsc
ResultOutput text and chartsStdout and compiler messagesStdout and type errors
File.py.cpp.ts

What you will cover

  • Syntax, output, variables, and types
  • Conditions, loops, arrays, objects, and unions
  • Functions, overloading, and recursion
  • Classes, inheritance, and polymorphism
  • Modules, exceptions, array methods, and strict null
  • Examples, generics, utility types, Map, Set, algorithms, and arrow functions

Next: how to compile a file locally, then the rules of TypeScript syntax.

FAQ: TypeScript Introduction

Common questions about this page.

What is the StudyGrid TypeScript tutorial?

The StudyGrid TypeScript tutorial follows the same chapter rhythm as C++: syntax, types, input, loops, functions, classes, generics, maps, and lambdas. Each chapter has copy-and-run examples.

Should I run typescript introduction examples locally for better learning?

Yes. Use the browser editor on StudyGrid for a quick check, then Download the example and run it on your computer. Local runs show real errors and the real toolchain, which is one of the fastest ways to learn typescript introduction in this TypeScript TypeScript lesson (TypeScript Introduction).

Is the TypeScript editor the same as Try Python or Try C++?

No. Try TypeScript type-checks with tsc at /typescript/try and shows stdout plus compiler messages. Try Python stays at /try. Try C++ stays at /cpp/try. TypeScript lessons never open those editors.

Do I need to install a compiler to learn TypeScript?

No. Open a chapter, click Try it in TypeScript, and compile in the browser. You can also download a .ts file and compile locally with tsc.

Where should I start the TypeScript tutorial?

Start at TypeScript Intro, then Get Started and Syntax. After the first program, continue to output, variables, and if-else. After classes, open TypeScript Examples, then generics, Map, and arrow functions. Use Next at the bottom of each chapter.

Is the TypeScript tutorial free?

Yes. The TypeScript workshop on StudyGrid (studygrid.in) is free: dashboard, chapters, and the compile-and-run editor.