Cơ bản về TypeScript

Trong loạt bài này, chúng ta sẽ khám phá về TypeScript, một ngôn ngữ lập trình được thiết kế để làm cho mã JavaScript của bạn trở nên mạnh mẽ và dễ bảo trì hơn. Dưới đây là một giới thiệu tổng quan về vai trò của TypeScript, cách cài đặt, và một cái nhìn sơ lược về cách viết mã, quá trình biên dịch, và cách thực thi trong môi trường web.

Giới thiệu về TypeScript

TypeScript là ngôn ngữ lập trình dùng để lập trình javascript. Coe typescript sau khi viết xong sẽ được biên dịch thành ngôn ngữ javascript để chạy trong trang web.

Typescript được trang bị nhiều đặc điểm mới, nhiều kiểu dữ liệu mới , hỗ trợ tốt debug lỗi…. Cho nên dùng TypeScript là cách rất tốt giúp các lập trình viên triển khai lập trình front end nhanh chóng hơn, nhất là trong những dự án lớn, phức tạp.

TypeScript là mã nguồn mở, được phát triển và hỗ trợ bởi Microsoft.

So sánh Typescript và Javascript

Javascript

• Chỉ làm việc với kiểu động (dynamic type).
• Được phát triển bởi Netscape năm 1995.
• Tên mở rộng của file javascript là .js
• Javascript chạy trong các trình duyệt.
• Lỗi chỉ biết lúc chạy trang web.
• Javascript là ngôn ngữ kịch bản (scripting language),
• Người lập trình không cần kinh nghiệm về ngôn ngữ script trước đó.
• Không cần cài đặt gì cả để chạy javascript, vì nó đã được tích hợp vào trình duyệt.

Type script

• Làm việc với kiểu động và tĩnh (static, dymanic type)
• Được phát triển bởi Anders Hejlsberg -2012.
• Tên mở rộng của file là  .ts
• Không chạy trực tiếp trên trình duyệt mà cần được biên dịch sang javascript để chạy
• Lỗi được tìm thấy lúc biên dịch nhờ đó dễ sửa. sửa sớm, giảm thời gian thực hiện
• Hỗ trợ tốt lập trình hướng đối tượng với các classes, interfaces, inheritance, generics,…..
• Kiến thức về javascript là bắt buộc.
• Phải cài đặt typescript , thông qua npm

Công cụ viết code Typescript

Có nhiều công cụ để viết code TypeScript như VS Code, Sublime Text, Atom, Eclipse, WebStorm…Bạn dùng công cụ nào cũng được. VS Code cũng được Microsoft phát triển cho nên nó hỗ trợ bạn rất tốt khi code TypeScript. Nếu máy của Bạn chưa có tool này (VS Code) thì hãy cài vào nhé.

(Simple Online Code Editor)

Cài đặt Typescript

Để bắt đầu sử dụng TypeScript để phát triển ứng dụng, bạn cần thực hiện một số bước cài đặt cơ bản.

Trước hết, bạn cần cài đặt Node.js. Truy cập trang chính thức của Node.js tại https://nodejs.org/en/download/ và tải bản mới nhất. Việc cài đặt Node.js cũng sẽ tự động cài đặt npm, chương trình quản lý gói thư viện cho Node.js.

Khi đã có NodeJS và NPM, thì việc cài đặt TypeScript là rất đơn giản. Thực hiện thông qua npm với lệnh như sau:

npm install –g typescript

Kiểm tra version TypeScript

Muốn biết Typescript đang chạy trong máy của mình là version mấy thì chạy lệnh tsc -version

Tài liệu chính thức TypeScript

Để tham khảo tài liệu Typescript, bạn vào địa chỉ sau đây để tra cứu : https://www.typescriptlang.org/docs/ . Hoặc có thể học Typescript từ w3School, địa chỉ đây: https://www.w3schools.com/typescript/ 

Biên dịch typescript code

Sau khi code typescript đã được viết xong. Bạn cần biên dịch nó sang mã javacript để chạy trong trang web. Dùng lệnh sau trong command line hoặc Terminal VS Code để biên dịch

