I. What is a Typescript ?
TypeScript là một dự án mã nguồn mở được phát triển bởi Microsoft, nó có thể được coi là một phiên bản nâng cao của Javascript bởi việc bổ sung tùy chọn kiểu tĩnh và lớp hướng đối tượng mà điều này không có ở Javascript. TypeScript có thể sử dụng để phát triển các ứng dụng chạy ở client-side (Angular2) và server-side (NodeJS).
TypeScript sử dụng tất cả các tính năng của của ECMAScript 2015 (ES6) như classes, modules. Không dừng lại ở đó nếu như ECMAScript 2017 ra đời thì mình tin chắc rằng TypeScript cũng sẽ nâng cấp phiên bản của mình lên để sử dụng mọi kỹ thuật mới nhất từ ECMAScript. Thực ra TypeScript không phải ra đời đầu tiên mà trước đây cũng có một số thư viện như CoffeScript và Dart được phát triển bởi Google, tuy nhiên điểm yếu là hai thư viện này sư dụng cú pháp mới hoàn toàn, điều này khác hoàn toàn với TypeScript, vì vậy tuy ra đời sau nhưng TypeScript vẫn đang nhận được sự đón nhận từ các lập trình viên.
export const hello = (name: string) => {
console.log(`Hello ${name}`);
};
hello("John"); // Hello JohnII. Why TypeScript ?
- Dễ phát triển dự án lớn: Với việc sử dụng các kỹ thuật mới nhất và lập trình hướng đối tượng nên TypeScript giúp chúng ta phát triển các dự án lớn một cách dễ dàng.
- Nhiều Framework lựa chọn: Hiện nay các Javascript Framework đã dần khuyến khích nên sử dụng TypeScript để phát triển, ví dụ như Angular2, VueJS, ReactJS, Solidjs, NodeJS.
- Hô trợ các tính năng của Javascript phiên bản mới nhất: TypeScript luôn đảm bảo việc sử dụng đầy đủ các kỹ thuật mới nhất của Javascript, ví dụ như ECMAScript 2015 (ES6) và hiện tại là ECMAScript 2023 (ES12).
- Là mã nguồn mở: TypeScript là một mã nguồn mở nên bạn hoàn toàn có thể sử dụng mà không mất phí, bên cạnh đó còn được cộng đồng hỗ trợ.
- TypeScript là Javscript: Bản chất của TypeScript là biên dịch tạo ra các đoạn mã javascript nên ban có thê chạy bất kì ở đâu miễn ở đó có hỗ trợ biên dịch Javascript. Ngoài ra bạn có thể sử dụng trộn lẫn cú pháp của Javascript vào bên trong TypeScript, điều này giúp các lập trình viên tiếp cận TypeScript dễ dàng hơn.
III. TypeScript vs Javascript
- TypeScript là một ngôn ngữ lập trình, còn Javascript là một ngôn ngữ kịch bản.
- TypeScript là một ngôn ngữ tĩnh, còn Javascript là một ngôn ngữ động.
- TypeScript được biên dịch, còn Javascript được thông dịch.
- TypeScript hỗ trợ lập trình hướng đối tượng, còn Javascript không hỗ trợ.
Dưới đây là một ví dụ về việc sử dụng TypeScript và Javascript để khởi tạo một class Person.
// Javascript code
export class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
console.log(`Hello ${this.name}`);
}
}
const person = new Person('John', 20); // John 20
person.sayHello(); // Hello John
// Typescript code
export class Person {
constructor(public name: string, public age: number) {}
sayHello() {
console.log(`Hello ${this.name}`);
}
}
const person = new Person('John', 20); // John 20
person.sayHello(); // Hello JohnQua ví dụ trên chúng ta có thể thấy được sự khác biệt giữa TypeScript và Javascript, với TypeScript chúng ta có thể sử dụng các tính năng của lập trình hướng đối tượng như public, private, protected, abstract, interface, … còn với Javascript thì không thể. Ngoài ra chúng ta cũng có thể thấy được cú pháp của TypeScript khá giống với Javascript, điều này giúp chúng ta dễ dàng tiếp cận hơn với TypeScript. và Typescript giúp chúng ta viết code một cách dễ dàng hơn, đơn giản hơn và an toàn hơn.
Typescript can but Javascript can’t
Dưới đây là một số tính năng của TypeScript mà Javascript không thể làm được.
// Data types, Modifiers, and Module
export class Person {
constructor(public name: string, public age: number) {}
sayHello() {
console.log(`Hello ${this.name}`);
}
}
// Interface
interface Person {
name: string;
age: number;
}
// Enum
enum Color {
Red,
Green,
Blue,
}
// Generics
function identity<T>(arg: T): T {
return arg;
}
// Type assertion
let someValue: any = 'this is a string';
// Type alias
type Name = string;
// Decorators
function sealed(constructor: Function) {
Object.seal(constructor);
Object.seal(constructor.prototype);
}
// Mixins
function applyMixins(derivedCtor: any, baseCtors: any[]) {
baseCtors.forEach((baseCtor) => {
Object.getOwnPropertyNames(baseCtor.prototype).forEach((name) => {
Object.defineProperty(
derivedCtor.prototype,
name,
Object.getOwnPropertyDescriptor(baseCtor.prototype, name) ||
Object.create(null)
);
});
});
}
// and more...Qua ví dụ trên chúng ta có thể thấy được TypeScript có rất nhiều tính năng mà Javascript không thể làm được, điều này giúp chúng ta có thể phát triển các dự án lớn một cách dễ dàng hơn.
IV. Typescript Compiler
TypeScript Compiler là một công cụ giúp chúng ta biên dịch các đoạn mã TypeScript thành các đoạn mã Javascript. Có 2 cách để biên dịch TypeScript.
- Biên dịch bằng tay: Chúng ta có thể sử dụng lệnh
tscđể biên dịch TypeScript.
tsc index.ts
# Biên dịch nhiều file
tsc index.ts app.ts
# Biên dịch tất cả các file trong thư mục
tsc *.ts- Biên dịch tự động: Chúng ta có thể sử dụng
tsconfig.jsonđể cấu hình cho TypeScript Compiler biên dịch tự động.
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"outDir": "./dist",
"rootDir": "./src",
"strict": true,
"esModuleInterop": true
},
"include": ["src/**/*"],
"exclude": ["node_modules"]
}V. Summary
Qua bài viết này chúng ta đã tìm hiểu được TypeScript là gì, TypeScript có những ưu điểm và khác biệt gì so với Javascript, cũng như cách sử dụng TypeScript Compiler để biên dịch các đoạn mã TypeScript thành các đoạn mã Javascript. Nếu bạn có bất kỳ thắc mắc nào về bài viết này, hãy để lại comment bên dưới, mình sẽ cố gắng trả lời sớm nhất có thể. Cảm ơn các bạn đã theo dõi bài viết này.