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: stringdeclares a name that will not be reassigned, typed as text.: numbertells 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
- You save a
.tsfile. - tsc checks types and emits JavaScript.
- 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
| Python | C++ | TypeScript | |
|---|---|---|---|
| Dashboard | /tutorial | /cpp | /typescript |
| Editor | /try — prints and plots | /cpp/try — g++ | /typescript/try — tsc |
| Result | Output text and charts | Stdout and compiler messages | Stdout 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.