tsc filename.ts

Khi chạy lệnh xong, Bạn sẽ có 1 file filename.js , trong đó là mã lệnh Javascript đã được chuyển từ TypeScript sang. Bạn chèn file .js vào trang web để chạy thôi.

Biên dịch code typetcript dùng tsconfig.json

File tsconfig.json

là nơi lưu cấu hình cho hoạt động biên dịch typescript. Có thể tạo file này bằng lệnh:

tsc --init

File tsconfig.json được tạo ra với rất nhiều thông số (đang tạm comment)

Các thông số thường dùng trong file tsconfig.json

• target : chi định version ES sử dụng trong quá trình build code typescript ra  javascript.
• watch : nếu là true sẽ bật chế độ tự động, khi có file ts nào thay đổi thì nó sẽ build ngay file đó. Còn không thì mỗi lần có 1 file ts thay đổi, phải chạy lệnh tsc để build toàn bộ các file ts.
• removeComments : nếu là true thì khi build sang js sẽ bỏ các comment trong file ts . False thì sẽ chép comment sang.
• outDir : là folder chứa các file js khi build xong.
• exclude : loại bỏ không build các file ts nếu có trong các folder liệt kê ở đây

Ví dụ: file tsconfig.json

{
    "compilerOptions": {
        "outDir" : "js",
        "watch" : true,
        "target" : "ES2022",
        "removeComments" : true,
    },
    "exclude": [
        "css",
    ]
}

Thực hiện build tất cả code typescript sang javascript theo cấu hình trong tsconfig.json

Trong terminal, đơn giản là chạy lệnh

tsc 

Khi đó tất cả các file code .ts sẽ được build thành các file .js trong folder khai báo trong outDir, ngoại trừ các file .ts trong trong các folder exclude. Tuyệt chưa nào.

Truy xuất tag html trong TypeScript

Tương tác với DOM để truy xuất vào element trong trang web là đơn giản, cũng như lúc bạn code Javascript thuần thôi. Nghĩa là trong Typescript có thể truy xuất các tag trong trang, rồi lấy ra hoặc gán vào innerHTML, innertext, value… và các thuộc tính khác của element. Về vụ này, có thể xem thêm tại đây https://www.typescriptlang.org/docs/handbook/dom-manipulation.html

Thực tập viết mã typescript

Tạo folder Lab1 và dùng VS Code mở folder này lên để thực tập nhé.

Biên dịch mã typescript để chạy trong trang web – Ví dụ 1

a. Tạo file vidu1.ts và code:

b. Vào terminal của VS Code và gõ lệnh sau để biên dịch :

tsc vidu1.ts

Xong sẽ thấy file vidu1.js tạo ra

c. Tạo file vidu1.html và code chèn js

<body>
   <h1>Ví dụ 1</h1>
</body>
http://vidu1.js

Code typescript giải phương trình bậc 2 – Ví dụ 2

a. Tạo file ptb2.ts và code typescript

b. Biên dịch sang javascript bằng cách chạy lệnh trong terminal:  

tsc ptb2.ts

c. Tạo trang web ptb2.html và code

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<form name="frm" class="col-5 m-auto mt-5 border border-primary p-2">
<div class="mb-3">
   Số A 
  <input class="form-control" name="a" type="number" placeholder="Nhập hệ số a">
</div>
<div class="mb-3">
   Số B 
  <input class="form-control" name="b" type="number" placeholder="Nhập hệ số b">
</div>
<div class="mb-3">
   Số C 
  <input class="form-control" name="c" type="number" placeholder="Nhập hệ số c">
</div>
<div class="mb-3"> 
   <button name="btn" class="btn btn-primary p-2" type="button">Tính nghiệm</button>
</div>
</form>

d. Nhúng mã javascript đã biên dịch vào trang web: Ccode ở cuối trang ptb2.html

e. Xem thử trang web, bạn phát triển thêm các chức năng khác cho ngon nhé

Truy xuất giá trị trong form từ typescript – Ví dụ 3

