# Install TypeScript locally in your project. Having TypeScript set up on a per-project basis lets you have many projects with many different versions of TypeScript, this keeps each project working consistently. npm install -D typescript npm install -D ts-node # Or globally It can be handy to have TypeScript available across all projects, often to test one-off ideas. Long-term, codebases should prefer a project-wide installation over a global install so that they can benefit from reproducible builds across different machines npm install -g typescript npm install -g ts-node Lets go by the global option: I have installed globally and in always add locally to each project : mkdir firstTypeScript cd firstTypeScript npm install -D typescript Note: The global option make the library available from any directory on your machine, but installing locally on your project make it available to the current project as a dependency, so it´s added in the node_modules folder Now let review a basic sample based on https://www.typescriptlang.org/docs/handbook/typescript-tooling-in-5-minutes.html
function greeter(person) {
return "Hello, " + person;
}
let user = "Jane User";
document.body.textContent = greeter(user);
Save the code as greeter.ts and compile with tsc greeter.ts
Compilation produce file greeter.js, Let add some TS functionalities to see how it is transpiled to JS
Interfaces
In TypeScript, two types are compatible if their internal structure is compatible. This allows to implement an interface without an explicit implements clause
interface Person {
firstName: string;
lastName: string;
}
function greeter(person: Person){
return "Hello, " + person.firstName + " "+ person.lastName;
}
let user: Person = {firstName: "Jane", lastName: "User"};
document.body.textContent = greeter(user);
Classes
var Student = /** @class */ (function () {
function Student(firstName, midleInitial, lastName) {
this.firstName = firstName;
this.midleInitial = midleInitial;
this.lastName = lastName;
this.fullName = firstName + " " + midleInitial + " " + lastName;
}
return Student;
}());
function greeter(person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
var user = { firstName: "Jane", lastName: "User" };
document.body.textContent = greeter(user);
TypeScript constructor parameters with public, private, and protected
public class Car
{
constructor(public brand: string, private serial: number, protected used: boolean) {}
}
Is equivalent to this
public class Foo
{
public brand: string;
private serial: number;
protected used: boolean;
constructor(brand: string, serial: number, used: boolean) {
this.brand= brand;
this.serial= serial;
this.used= used;
}
}
Running your TypeScript web app
<!DOCTYPE html>
<html>
<head>
<title>TypeScript Greeter</title>
</head>
<body>
<script src="greeter.js"></script>
</body>
</html>
Save as greeter.html and open with your browser
LearningNotebook by Leonardo 