Bản mô-đun css

var fullName: string;                   //Khai báo biến với TS cho phép chỉ định kiểu cụ thể
console.log('Xin chào, ' + fullName);

3 là một ngôn ngữ lập trình ngôn ngữ, tương tự như JavaScript nó được phát triển khai từ đặc tả kỹ thuật ngôn ngữ kịch bản

var fullName: string;                   //Khai báo biến với TS cho phép chỉ định kiểu cụ thể
console.log('Xin chào, ' + fullName);

4.

var fullName: string;                   //Khai báo biến với TS cho phép chỉ định kiểu cụ thể
console.log('Xin chào, ' + fullName);

3 được Microsoft phát triển, nó kế thừa hầu hết những gì chúng ta đã biết về JavaScript (biến, vô dụng, vòng lặp). ), nhưng nó mở rộng thêm một số tính năng như biến báo cáo với kiểu dữ liệu cụ thể, giao diện. Mục đích để giảm thiểu lỗi ngay từ khi viết mã và có cấu trúc chặt chẽ hiện đại để đáp ứng tốt hơn cho các dự án lớn (như Angular)

Phần này coi như đã biết về JavaScript cơ bản, chỉ nên tìm hiểu những điểm đặc biệt khác biệt của TypeScript so với JavaScript, còn những vấn đề khác về kiến ​​trúc kế thừa từ JS

var fullName: string;                   //Khai báo biến với TS cho phép chỉ định kiểu cụ thể
console.log('Xin chào, ' + fullName);

3 được viết trong các phần mở rộng tệp được đặt là

var fullName: string;                   //Khai báo biến với TS cho phép chỉ định kiểu cụ thể
console.log('Xin chào, ' + fullName);

7, viết mã bằng TypeScript sau đó được biên dịch sang JavaScript thông thường để chạy trên trình duyệt. Như vậy, ta sử dụng TypeScript để viết JavaScript

tool

Công cụ để biên dịch mã viết bằng TypeScript là TypeScript, là một gói của

var fullName: string;                   //Khai báo biến với TS cho phép chỉ định kiểu cụ thể
console.log('Xin chào, ' + fullName);

8, được quản lý bởi

var fullName: string;                   //Khai báo biến với TS cho phép chỉ định kiểu cụ thể
console.log('Xin chào, ' + fullName);

9 nên bạn phải cài đặt đầy đủ các thành phần này

Cài đặt NodeJS và NPM (download NodeJS, xem thêm Cài đặt NodeJS NPM và Grunt)

Để cài đặt TypeScript, hãy nhập lệnh khi kết thúc

# npm install -g typescript

Sau khi cài đặt, hãy sử dụng công cụ này bằng cách nhập lệnh

{
    "compilerOptions": {
        "module": "commonjs",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "sourceMap": true,
        "target": "es5"
    },
}

0 với các tham số tương ứng. Ví dụ có tệp

{
    "compilerOptions": {
        "module": "commonjs",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "sourceMap": true,
        "target": "es5"
    },
}

1 muốn biên dịch thành JavaScript

{
    "compilerOptions": {
        "module": "commonjs",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "sourceMap": true,
        "target": "es5"
    },
}

2 thì gõ

var fullName: string;                   //Khai báo biến với TS cho phép chỉ định kiểu cụ thể
console.log('Xin chào, ' + fullName);

1

Ngoài ra, có thể tạo một tệp

{
    "compilerOptions": {
        "module": "commonjs",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "sourceMap": true,
        "target": "es5"
    },
}

3 để cấu hình tsc cho từng thư mục dự án. tsconfig-json

Dùng IDE để soạn thảo mã TS you could used Visual Studio Code (miễn phí)

Create a first project with VS Code

Tạo một thư mục dự án của bạn, sử dụng Mã VS để mở thử mục đó ra, tạo một tệp mã nguồn TS

{
    "compilerOptions": {
        "module": "commonjs",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "sourceMap": true,
        "target": "es5"
    },
}

4 với nội dung

var fullName: string;                   //Khai báo biến với TS cho phép chỉ định kiểu cụ thể
console.log('Xin chào, ' + fullName);

Tạo cấu hình tệp cho TS trên Mã VS có tên

{
    "compilerOptions": {
        "module": "commonjs",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "sourceMap": true,
        "target": "es5"
    },
}

3 với tệp nội dung như sau

{
    "compilerOptions": {
        "module": "commonjs",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "sourceMap": true,
        "target": "es5"
    },
}

Khi đã có tệp

{
    "compilerOptions": {
        "module": "commonjs",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "sourceMap": true,
        "target": "es5"
    },
}

3, thì bất kỳ lúc nào bạn muốn biên dịch TS thành JS chỉ việc nhập

{
    "compilerOptions": {
        "module": "commonjs",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "sourceMap": true,
        "target": "es5"
    },
}

7, menu đổ ra các mục được chọn.

{
    "compilerOptions": {
        "module": "commonjs",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "sourceMap": true,
        "target": "es5"
    },
}