a. Tạo trang vidu3.html

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<form name="frm" class="col-5 m-auto p-3 border border-primary">
<input id="tensp" class="form-control mb-3"  placeholder="Nhập tên sản phẩm">
<select id="loai" class="form-control mb-3"> 
    <option value="0">Chọn loại</option>
    <option value="1">Điện thoại</option>
    <option value="2">Laptop</option>
</select>
<div class="form-control mb-3">
    Tình trạng: 
    <input name="tt" type="radio" value="0"> Hàng cũ 
    <input name="tt" type="radio" value="1"> Hàng mới
</div>
<div class="form-control mb-3">
    Đặc điểm: 
    <input type="checkbox" id="chongnuoc"> Chống nước
    <input type="checkbox" id="chongtrom"> Chống trộm
</div>
<div class="form-control mb-3">
    <textarea  class="form-control" id="mota" rows="3" placeholder="Mô tả"></textarea>
</div>
<button name="btn" class="btn btn-primary py-2 px-5" type="button">Lưu</button>
</form>

b. Tạo file vidu3.ts

const xuly = function() {
    let tensp = document.getElementById('tensp') as HTMLInputElement;
    let loai = document.getElementById('loai') as HTMLInputElement;
    let tt = document.forms[0].tt as HTMLInputElement;
    let cn = document.getElementById('chongnuoc') as HTMLInputElement;
    let ct = document.getElementById('chongtrom') as HTMLInputElement;
    let mota = document.getElementById('mota') as HTMLInputElement;
    console.log("Tensp= ", tensp.value, " Loại= ", loai.value);
    console.log("Chống nước= ", cn.checked, " Chống trộm= ", ct.checked);
    console.log("Trạng thái= ", tt.value, " Mô tả= ",  mota.value);
}

c. Biên dịch mã TypeScript thành Javasctipt

tsc vidu3.ts

d. Nhúng javascript đã biên dịch vào trang web: Ở cuối file vidu3.html, code:

e. Test

Truy xuất tag html trong trang web từ typescript – Ví dụ 4

a. Tạo file vidu4.html và code

<div id="divTho">
 <h3>Tình quê</h3> </div>
http://vidu4.js

b. Tạo file vidu4.ts và code

let arr:string[] = [
    'Tôi về tìm lại tuổi thơ',
    'Tìm trong câu hát ầu ơ ví dầu',
    'Tìm về đồng ruộng nương dâu',
    'Dòng sông bến nước cây cầu gốc đa'
];

let divTho = document.getElementById('divTho') as HTMLElement;
if (divTho) 
    arr.forEach( t => divTho.innerHTML +=`<p> `+ t  + `</p>`);
else 
    alert('Không biết nơi nào hiện kết quả bồ ơi');

c. Biên dịch file typescript

tsc vidu4.ts

d. Xem kết quả:

Truy xuất value trong form từ typescript – Ví dụ 5

a. Tạo file vidu5.html

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<form name="frm" class="col-5 m-auto mt-5 border border-primary p-2">
<div class="mb-3">
    Tên đăng nhập 
    <input class="form-control" id="u" autofocus placeholder="Nhâp gồm a-z 0-9">
</div>
<div class="mb-3">
    Mật khẩu
    <input class="form-control" id="p" type="password" placeholder="Nhập mật khẩu">
</div>
<div class="mb-3"> 
    <button name="btn" class="btn btn-primary p-2" type="button">Đăng nhập</button>
</div>
</form>

b. Tạo file vidu5.ts và code

c. Biên dịch thành mã javascript:

tsc vidu5.ts

d. Nhúng javascript đã biên dịch và gọi hàm: Code ở cuối file vidu5.html

e. Test thử

---

Đến đây chúng ta đã biết cơ bản về TypeScript rồi, chưa có gì nhiều đâu. Nhưng cách cài đặt, sơ qua về cách viết mã lệnh, biên dịch, tương tác với các tag… vậy cũng được rồi.

Bây giờ, bạn đã có thể bắt đầu sử dụng TypeScript để phát triển ứng dụng của mình.