TYPESCRIPT LÀ GÌ? LỰA CHỌN GIỮA TYPESCRIPT VÀ JAVASCRIPT

Viết bởi Pum
Apr 05, 2023

TypeScript viết tắt TS là lập trình hướng đối tượng mã nguồn mở được phát triển bởi Microsoft, được xem là phiên bản nâng cao của JavaScript.

7 min reads

Trong bài viết hôm nay, chúng ta sẽ cùng tìm hiểu về TypeScript - một ngôn ngữ lập trình đang được rất nhiều lập trình viên ưa chuộng. Việc học và tìm hiểu về TypeScript sẽ giúp bạn hiểu sâu hơn về JavaScript.

TypeScript là gì?

TypeScript viết tắt TS là lập trình hướng đối tượng (OOP) mã nguồn mở được phát triển bởi Microsoft, được xem là phiên bản nâng cao của JavaScript.

TypeScript sử dụng cú pháp của JavaScript và bổ sung thêm các cú pháp mới để hỗ trợ Type (các kiểu dữ liệu).

TypeScript = JavaScript + Type + Một số tính năng được thêm vào

Vì TypeScript code được chuyển đổi thành JavaScript code nên việc tích hợp vào các dự án JavaScript trở nên dễ dàng hơn, được thiết kế chủ yếu cho các dự án quy mô lớn.

Cần lưu ý: Browser chỉ có thể hiểu HTML/CSS và JavaScript thuần, không hiểu TypeScript. Vì thế, cần có một công cụ trung gian đứng ra dịch code và đó là TypeScript Compiler.

Mỗi một dự án bạn viết bằng TypeScript cần phải có compiler giúp chuyển dịch code ra thành JavaScript để browser có thể hiểu được.

TypeScript + TypeScript Compiler = JavaScript

Để viết TypeScript, file cuối extension là .ts và có thể code js bên trong ts. và có thể rename .js thành .ts để viết code TypeScript.

Ví dụ

<!DOCTYPE html>
<html>

<body>
	<h2>Welcome To GFG</h2>

	<p>
		Default code has been
		loaded into the Editor.
	</p>

	<script src="types.js"></script>
</body>

</html>

let myString: string;

myString = 'Hello from ts'

console.log(myString);

Sau khi lưu các tệp trên, bạn cần dịch TypeScripte code, gõ lệnh sau:

tsc types.js (syntax : tsc filename).

Khi chuyển dịch thành công, một tệp JavaScript với phần mở rộng .js sẽ được tạo. Bây giờ, khi chạy index.html, bạn có thể nhìn thấy đầu ra bên dưới, TypeScript code được dịch thành JavaScript code tiêu chuẩn.

Mã JavaScript được tạo trong tệp type.js:

JavaScript

var myString;
myString = 'Hello from ts';
console.log(myString);

Output

Tại sao cần TypeScript trong khi đã có JavaScript?

Các nhà phát triển đã giới thiệu JavaScrip là ngôn ngữ client-side programming. Nhưng khi các lập trình viên sử dụng thì nhận ra rằng, JavaScript có thể sử dụng làm ngôn ngữ server-side programming.

Tuy nhiên, JavaScript code trở nên phức tạp và nặng nề, thậm chí chúng không thể đáp ứng được yêu cầu của ngôn ngữ lập trình hướng đối tượng. Khiến các doanh nghiệp hạn chế sử dụng JavaScript như một công nghệ server-side.

Đó là lý do, TypeScript ra đời để quyết những vấn đề mà JavaScript đang gặp phải. TypeScript là một phần mở rộng của JavaScript, giúp tăng tính kiểm soát và dễ bảo trì cho mã nguồn JavaScript.

Nên chọn TypeScript và JavaScript khi nào?

Nếu bạn đang triển khai dự án với nhiều nhóm phát triển, nhiều mã nguồn mở thì TypeScript sẽ là lựa chọn tốt hơn. Vì, TypeScript có khả năng kiểm soát kiểu dữ liệu tại thời điểm biên dịch giúp tránh lỗi và dễ bảo trì hơn. Giúp dự án của bạn có thể hoạt động một cách trơn tru dễ dàng hơn và giảm thời gian sửa các lỗi.