8, it will translate from TypeScript to JavaScript for you. Nếu lựa chọn

{
    "compilerOptions": {
        "module": "commonjs",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "sourceMap": true,
        "target": "es5"
    },
}

9 sẽ tự động dịch mỗi khi tệp nguồn cập nhật

At ví dụ trên, after when compile, from

{
    "compilerOptions": {
        "module": "commonjs",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "sourceMap": true,
        "target": "es5"
    },
}

4 has more file

var fullName: string;                   //Khai báo biến với TS cho phép chỉ định kiểu cụ thể
console.log('Xin chào, ' + fullName);

21 with content

var fullName: string;                   //Khai báo biến với TS cho phép chỉ định kiểu cụ thể
console.log('Xin chào, ' + fullName);

2

Chạy thử tệp

var fullName: string;                   //Khai báo biến với TS cho phép chỉ định kiểu cụ thể
console.log('Xin chào, ' + fullName);

22 có thể tích hợp vào trang HTML để kiểm tra, hoặc chạy với

var fullName: string;                   //Khai báo biến với TS cho phép chỉ định kiểu cụ thể
console.log('Xin chào, ' + fullName);

23 từ dòng lệnh kết thúc nhập (Không tương tác với DOM HTML)

var fullName: string;                   //Khai báo biến với TS cho phép chỉ định kiểu cụ thể
console.log('Xin chào, ' + fullName);

6

Sau đây tìm hiểu một số đặc điểm của TypeScript

Khai báo biến với thể loại dữ liệu cụ thể

TypeScript cho phép khai báo biến thông báo bằng cách chỉ ra loại dữ liệu cụ thể của biến

var fullName: string;                   //Khai báo biến với TS cho phép chỉ định kiểu cụ thể
console.log('Xin chào, ' + fullName);

7

Có các kiểu dữ liệu nguyên thủy

var fullName: string;                   //Khai báo biến với TS cho phép chỉ định kiểu cụ thể
console.log('Xin chào, ' + fullName);

24,

var fullName: string;                   //Khai báo biến với TS cho phép chỉ định kiểu cụ thể
console.log('Xin chào, ' + fullName);

25,

var fullName: string;                   //Khai báo biến với TS cho phép chỉ định kiểu cụ thể
console.log('Xin chào, ' + fullName);

26 cũng có thể chỉ định biến đó nhận kiểu dữ liệu bất kỳ với

var fullName: string;                   //Khai báo biến với TS cho phép chỉ định kiểu cụ thể
console.log('Xin chào, ' + fullName);

27, việc cho khai báo như vậy giúp phát hiện lỗi ngay từ khi mã, ví dụ khai báo biến là chuỗi

Khai báo biến mảng với kiểu dữ liệu cụ thể

Use ký hiệu

var fullName: string;                   //Khai báo biến với TS cho phép chỉ định kiểu cụ thể
console.log('Xin chào, ' + fullName);

28 after data type

var fullName: string;                   //Khai báo biến với TS cho phép chỉ định kiểu cụ thể
console.log('Xin chào, ' + fullName);

3

Cũng có thể sử dụng ký hiệu

var fullName: string;                   //Khai báo biến với TS cho phép chỉ định kiểu cụ thể
console.log('Xin chào, ' + fullName);

29 để tạo mảng chỉ có số phức tạp (đối tượng thuộc tính) như JS

var fullName: string;                   //Khai báo biến với TS cho phép chỉ định kiểu cụ thể
console.log('Xin chào, ' + fullName);

5

Giao diện - Giao diện lập trình

TypeScript để khai báo cấu trúc của một loại dữ liệu được gọi là giao diện giao diện, những đối tượng có thuộc tính, dữ liệu giống với giao diện thì có thể sử dụng nó như giao diện đã biết.

var fullName: string;                   //Khai báo biến với TS cho phép chỉ định kiểu cụ thể
console.log('Xin chào, ' + fullName);

6

Lớp - Lớp và tính kế thừa lớp

