TypeScript 101: Công cụ để chào thế giới


Nguyễn Quang Tuấn
4 năm trước
Hữu ích 1 Chia sẻ Viết bình luận 0
Đã xem 2887

Bài đăng này của  Dhananjay Kumar của blog cộng đồng infragistic.com , được cung cấp bởi sự cho phép.

Bài đăng này sẽ giúp bạn bắt đầu với TypeScript bằng cách thiết lập môi trường phát triển cho TypeScript trong Visual Studio và Sublime Text. Cuối bài đăng, chúng tôi sẽ tạo một chương trình TypeScript đơn giản trong Visual Studio.

Tính năng TypeScript

Bao gồm:

Hỗ trợ JavaScript chuẩn
Gõ tĩnh và chú thích
Đóng gói bằng các lớp và mô-đun
Hỗ trợ cho các hàm tạo, thuộc tính và hàm
Kiểm tra cú pháp

Làm:

JavaScript phủ đường chính xác như một bộ siêu ECMASCRIPT 5 và với các tính năng được đề xuất khác nhau của ECMASCRIPT 6
Biên dịch với việc tạo mã mô-đun có thể được tải tĩnh hoặc động
Hoạt động với kiểu suy luận
Không sắp xếp lại khai báo biến

TypeScript trong Visual Studio

Điều kiện tiên quyết

Để làm việc với TypeScript trong Visual Studio, hãy tải xuống gói TypeScript cho phiên bản Visual Studio của bạn từ http://www.typescriptlang.org  và cài đặt khi cần ( Hình 1 , bên phải).

Các phiên bản gần đây hơn của Visual Studio bao gồm TypeScript.

Để tạo một dự án TypeScript trong Visual Studio

  1. Tìm  HTML Application with TypeScript bên trong phần TypeScript của các mẫu đã cài đặt, như trong ( Hình 2 ), bên dưới. 

  2. Tạo một dự án bằng cách sử dụng

    HTML Application with TypeScript

    bản mẫu. Sau khi thực hiện dự án, tìm các tệp app.ts trong Solution Explorer ( Hình 3 ) và app.js  trong thư mục dự án:

    • app.ts 
      Một tập tin TypeScript . Bất cứ khi nào bạn lưu tập tin này, Visual Studio sẽ tạo ra một tương đương JavaScript của nó với tên app.js .

    • In index.html( Hình 4 ), bạn sẽ thấy một tham chiếu đến app.js đã biên dịch ; tuy nhiên các tập tin không được bao gồm trong dự án theo mặc định. Bạn có thể thêm nó vào dự án bằng tay.

Bạn có thể thêm nhiều tệp TypeScript bằng cách mở menu ngữ cảnh bằng một cú nhấp chuột phải, chọn "Thêm mục mới" và sau đó "tệp TypeScript". Sau khi thêm tệp nguồn mới, Visual Studio sẽ tạo một tệp JavaScript tương ứng trong cùng một thư mục. Bạn cần thêm thủ công các tham chiếu đến các tệp JavaScript đó trong HTML của mình.

Tệp app.ts chứa mã tham chiếu để in thời gian hiện tại trong TypeScript. Không thay đổi bất cứ điều gì, hãy tiếp tục và chạy ứng dụng trong trình duyệt yêu thích của bạn và bạn sẽ có thời gian hiện tại được in trong trình duyệt bằng TypeScript, được hiển thị trong Hình 5 , bên dưới:


TypeScript trong văn bản tuyệt vời

Điều kiện tiên quyết

  • Một cú pháp tô sáng

  • Một hệ thống xây dựng tùy chỉnh

Để cài đặt đánh dấu cú pháp TypeScript

  1. Git  sao chép gói này vào \AppData\Roaming\Sublime Text 2\Packagesnhư trong Hình 6 bên dưới:

  2. Sau khi cài đặt, hãy tạo một  tệp .ts mới trong Sublime Text và bạn sẽ thấy rằng cú pháp TypeScript đang hoạt động ( Hình 7 ):

Để tạo hệ thống xây dựng TypeScript

  1. Công cụ  →   Hệ thống xây dựng  →   Hệ thống xây dựng mới

  2. Trong cửa sổ Hệ thống xây dựng mới, dán mã bên dưới và lưu tệp với tên như "TypeScriptBuild."

{
    "selector": "source.ts",
    "cmd": ["tsc", "$file"],
    "file_regex": "^(.+?) \\((\\d+),(\\d+)\\)(: .+)$"
}

Sau khi tạo bản dựng tùy chỉnh, chọn Công cụHệ thống bản dựngTypeScriptBuild và bạn sẽ có thể sử dụng Ctrl + B để xây dựng TypeScript thành tệp JavaScript.


Một ví dụ đơn giản

  1. Sử dụng TypeScript, hãy tạo một lớp. TypeScript cho phép chúng ta tạo một lớp bằng cú pháp đơn giản. Một lớp có thể được tạo bằng cách sử dụng classtừ khóa. Chúng ta có thể định nghĩa các biến với các loại và một hàm tạo có thể được tạo bằng cách sử dụng hàm tạo từ khóa.

  2. Dưới đây, chúng tôi đang tạo một lớp Sinh viên với hai thuộc tính, hàm tạo và một phương thức. Lớp có thể được tạo như sau:

class Student {
    name: string;
    age: number;
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    Print() {

        alert(this.name + " is " + this.age + " years old !!");
    }
}

window.onload = () => {
    var stud1 = new Student("DJ", 33);
    stud1.Print();
};

Chúng ta có thể tạo một đối tượng bằng cách sử dụng từ khóa mới. Trong phương pháp In của lớp Sinh viên, chúng tôi đang hiển thị tuổi và tên của sinh viên.

Khi bạn chạy ứng dụng, bạn sẽ nhận được một thông báo cảnh báo như trong hình bên dưới:

Tôi hy vọng bạn thấy bài đăng này hữu ích để bắt đầu với TypeScript - có gì để nói không? Để lại một bình luận!

Hữu ích 1 Chia sẻ Viết bình luận 0
Đã xem 2887