Tuy nhiên, nếu dự án của bạn là một ứng dụng nhỏ hoặc tạo trang web đơn giản, thì JavaScript sẽ là lựa chọn. Vì, JavaScript là một ngôn ngữ lập trình linh hoạt, rộng rãi được sử dụng trên nhiều trình duyệt và hệ điều hành. Với JavaScript, bạn có thể lập trình nhanh chóng và đơn giản mà không cần phải lo lắng về việc kiểm soát kiểu dữ liệu và mã nguồn.

Tóm lại, việc lựa chọn giữa TypeScript và JavaScript phụ thuộc vào tính chất của dự án và mục đích sử dụng.

Cài đặt TypeScript

Chạy lệnh sau để cài đặt TypeScript (nhớ cài đặt nodejs trước nhé):

npm install -g typescript

Compile:

tsc xxx.ts

Việc này sẽ giúp tạo ra file xxx.js

Các kiểu dữ liệu trong TypeScript

Kiểu dữ liệu	Keyword	Mô tả	Ví dụ
Number	number	Đại diện cho số, có thể là số nguyên (interger) hoặc số thực (float)	number = 123;
Boolean	boolean	Đại diện cho giá trị true hoặc false	boolean = true;
String	string	Đại diện cho chuỗi các ký tự	string = ‘200Lab’;
Void	void	Thường được sử dụng cho các hàm không trả về giá trị	function logMessage(message: string): void { console.log(message); }
Null	null	Được sử dụng khi một đối tượng không có bất kỳ giá trị nào	null = null;
Undefined	undefined	Biểu thị giá trị được cung cấp cho biến chưa được khởi tạo	undefined = undefined;
Any	any	Nếu biến được khai báo với bất kỳ kiểu dữ liệu nào, thì bất kỳ kiểu giá trị nào cũng có thể được gán cho biến đó	any = "hello"; value = 10; value = true;

Hướng dẫn biên dịch TypeScript sang JavaScript

Để biên dịch TypeScript sang JavaScript, bạn có thể sử dụng TypeScript Compiler hoặc sử dụng công cụ tự động hoá như Webpack hoặc Gulp.

Biên dịch bằng TypeScript Compiler

Để biên dịch TypeScript sang JavaScript bằng TypeScript Compiler, trước tiên bạn cần phải cài đặt TypeScript Compiler thông qua npm bằng câu lệnh sau:

npm install -g typescript

Bạn có thể tạo một file TypeScript có tên app.ts, sau đó sử dụng lệnh sau để biên dịch nó sang JavaScript:

tsc app.ts

Nếu biên dịch thành công, bạn sẽ thấy một file JavaScript mới có tên là app.js được tạo ra.

Biên dịch bằng Webpack

Nếu bạn đang sử dụng Webpack để quản lý dự án của mình, bạn có thể sử dụng ts-loader để biên dịch TypeScript sang JavaScript.

Để làm điều này, trước tiên bạn cần cài đặt ts-loader và TypeScript thông qua npm bằng câu lệnh sau:

npm install --save-dev ts-loader typescript

Sau đó, bạn có thể cấu hình ts-loader trong file webpack.config.js như sau:

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
  // ...
};

Sau khi cấu hình xong, bạn có thể sử dụng lệnh webpack để biên dịch TypeScript sang JavaScript.

Biên dịch bằng Gulp:

Nếu bạn đang sử dụng Gulp để quản lý dự án của mình, bạn có thể sử dụng gulp-typescript để biên dịch TypeScript sang JavaScript.

Trước tiên, bạn cần phải cài đặt gulp-typescript và TypeScript thông qua npm bằng câu lệnh sau:

npm install --save-dev gulp gulp-typescript typescript

Sau đó, bạn có thể cấu hình gulp-typescript trong file gulpfile.js như sau:

