Understanding the Difference between JavaScript and TypeScript - Simple & Code Examples
In the world of web development, JavaScript is one of the most widely used programming languages. However, with the increasing complexity of web applications, there was a need for a language that could provide additional features and improved functionality over JavaScript. This led to the creation of TypeScript, which is a statically typed, object-oriented programming language that builds on top of JavaScript.
What is JavaScript?
JavaScript is a high-level, dynamically typed, interpreted programming language that was created in 1995. It is primarily used for creating interactive websites and web applications, but it has also found use in other areas such as server-side programming and desktop applications. JavaScript is an object-oriented language, meaning that it is built on the concept of objects, which contain properties and methods. JavaScript is also loosely typed, meaning that the type of data a variable holds can change during runtime.
Example of JavaScript code:
let name = "Esther White";
name = 123;
console.log(name); // Output: 123
What is TypeScript?
TypeScript is an open-source programming language developed and maintained by Microsoft. It was first released in 2012 and is a statically typed, object-oriented language that builds on top of JavaScript. TypeScript is a superset of JavaScript, meaning that any valid JavaScript code is also valid TypeScript code. However, TypeScript adds several features and capabilities that are not available in JavaScript, such as static typing, interfaces, and classes.
TypeScript to JavaScript
One of the key differences between TypeScript and JavaScript is the use of static typing. In JavaScript, variables are dynamically typed, meaning that the type of data a variable holds can change during runtime. This can lead to unexpected behavior and bugs in your code. In TypeScript, variables are statically typed, meaning that the type of data a variable holds must be explicitly declared and cannot change during runtime. This provides improved reliability and maintainability of your code.
Example of TypeScript code:
let name: string = "Esther White";
name = 123;
console.log(name); // Output: Type '123' is not assignable to type 'string'
Interfaces in TypeScript
Another feature of TypeScript is the use of interfaces. Interfaces define a blueprint for objects, specifying the properties and methods that an object must have. This allows you to ensure that objects in your code conform to a certain standard, and also provides improved code reuse.
// Define an interface for a User object
interface User {
firstName: string;
lastName: string;
age: number;
isAdmin: boolean;
getFullName(): string;
}
// Create a function that takes a User object as an argument
function printUserInfo(user: User) {
console.log(`Name: ${user.getFullName()}`);
console.log(`Age: ${user.age}`);
console.log(`Is admin? ${user.isAdmin}`);
}
// Create a User object that conforms to the User interface
const user: User = {
firstName: 'John',
lastName: 'Doe',
age: 30,
isAdmin: false,
getFullName() {
return `${this.firstName} ${this.lastName}`;
}
};
// Call the function with the User object
printUserInfo(user);
In this example, we define an interface User
that specifies the properties and methods that a User object must have. We then create a function printUserInfo
that takes a User
object as an argument and uses the getFullName
method and other properties of the object. Finally, we create a User
object that conforms to the User
interface and pass it to the printUserInfo
function. This ensures that the User
object we pass to the function has all the required properties and methods.
Classes in TypeScript
TypeScript also supports classes, which are a fundamental concept in object-oriented programming. Classes allow you to define the structure of objects, including their properties and methods, in a single place. This can make your code easier to understand and maintain.
// Define a class for a User object
class User {
firstName: string;
lastName: string;
age: number;
isAdmin: boolean;
constructor(firstName: string, lastName: string, age: number, isAdmin: boolean) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
this.isAdmin = isAdmin;
}
getFullName(): string {
return `${this.firstName} ${this.lastName}`;
}
}
// Create a User object using the User class
const user = new User('John', 'Doe', 30, false);
// Access properties and methods of the User object
console.log(`Name: ${user.getFullName()}`);
console.log(`Age: ${user.age}`);
console.log(`Is admin? ${user.isAdmin}`);
In this example, we define a class User
that specifies the properties and methods that a User object should have. We then create a constructor function that initializes the properties of the object. We also define a getFullName
method that returns the full name of the user.
We then create a User
object using the new
keyword and passing in the required arguments to the constructor function. Finally, we access the properties and methods of the User
object using the dot notation.
Classes in TypeScript provide a powerful tool for organizing and structuring your code, and can help you build more complex and maintainable applications.
Why TypeScript is not a Backend Language
I had to include a paragraph because recently I had a job interview where - one of the interviewers introduced herself as a backend developer, who had recently graduated with her bachelor's degree. During the interview, I expressed my interest in her work as a backend developer and I asked her - what language she uses for the backend programming that she does. It was previously mentioned that I work with TypeScript. So to answer my question the girl said that she uses TypeScript for backend programming...
I wanted to tell her that TypeScript is not a backend language because it is not a language on its own. Rather, it is a superset of JavaScript that provides additional features and improved functionality. TypeScript is primarily used for front-end web development, where it can be used to create complex, interactive web applications. But I didn't mention any of that because my goal was never to embarrass her or to make her feel bad. My inquiries were motivated purely by my authentic curiosity and interest.
I was informed that I was not selected for the position due to my lack of a bachelor's degree. This was emphasized after the interview when the recruiter asked me only one question and it was - if I had completed my bachelor's degree, and upon my response of no, I received an email stating that they had no further opportunities for me. The girl with the bachelor's degree that does her backend programming in 'TypeScript' continues to be successfully employed at the company...