Xây dựng và sử dụng lớp trong TypeScript thì tương tự như trong JavaScript (xem Lớp trong JavaScript trước, chỉ có các thuộc tính điều khiển, tham số phương thức phải khai báo với kiểu dữ liệu cụ thể). Ngoài ra với TypeScipt các phương thức, thuộc tính là chung, riêng, bảo vệ (giống C#) được cảnh báo với từ khóa

var fullName: string;                   //Khai báo biến với TS cho phép chỉ định kiểu cụ thể
console.log('Xin chào, ' + fullName);

60 (mặc định),

var fullName: string;                   //Khai báo biến với TS cho phép chỉ định kiểu cụ thể
console.log('Xin chào, ' + fullName);

61 (không truy cập được bên ngoài lớp),

var fullName: string;                   //Khai báo biến với TS cho phép chỉ định kiểu cụ thể
console.log('Xin chào, ' + fullName);

62 (giống private, but layer)

Ví dụ sau khi chuyển mã JavaScript khai báo 1 lớp trong ví dụ ở Lớp trong JavaScript, thành phù hợp với TypeScript, hãy lưu ý khác biệt giữa các tham số phương thức và thuộc tính của lớp giữa 2 phiên bản

var fullName: string;                   //Khai báo biến với TS cho phép chỉ định kiểu cụ thể
console.log('Xin chào, ' + fullName);

10

Sự kế thừa cũng tương tự

var fullName: string;                   //Khai báo biến với TS cho phép chỉ định kiểu cụ thể
console.log('Xin chào, ' + fullName);

11

Chung - trong TypeScript

Kỹ thuật sử dụng

var fullName: string;                   //Khai báo biến với TS cho phép chỉ định kiểu cụ thể
console.log('Xin chào, ' + fullName);

63 là cách xây dựng hàm, giao diện, lớp. on a general data type of general symbol as type

var fullName: string;                   //Khai báo biến với TS cho phép chỉ định kiểu cụ thể
console.log('Xin chào, ' + fullName);

64, type

var fullName: string;                   //Khai báo biến với TS cho phép chỉ định kiểu cụ thể
console.log('Xin chào, ' + fullName);

65. , after that when used function, layer. thì mới chỉ rõ kiểu

var fullName: string;                   //Khai báo biến với TS cho phép chỉ định kiểu cụ thể
console.log('Xin chào, ' + fullName);

64 là gì (số, chuỗi. ), kiểu

var fullName: string;                   //Khai báo biến với TS cho phép chỉ định kiểu cụ thể
console.log('Xin chào, ' + fullName);

65 cụ có thể là gì. Biến phổ biến chung trong nhiều ngôn ngữ lập trình như

var fullName: string;                   //Khai báo biến với TS cho phép chỉ định kiểu cụ thể
console.log('Xin chào, ' + fullName);

68,

var fullName: string;                   //Khai báo biến với TS cho phép chỉ định kiểu cụ thể
console.log('Xin chào, ' + fullName);

69, Generic trong Dart

var fullName: string;                   //Khai báo biến với TS cho phép chỉ định kiểu cụ thể
console.log('Xin chào, ' + fullName);

12

Cách làm tương tự với Giao diện và Lớp

var fullName: string;                   //Khai báo biến với TS cho phép chỉ định kiểu cụ thể
console.log('Xin chào, ' + fullName);

13

Mô-đun và Không gian tên - trong TypeScript

Module hóa là cách tổ chức mã thành các thành phần (chia thành các tệp

var fullName: string;                   //Khai báo biến với TS cho phép chỉ định kiểu cụ thể
console.log('Xin chào, ' + fullName);

7), các thành phần đó khi nào cần sử dụng thì nạp vào

Mô-đun hóa không phải của riêng TypeScript mà nó là chuẩn của

var fullName: string;                   //Khai báo biến với TS cho phép chỉ định kiểu cụ thể
console.log('Xin chào, ' + fullName);

4, trong một tệp

var fullName: string;                   //Khai báo biến với TS cho phép chỉ định kiểu cụ thể
console.log('Xin chào, ' + fullName);

7 bất kỳ ai muốn các thành phần của nó có thể sử dụng lại ở tệp

var fullName: string;                   //Khai báo biến với TS cho phép chỉ định kiểu cụ thể
console.log('Xin chào, ' + fullName);

7 khác, thì sử dụng tới từ khóa

var fullName: string;                   //Khai báo biến với TS cho phép chỉ định kiểu cụ thể
console.log('Xin chào, ' + fullName);

74 cho các thành phần đó (các thành phần có sẵn . )

var fullName: string;                   //Khai báo biến với TS cho phép chỉ định kiểu cụ thể
console.log('Xin chào, ' + fullName);

14

Khi nào cần dùng đến các thành phần xuất khẩu thì nạp vào bằng từ khóa

var fullName: string;                   //Khai báo biến với TS cho phép chỉ định kiểu cụ thể
console.log('Xin chào, ' + fullName);

75

var fullName: string;                   //Khai báo biến với TS cho phép chỉ định kiểu cụ thể
console.log('Xin chào, ' + fullName);

15

Ví dụ ở tập tin

var fullName: string;                   //Khai báo biến với TS cho phép chỉ định kiểu cụ thể
console.log('Xin chào, ' + fullName);

76 khai báo

var fullName: string;                   //Khai báo biến với TS cho phép chỉ định kiểu cụ thể
console.log('Xin chào, ' + fullName);

16

Như vậy mô-đun đầu ra có 3 thành phần, lúc này ở tệp khác, nếu muốn sử dụng 3 thành phần này thì khai báo với nhập khẩu

var fullName: string;                   //Khai báo biến với TS cho phép chỉ định kiểu cụ thể
console.log('Xin chào, ' + fullName);

17

You can load all the components

var fullName: string;                   //Khai báo biến với TS cho phép chỉ định kiểu cụ thể
console.log('Xin chào, ' + fullName);

18

Không gian tên giống như C#, PHP. to tránh xung đột về tên. You can could show the layer, function. to an namespace do you set ví dụ