const gulp = require("gulp");
const ts = require("gulp-typescript");
const tsProject = ts.createProject("tsconfig.json");

gulp.task("default", function () {
  return tsProject
    .src()
    .pipe(tsProject())
    .js.pipe(gulp.dest("dist"));
});

Sau khi cấu hình xong, bạn có thể sử dụng lệnh gulp để biên dịch TypeScript sang JavaScript.

Lời kết

Với sự phát triển nhanh chóng cùng sự hỗ trợ mạnh mẽ từ Microsoft, TypeScript đang ngày càng được sử dụng rộng rãi trong cộng đồng phát triển phần mềm. Sử dụng TypeScript không chỉ giúp cho mã nguồn của bạn trở nên đáng tin cậy hơn mà còn giúp giảm thiểu sai sót trong quá trình phát triển.

Nếu bạn chưa sử dụng TypeScript trước đây, vậy thì hãy thử cân nhắc nghiên cứu và áp dụng nó vào các dự án của mình để tận dụng tối đa lợi ích của ngôn ngữ này nhé.

Bạn có thể tham khảo thêm những bài viết hữu ích về chủ đề "Lập trình web" tại Blog của 200Lab nhé!

Khoá học 200Lab

Nâng Cao Kiến Thức và Mở Rộng Cơ Hội Việc Làm

Bạn đang tìm hiểu cơ hội việc làm trong lĩnh vực lập trình, hệ thống cũng như phân tích dữ liệu? Đừng bỏ lỡ cơ hội khám phá những khóa học tuyệt vời dưới đây nhé!

TYPESCRIPT LÀ GÌ? LỰA CHỌN GIỮA TYPESCRIPT VÀ JAVASCRIPT

TypeScript là gì?

Ví dụ

Tại sao cần TypeScript trong khi đã có JavaScript?

Nên chọn TypeScript và JavaScript khi nào?

Cài đặt TypeScript

Các kiểu dữ liệu trong TypeScript

Hướng dẫn biên dịch TypeScript sang JavaScript

Biên dịch bằng TypeScript Compiler

Biên dịch bằng Webpack

Biên dịch bằng Gulp:

Lời kết

Pum

HƯỚNG DẪN CÀI ĐẶT VÀ SỬ DỤNG TAILWIND CSS CƠ BẢN

JQUERY LÀ GÌ? TỔNG QUAN VỀ JQUERY DÀNH CHO NGƯỜI MỚI

Khoá học 200Lab

Bài viết liên quan

React Hooks - Những điều bạn cần biết

Axios là gì? Cập nhật mới nhất về thư viện Axios

NextJS là gì? Kiến thức NextJS cơ bản bạn cần biết

CSS cơ bản: Sự khác nhau giữa Flexbox và Grid

Redux là gì? Tìm hiểu Redux cơ bản cho người mới bắt đầu

ReactJS là gì? Những điều bạn cần biết về ReactJS

Bài viết mới

So sánh PowerBI và Looker Studio

Giải thích các ký hiệu trong use case diagram

Concurrency pattern trong Go - Phần 2

Tags

TYPESCRIPT LÀ GÌ? LỰA CHỌN GIỮA TYPESCRIPT VÀ JAVASCRIPT

TypeScript là gì?

Ví dụ

Tại sao cần TypeScript trong khi đã có JavaScript?

Nên chọn TypeScript và JavaScript khi nào?

Cài đặt TypeScript

Các kiểu dữ liệu trong TypeScript

Hướng dẫn biên dịch TypeScript sang JavaScript

Biên dịch bằng TypeScript Compiler

Biên dịch bằng Webpack

Biên dịch bằng Gulp:

Lời kết

HƯỚNG DẪN CÀI ĐẶT VÀ SỬ DỤNG TAILWIND CSS CƠ BẢN

JQUERY LÀ GÌ? TỔNG QUAN VỀ JQUERY DÀNH CHO NGƯỜI MỚI

Khoá học 200Lab

Đăng ký để nhận các bài viết mới

Bài viết liên quan

Bài viết mới

Tags