Giới thiệu về Typescript
Typescript là một ngôn ngữ lập trình được sử dụng để tạo các trang web và ứng dụng. Nó là một siêu tập hợp của JavaScript, có nghĩa là nó có tất cả các tính năng của JavaScript, cùng với một số tính năng bổ sung. Typescript là một ngôn ngữ tuyệt vời để học vì nó dễ hiểu và dễ sử dụng. Trong bài viết này, chúng ta sẽ xem xét 20 khái niệm quan trọng trong Typescript mà các nhà phát triển nên biết.
1. Biến
Biến là một cách lưu trữ thông tin trong chương trình. Các biến có thể lưu trữ số, chuỗi (văn bản) và các loại dữ liệu khác. Trong Typescript, các biến được khai báo bằng từ khóa let const var . Ví dụ: nếu chúng tôi muốn lưu trữ số 5 trong một biến có tên myNumber , chúng tôi sẽ viết đoạn mã sau:
1 2 3 4 | <span class="token keyword">let</span> myNumber <span class="token operator">=</span> <span class="token number">5</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> myNumber2 <span class="token operator">=</span> <span class="token number">5</span> <span class="token punctuation">;</span> <span class="token keyword">var</span> myNumber3 <span class="token operator">=</span> <span class="token number">5</span> <span class="token punctuation">;</span> |
2. Kiểu dữ liệu
Các kiểu dữ liệu là các loại dữ liệu khác nhau có thể được lưu trữ trong một biến. Trong Typescript, có một số loại dữ liệu khác nhau, bao gồm numbers , strings , booleans và objects . Ví dụ: nếu chúng tôi muốn lưu trữ chuỗi “Xin chào thế giới” trong một biến có tên myString , chúng tôi sẽ viết đoạn mã sau:
1 2 | <span class="token keyword">let</span> myString <span class="token operator">=</span> <span class="token string">"Hello World"</span> <span class="token punctuation">;</span> |
3. Người vận hành
Toán tử là các ký hiệu được sử dụng để thực hiện các thao tác trên các biến. Trong Typescript, có một số toán tử khác nhau, bao gồm toán tử số học ( + , - , * , / ), toán tử so sánh ( == , != , > , < , === ) và toán tử logic ( && , || , ! ). Ví dụ: nếu chúng tôi muốn cộng các số 5 và 10 và lưu kết quả vào một biến có tên myResult , chúng tôi sẽ viết đoạn mã sau:
1 2 | <span class="token keyword">let</span> myResult <span class="token operator">=</span> <span class="token number">5</span> <span class="token operator">+</span> <span class="token number">10</span> <span class="token punctuation">;</span> |
4. Chức năng
Hàm là các khối mã có thể được sử dụng để thực hiện một tác vụ cụ thể. Trong Typescript, các hàm được khai báo bằng từ khóa function . Ví dụ: nếu chúng ta muốn tạo một hàm có tên sayHello để in chuỗi “Xin chào thế giới” ra bàn điều khiển, chúng ta sẽ viết đoạn mã sau:
1 2 3 4 | <span class="token keyword">function</span> <span class="token function">sayHello</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">"Hello World"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
5. Lớp học
Các lớp là khuôn mẫu cho các đối tượng. Trong Typescript, các lớp được khai báo bằng từ khóa class . Ví dụ: nếu chúng ta muốn tạo một lớp có tên Person có hai thuộc tính ( name và age ), chúng ta sẽ viết đoạn mã sau:
1 2 3 4 5 | <span class="token keyword">class</span> <span class="token class-name">Person</span> <span class="token punctuation">{</span> name <span class="token operator">:</span> string <span class="token punctuation">;</span> age <span class="token operator">:</span> number <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
6. Giao diện
Các giao diện được sử dụng để xác định cấu trúc của một đối tượng. Trong Typescript, các giao diện được khai báo bằng từ khóa interface . Ví dụ: nếu chúng ta muốn tạo một giao diện có tên là Person có hai thuộc tính ( name và age ), chúng ta sẽ viết đoạn mã sau:
1 2 3 4 5 | <span class="token keyword">interface</span> <span class="token class-name">Person</span> <span class="token punctuation">{</span> name <span class="token operator">:</span> string <span class="token punctuation">;</span> age <span class="token operator">:</span> number <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
7. Mảng
Mảng được sử dụng để lưu trữ một danh sách các giá trị. Trong Typescript, các mảng được khai báo bằng cú pháp [] . Ví dụ: nếu chúng tôi muốn tạo một mảng có tên myArray chứa các số 1, 2 và 3, chúng tôi sẽ viết đoạn mã sau:
1 2 | <span class="token keyword">let</span> myArray <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">1</span> <span class="token punctuation">,</span> <span class="token number">2</span> <span class="token punctuation">,</span> <span class="token number">3</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span> |
8. Vòng lặp
Vòng lặp được sử dụng để lặp lại một khối mã nhiều lần. Trong Typescript, có một số loại vòng lặp khác nhau, bao gồm vòng lặp for , vòng lặp while vòng lặp do-while . Ví dụ: nếu chúng ta muốn sử dụng vòng lặp for để in các số từ 1 đến 10 ra bàn điều khiển, chúng ta sẽ viết đoạn mã sau:
1 2 3 4 | <span class="token keyword">for</span> <span class="token punctuation">(</span> <span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">1</span> <span class="token punctuation">;</span> i <span class="token operator"><=</span> <span class="token number">10</span> <span class="token punctuation">;</span> i <span class="token operator">++</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> i <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
9. Điều kiện
Câu điều kiện dùng để kiểm tra xem một điều kiện nào đó đúng hay sai. Trong Typescript, các điều kiện được khai báo bằng từ khóa if . Ví dụ: nếu chúng tôi muốn kiểm tra xem số 5 có lớn hơn 10 hay không, chúng tôi sẽ viết đoạn mã sau:
1 2 3 4 | <span class="token keyword">if</span> <span class="token punctuation">(</span> <span class="token number">5</span> <span class="token operator">></span> <span class="token number">10</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">"5 is greater than 10"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
10. Mô-đun
Các mô-đun được sử dụng để sắp xếp mã thành các tệp riêng biệt. Trong Typescript, các mô-đun được khai báo bằng cách sử dụng các từ khóa import và export . Ví dụ: nếu chúng tôi muốn tạo một mô-đun có tên myModule có chứa hàm có tên sayHello , chúng tôi sẽ viết đoạn mã sau:
1 2 3 4 5 6 7 8 9 10 | <span class="token comment">// myModule.ts</span> <span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">sayHello</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">"Hello World"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// main.ts</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> sayHello <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"./myModule"</span> <span class="token punctuation">;</span> <span class="token function">sayHello</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
11. Lời hứa
Lời hứa được sử dụng để xử lý các hoạt động không đồng bộ. Trong Typescript, các lời hứa được khai báo bằng cách sử dụng hàm tạo Promise . Ví dụ: nếu chúng tôi muốn tạo một lời hứa sẽ giải quyết sau một giây, chúng tôi sẽ viết đoạn mã sau:
1 2 3 4 5 6 | <span class="token keyword">let</span> myPromise <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter">resolve <span class="token punctuation">,</span> reject</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token function">setTimeout</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token function">resolve</span> <span class="token punctuation">(</span> <span class="token string">"Hello World"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token number">1000</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
12. Thuốc gốc
Generics được sử dụng để tạo mã có thể tái sử dụng. Trong Typescript, generic được khai báo bằng cú pháp <T> . Ví dụ: nếu chúng tôi muốn tạo một hàm chung có tên là log có thể ghi bất kỳ loại giá trị nào vào bảng điều khiển, chúng tôi sẽ viết đoạn mã sau:
1 2 3 4 | <span class="token keyword">function</span> log <span class="token operator"><</span> <span class="token constant">T</span> <span class="token operator">></span> <span class="token punctuation">(</span> value <span class="token operator">:</span> <span class="token constant">T</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> value <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
13. Enum
Enums được sử dụng để tạo một tập hợp các hằng số liên quan. Trong Typescript, enums được khai báo bằng từ khóa enum . Ví dụ: nếu chúng ta muốn tạo một enum có tên là Colors chứa các màu đỏ, lục và lam, chúng ta sẽ viết đoạn mã sau:
1 2 3 4 5 6 | <span class="token keyword">enum</span> Colors <span class="token punctuation">{</span> Red <span class="token punctuation">,</span> Green <span class="token punctuation">,</span> Blue <span class="token punctuation">}</span> |
14. Bộ dữ liệu
Bộ dữ liệu được sử dụng để lưu trữ một số giá trị cố định thuộc các loại khác nhau. Trong Typescript, các bộ dữ liệu được khai báo bằng cú pháp [T1, T2, ...] . Ví dụ: nếu chúng tôi muốn tạo một bộ có tên myTuple chứa một chuỗi và một số, chúng tôi sẽ viết đoạn mã sau:
1 2 | <span class="token keyword">let</span> myTuple <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token builtin">string</span> <span class="token punctuation">,</span> <span class="token builtin">number</span> <span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token string">"Hello World"</span> <span class="token punctuation">,</span> <span class="token number">5</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span> |
15. Nhập bí danh
Bí danh loại được sử dụng để tạo tên mới cho loại hiện có. Trong Bản mô tả, bí danh loại được khai báo bằng từ khóa type . Ví dụ: nếu chúng ta muốn tạo bí danh loại có tên Person cho một đối tượng có hai thuộc tính ( name và age ), chúng ta sẽ viết đoạn mã sau:
1 2 3 4 5 | <span class="token keyword">type</span> <span class="token class-name">Person</span> <span class="token operator">=</span> <span class="token punctuation">{</span> name <span class="token operator">:</span> <span class="token builtin">string</span> <span class="token punctuation">;</span> age <span class="token operator">:</span> <span class="token builtin">number</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> |
16. Không gian tên
Không gian tên được sử dụng để sắp xếp mã thành các mô-đun riêng biệt. Trong Typescript, các không gian tên được khai báo bằng cách sử dụng từ khóa namespace . Ví dụ: nếu chúng tôi muốn tạo một không gian tên có tên MyNamespace có chứa một hàm có tên là sayHello , chúng tôi sẽ viết đoạn mã sau:
1 2 3 4 5 6 | <span class="token keyword">namespace</span> MyNamespace <span class="token punctuation">{</span> <span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">sayHello</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token builtin">console</span> <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">"Hello World"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
17. Trang trí
Trình trang trí được sử dụng để thêm chức năng bổ sung cho các lớp, phương thức và thuộc tính. Trong Typescript, các bộ trang trí được khai báo bằng biểu tượng @ . Ví dụ: nếu chúng tôi muốn tạo một trình trang trí có tên là log ký ghi nhật ký giá trị của một thuộc tính khi nó được truy cập, chúng tôi sẽ viết đoạn mã sau:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <span class="token keyword">function</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token parameter">target <span class="token operator">:</span> any <span class="token punctuation">,</span> key <span class="token operator">:</span> string</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">let</span> value <span class="token operator">=</span> target <span class="token punctuation">[</span> key <span class="token punctuation">]</span> <span class="token punctuation">;</span> Object <span class="token punctuation">.</span> <span class="token function">defineProperty</span> <span class="token punctuation">(</span> target <span class="token punctuation">,</span> key <span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token function-variable function">get</span> <span class="token operator">:</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> value <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">return</span> value <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token function-variable function">set</span> <span class="token operator">:</span> <span class="token punctuation">(</span> <span class="token parameter">newValue</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> newValue <span class="token punctuation">)</span> <span class="token punctuation">;</span> value <span class="token operator">=</span> newValue <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
18. Hỗn hợp
Mixins được sử dụng để kết hợp nhiều lớp thành một lớp duy nhất. Ví dụ: nếu chúng tôi muốn tạo một mixin có tên Logger để thêm chức năng ghi nhật ký cho một lớp, chúng tôi sẽ viết đoạn mã sau:
1 2 3 4 5 6 7 8 | <span class="token keyword">function</span> <span class="token function">Logger</span> <span class="token punctuation">(</span> <span class="token parameter">base <span class="token operator">:</span> any</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token keyword">class</span> <span class="token class-name">extends</span> base <span class="token punctuation">{</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token parameter">message <span class="token operator">:</span> string</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> message <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
19. Không đồng bộ/Đang chờ
Async/await được sử dụng để viết mã không đồng bộ theo kiểu đồng bộ. Trong Bản mô tả, async/await được khai báo bằng cách sử dụng từ khóa async và await . Ví dụ: nếu chúng tôi muốn tạo một hàm không đồng bộ có tên sayHello để in chuỗi “Xin chào thế giới” ra bàn điều khiển, chúng tôi sẽ viết đoạn mã sau:
1 2 3 4 5 6 7 8 9 | <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">sayHello</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">await</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter">resolve</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token function">setTimeout</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">"Hello World"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token function">resolve</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token number">1000</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
20. Trình biên dịch TypeScript
Trình biên dịch TypeScript được sử dụng để biên dịch mã TypeScript thành mã JavaScript. Trình biên dịch TypeScript có thể được sử dụng từ dòng lệnh hoặc nó có thể được tích hợp vào một IDE chẳng hạn như Visual Studio Code.
Phần kết luận
Trong bài viết này, chúng tôi đã nhanh chóng xem xét 20 khái niệm quan trọng trong TypeScript. Typescript là một ngôn ngữ tuyệt vời để học vì nó dễ hiểu và dễ sử dụng. Với sự trợ giúp của các khái niệm này, bạn có thể bắt đầu tạo các trang web và ứng dụng của riêng mình bằng Typescript.
Và cuối cùng
Như mọi khi, tôi hy vọng bạn thích bài viết này và học được điều gì đó mới. Xin cảm ơn và hẹn gặp lại các bạn trong những bài viết tiếp theo!
Nếu các bạn thích bài viết này thì hãy cho mình 1 like và subscribe để ủng hộ mình nhé. Cảm ơn.