TypeScript is Javascript with syntax for types as an additional layer on top. You need to convert TypeScript code to JavaScript, which then runs anywhere JavaScript runs.
// JAVASCRIPT let helloWorld = "Hello World"; // TYPESCRIPT let helloWorld: string = "Hello World";
TypeScript becomes JavaScript via the delete key. Look at this TypeScript:
type Result = "pass" | "fail" function verify(result: Result) { if (result === "pass") { console.log("Passed") } else { console.log("Failed") } }
Types are removed, now you have JavaScript:
function verify(result) { if (result === "pass") { console.log("Passed") } else { console.log("Failed") } }
You can adopt TypeScript gradually.
Add // @ts-check at the top of your JS file to make your Editor (like VSCode) show better errors!
But how do you actually use TypeScript? Well…


Add it to your local project as a dev dependency:
$ npm install typescript --save-dev
You can then run the typescript compiler using $ npx tsc
You can set it up to compile your entire project at once by adding a tsconfig.json file: see here
Or you can install a transpiler like Babel and its @babel/plugin-transform-typescript


Make a new node project ($ npm init), add typescript ($ npm i typescript —save-dev), create index.ts ($ touch index.ts):
function addNumbers(a: number, b: number): number { return a + b; } var sum: number = addNumbers(10, 15); console.log(sum);
Now you can run $ npx tsc index.ts and will get an index.js out of it that looks like this:
function addNumbers(a, b) { return a + b; } var sum = addNumbers(10, 15); console.log(sum);
Run $ node index and you’ll get 25 - nice!
But now we’re running the transpiled JavaScript file where all the static typing is gone again, so why did we ever bother with it? - Well, TypeScript’s static typing makes it less likely for us to write shitty code and easier for us to catch errors. TypeScript helps us during development. Once the TypeScript-layer is removed we end up with JavaScript code that still does what it does.
It’s easy to go wrong in plain JavaScript: If we were to call our addNumbers function like this, it would throw an error in TypeScript (it would already show up in the IDE and throw an error when transpiling):
var sum:number = addNumbers(10, 'abc'); // ERROR
But just doing this in JavaScript would work fine with no complaints, except the result would not actually be what we want at all:
var sum = addNumbers(10, 'abc'); // Result: 10abc


let isAwesome: boolean = true; let name: string = 'Markus'; let decimalNumber: number = 42; let binaryNumber: number = 0b101010; // => 42 let octalNumber: number = 0o52; // => 42 let hexadecimalNumber: number = 0x2a; // => 42 let people: string[] = ['Sissy', 'Franz', 'Ferdinand']; // ARRAY let people: Array<string> = ['Sissy', 'Franz', 'Ferdinand']; // Also ARRAY let myTuple: [string, number, boolean]; // TUPLE myTuple = ['chair', 20, true]; enum ThemeColors { Primary = 'primary', Secondary = 'secondary', Dark = 'dark' } let whoKnows: any = 4; // ANY - just STFU TypeScript, back to wild west JS! whoKnows = 'Yeah!'; const darkestPlaceOnEarth = (): void => { // no type associated - mostly used for return value of a function that doesn't return anything console.log('Marianas Trench'); }; let anUndefinedVariable: undefined = undefined; let aNullVariable: null = null;
More in depth stuff here

Leave a comment