Cho trong chỉ mục javascript đối tượng

Question

Trong JavaScript, cách cơ bản mà chúng ta nhóm và truyền dữ liệu là thông qua các đối tượng. Trong TypeScript, chúng tôi đại diện cho những thứ đó thông qua các loại đối tượng

Nội dung chính Show

Công cụ sửa đổi thuộc tính
Thuộc tính tùy chọn
Thuộc tính tsfunction paintShape(opts: PaintOptions) { let xPos = opts.xPos === undefined ? 0 : opts.xPos; let xPos: number let yPos = opts.yPos === undefined ? 0 : opts.yPos; let yPos: number // ...}Try40
Chữ ký chỉ mục
Mở rộng các loại
Các loại giao lộ
Giao diện so với. Giao lộ
Các loại đối tượng chung
Loại tsinterface Person { name: string; age: number;} function greet(person: Person) { return "Hello " + person.name;}Try56
Loại tsinterface Person { name: string; age: number;} function greet(person: Person) { return "Hello " + person.name;}Try70
Loại Tuple
tsfunction paintShape(opts: PaintOptions) { let xPos = opts.xPos === undefined ? 0 : opts.xPos; let xPos: number let yPos = opts.yPos === undefined ? 0 : opts.yPos; let yPos: number // ...}Try40 Loại Tuple
Bạn có thể lập chỉ mục một đối tượng JavaScript không?
Bạn có thể sử dụng vòng lặp for trên một đối tượng không?
Đối tượng [] trong JavaScript là gì?

Như chúng ta đã thấy, họ có thể ẩn danh

ts
function greet(person: { name: string; age: number }) {
  return "Hello " + person.name;
}
Try

hoặc chúng có thể được đặt tên bằng cách sử dụng giao diện

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

hoặc một bí danh loại

ts
type Person = {
  name: string;
  age: number;
};
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

Trong cả ba ví dụ trên, chúng ta đã viết các hàm lấy các đối tượng chứa thuộc tính

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

4 (phải là một

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

5) và

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

6 (phải là một

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

7)

Công cụ sửa đổi thuộc tính

Mỗi thuộc tính trong một loại đối tượng có thể chỉ định một vài điều. loại, liệu thuộc tính có phải là tùy chọn hay không và liệu thuộc tính có thể được ghi vào

Thuộc tính tùy chọn

Phần lớn thời gian, chúng ta sẽ thấy mình đang xử lý các đối tượng có thể có một bộ thuộc tính. Trong những trường hợp đó, chúng ta có thể đánh dấu các thuộc tính đó là tùy chọn bằng cách thêm dấu chấm hỏi (

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

8) vào cuối tên của chúng

________số 8

Trong ví dụ này, cả

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

9 và

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

00 đều được coi là tùy chọn. Chúng tôi có thể chọn cung cấp một trong số chúng, vì vậy mọi cuộc gọi ở trên tới

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

01 đều hợp lệ. Tất cả các tùy chọn thực sự nói là nếu thuộc tính được đặt, thì tốt hơn là nên có một loại cụ thể

Chúng tôi cũng có thể đọc từ các thuộc tính đó - nhưng khi chúng tôi thực hiện theo

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

02, TypeScript sẽ cho chúng tôi biết chúng có khả năng là

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

03

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

4

Trong JavaScript, ngay cả khi thuộc tính chưa bao giờ được đặt, chúng tôi vẫn có thể truy cập thuộc tính đó - nó sẽ cung cấp cho chúng tôi giá trị

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

03. Chúng tôi chỉ có thể xử lý

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

03 đặc biệt

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

Lưu ý rằng mẫu cài đặt mặc định này cho các giá trị không xác định phổ biến đến mức JavaScript có cú pháp để hỗ trợ nó

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

0

Ở đây, chúng tôi đã sử dụng mẫu phá hủy cho tham số của

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

01 và cung cấp các giá trị mặc định cho

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

9 và

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

00. Bây giờ

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

9 và

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

00 đều chắc chắn có mặt trong phần thân của

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

01, nhưng tùy chọn đối với bất kỳ người gọi nào tới

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

01

Lưu ý rằng hiện tại không có cách nào để đặt chú thích loại trong các mẫu phá hủy. Điều này là do cú pháp sau đã có ý nghĩa khác trong JavaScript

ts
type Person = {
  name: string;
  age: number;
};
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

6

Trong một mẫu phá hủy đối tượng,

ts
type Person = {
  name: string;
  age: number;
};
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

63 có nghĩa là “lấy thuộc tính

ts
type Person = {
  name: string;
  age: number;
};
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

64 và xác định lại nó cục bộ dưới dạng một biến có tên là

ts
type Person = {
  name: string;
  age: number;
};
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

65. Tương tự,

ts
type Person = {
  name: string;
  age: number;
};
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

66 tạo một biến có tên là

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

7 có giá trị dựa trên tham số

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

9

Sử dụng công cụ sửa đổi ánh xạ, bạn có thể xóa thuộc tính

ts
type Person = {
  name: string;
  age: number;
};
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

69

Thuộc tính tsfunction paintShape(opts: PaintOptions) { let xPos = opts.xPos === undefined ? 0 : opts.xPos; let xPos: number let yPos = opts.yPos === undefined ? 0 : opts.yPos; let yPos: number // ...}Try40

Các thuộc tính cũng có thể được đánh dấu là

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

40 cho TypeScript. Mặc dù nó sẽ không thay đổi bất kỳ hành vi nào trong thời gian chạy, nhưng một thuộc tính được đánh dấu là

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

40 không thể được ghi vào trong quá trình kiểm tra loại

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

4

Việc sử dụng công cụ sửa đổi

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

40 không nhất thiết ngụ ý rằng một giá trị là hoàn toàn bất biến - hay nói cách khác, nội dung bên trong của nó không thể thay đổi. Nó chỉ có nghĩa là bản thân thuộc tính không thể được viết lại thành

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

9

Điều quan trọng là quản lý kỳ vọng về những gì

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

40 ngụ ý. Sẽ rất hữu ích khi báo hiệu ý định trong thời gian phát triển TypeScript về cách sử dụng một đối tượng. TypeScript không tính đến việc liệu các thuộc tính trên hai loại có phải là

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

40 hay không khi kiểm tra xem các loại đó có tương thích hay không, do đó, các thuộc tính của

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

40 cũng có thể thay đổi thông qua răng cưa

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

0

Sử dụng công cụ sửa đổi ánh xạ, bạn có thể xóa thuộc tính

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

40

Chữ ký chỉ mục

Đôi khi bạn không biết trước tất cả tên của các thuộc tính của một loại, nhưng bạn biết hình dạng của các giá trị

Trong những trường hợp đó, bạn có thể sử dụng chữ ký chỉ mục để mô tả các loại giá trị có thể, ví dụ:

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

1

Ở trên, chúng tôi có giao diện

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

48 có chữ ký chỉ mục. Chữ ký chỉ mục này nói rằng khi một

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

48 được lập chỉ mục với một

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

7, nó sẽ trả về một

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

5

Chỉ một số loại được phép cho thuộc tính chữ ký chỉ mục.

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

5,

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

7,

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

94, các mẫu chuỗi mẫu và các kiểu kết hợp chỉ bao gồm các mẫu này

Có thể hỗ trợ cả hai loại chỉ mục

Có thể hỗ trợ cả hai loại bộ chỉ mục, nhưng loại được trả về từ bộ chỉ mục số phải là kiểu con của loại được trả về từ bộ chỉ mục chuỗi. Điều này là do khi lập chỉ mục với một

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

7, JavaScript sẽ thực sự chuyển đổi nó thành một

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

5 trước khi lập chỉ mục thành một đối tượng. Điều đó có nghĩa là lập chỉ mục với

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

97 (a

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

7) cũng giống như lập chỉ mục với

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

99 (a

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

5), vì vậy cả hai cần nhất quán

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

2

Mặc dù chữ ký chỉ mục chuỗi là một cách hiệu quả để mô tả mẫu “từ điển”, nhưng chúng cũng buộc tất cả các thuộc tính khớp với kiểu trả về của chúng. Điều này là do một chỉ mục chuỗi tuyên bố rằng

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

01 cũng có sẵn dưới dạng

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

02. Trong ví dụ sau, loại của

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

4 không khớp với loại của chỉ mục chuỗi và trình kiểm tra loại đưa ra lỗi

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

3

Tuy nhiên, các thuộc tính của các loại khác nhau được chấp nhận nếu chữ ký chỉ mục là sự kết hợp của các loại thuộc tính

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

4

Cuối cùng, bạn có thể tạo chữ ký chỉ mục

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

40 để ngăn việc gán cho chỉ mục của chúng

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

5

Bạn không thể đặt

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

05 vì chữ ký chỉ mục là

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

40

Mở rộng các loại

Việc có các loại có thể là phiên bản cụ thể hơn của các loại khác là điều khá phổ biến. Ví dụ: chúng tôi có thể có loại

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

07 mô tả các trường cần thiết để gửi thư và gói hàng ở Hoa Kỳ. S

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

6

Trong một số trường hợp như vậy là đủ, nhưng các địa chỉ thường có một số đơn vị được liên kết với chúng nếu tòa nhà tại một địa chỉ có nhiều đơn vị. Sau đó chúng ta có thể mô tả một

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

08

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

7

Điều này thực hiện công việc, nhưng nhược điểm ở đây là chúng tôi phải lặp lại tất cả các trường khác từ

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

07 khi các thay đổi của chúng tôi hoàn toàn là phụ gia. Thay vào đó, chúng tôi có thể mở rộng loại

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

07 ban đầu và chỉ cần thêm các trường mới duy nhất cho

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

08

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

8

Từ khóa

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

12 trên một

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

13 cho phép chúng tôi sao chép thành viên từ các loại được đặt tên khác một cách hiệu quả và thêm bất kỳ thành viên mới nào mà chúng tôi muốn. Điều này có thể hữu ích để cắt giảm số lượng bản mẫu khai báo kiểu mà chúng ta phải viết và để báo hiệu ý định rằng một số khai báo khác nhau của cùng một thuộc tính có thể liên quan. Ví dụ:

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

08 không cần lặp lại thuộc tính

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

15 và vì

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

15 bắt nguồn từ

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

07, người đọc sẽ biết rằng hai loại đó có liên quan theo một cách nào đó

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

13 cũng có thể mở rộng từ nhiều loại

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

9

Các loại giao lộ

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

13 cho phép chúng tôi xây dựng các loại mới từ các loại khác bằng cách mở rộng chúng. TypeScript cung cấp một cấu trúc khác được gọi là các kiểu giao nhau, chủ yếu được sử dụng để kết hợp các kiểu đối tượng hiện có

Loại giao lộ được xác định bằng toán tử

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

20

ts
type Person = {
  name: string;
  age: number;
};
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

0

Ở đây, chúng tôi đã giao nhau giữa

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

21 và

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

22 để tạo ra một loại mới có tất cả các thành viên của

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

21 và

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

22

ts
type Person = {
  name: string;
  age: number;
};
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

1

Giao diện so với. Giao lộ

Chúng tôi vừa xem xét hai cách để kết hợp các loại tương tự nhau, nhưng thực sự khác nhau một cách tinh tế. Với các giao diện, chúng tôi có thể sử dụng mệnh đề

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

12 để mở rộng từ các loại khác và chúng tôi có thể làm điều gì đó tương tự với các giao lộ và đặt tên cho kết quả bằng bí danh loại. Sự khác biệt về nguyên tắc giữa hai loại là cách xử lý xung đột và sự khác biệt đó thường là một trong những lý do chính khiến bạn chọn cái này hơn cái kia giữa giao diện và bí danh loại của loại giao lộ

Các loại đối tượng chung

Hãy tưởng tượng một loại

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

26 có thể chứa bất kỳ giá trị nào -

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

5,

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

7,

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

29, bất kỳ giá trị nào

ts
type Person = {
  name: string;
  age: number;
};
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

2

Ngay bây giờ, thuộc tính

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

30 được nhập là

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

31, hoạt động nhưng có thể dẫn đến tai nạn sau này

Thay vào đó, chúng tôi có thể sử dụng

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

32, nhưng điều đó có nghĩa là trong trường hợp chúng tôi đã biết loại

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

30, chúng tôi cần thực hiện kiểm tra phòng ngừa hoặc sử dụng các xác nhận loại dễ bị lỗi

ts
type Person = {
  name: string;
  age: number;
};
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

3

Thay vào đó, một cách tiếp cận an toàn sẽ là tạo ra các loại

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

26 khác nhau cho mọi loại

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

30

ts
type Person = {
  name: string;
  age: number;
};
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

4

Nhưng điều đó có nghĩa là chúng ta sẽ phải tạo các chức năng khác nhau hoặc quá tải các chức năng để hoạt động trên các loại này

ts
type Person = {
  name: string;
  age: number;
};
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

5

Đó là rất nhiều nồi hơi. Hơn nữa, sau này chúng ta có thể cần giới thiệu các loại và quá tải mới. Điều này thật khó chịu, vì các loại hộp và quá tải của chúng tôi đều giống nhau

Thay vào đó, chúng ta có thể tạo một loại

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

26 chung khai báo một tham số loại

ts
type Person = {
  name: string;
  age: number;
};
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

6

Bạn có thể đọc điều này là “Một

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

26 của

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

38 là thứ mà

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

30 có loại

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

38”. Sau này, khi chúng ta đề cập đến ________ 126, chúng ta phải đưa ra một đối số loại thay cho ________ 138

ts
type Person = {
  name: string;
  age: number;
};
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

7

Hãy nghĩ về

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

26 như một mẫu cho một loại thực, trong đó

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

38 là một trình giữ chỗ sẽ được thay thế bằng một số loại khác. Khi TypeScript nhìn thấy

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

45, nó sẽ thay thế mọi phiên bản của

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

38 trong

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

47 bằng

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

5 và kết thúc hoạt động với thứ gì đó như

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

49. Nói cách khác,

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

45 và

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

51 trước đây của chúng tôi hoạt động giống hệt nhau

ts
type Person = {
  name: string;
  age: number;
};
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

8

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

26 có thể tái sử dụng trong đó

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

38 có thể được thay thế bằng bất kỳ thứ gì. Điều đó có nghĩa là khi chúng tôi cần một hộp cho một loại mới, chúng tôi không cần phải khai báo một loại

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

26 mới (mặc dù chúng tôi chắc chắn có thể nếu chúng tôi muốn)

ts
type Person = {
  name: string;
  age: number;
};
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

9

Điều này cũng có nghĩa là chúng ta có thể tránh hoàn toàn tình trạng quá tải bằng cách sử dụng các hàm chung chung.

ts
interface PaintOptions {
  shape: Shape;
  xPos?: number;
  yPos?: number;
}
 
function paintShape(opts: PaintOptions) {
  // ...
}
 
const shape = getShape();
paintShape({ shape });
paintShape({ shape, xPos: 100 });
paintShape({ shape, yPos: 100 });
paintShape({ shape, xPos: 100, yPos: 100 });
Try

0

Điều đáng chú ý là bí danh loại cũng có thể chung chung. Chúng tôi có thể đã xác định giao diện

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

47 mới của mình, đó là

ts
type Person = {
  name: string;
  age: number;
};
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

6

bằng cách sử dụng bí danh loại thay thế

ts
interface PaintOptions {
  shape: Shape;
  xPos?: number;
  yPos?: number;
}
 
function paintShape(opts: PaintOptions) {
  // ...
}
 
const shape = getShape();
paintShape({ shape });
paintShape({ shape, xPos: 100 });
paintShape({ shape, yPos: 100 });
paintShape({ shape, xPos: 100, yPos: 100 });
Try

2

Vì bí danh loại, không giống như giao diện, có thể mô tả nhiều thứ hơn là chỉ các loại đối tượng, chúng ta cũng có thể sử dụng chúng để viết các loại trợ giúp chung khác.

ts
interface PaintOptions {
  shape: Shape;
  xPos?: number;
  yPos?: number;
}
 
function paintShape(opts: PaintOptions) {
  // ...
}
 
const shape = getShape();
paintShape({ shape });
paintShape({ shape, xPos: 100 });
paintShape({ shape, yPos: 100 });
paintShape({ shape, xPos: 100, yPos: 100 });
Try

3

Chúng tôi sẽ quay lại để nhập bí danh chỉ trong giây lát

Loại tsinterface Person { name: string; age: number;} function greet(person: Person) { return "Hello " + person.name;}Try56

Các loại đối tượng chung thường là một số loại bộ chứa hoạt động độc lập với loại phần tử mà chúng chứa. Thật lý tưởng cho các cấu trúc dữ liệu hoạt động theo cách này để chúng có thể tái sử dụng trên các loại dữ liệu khác nhau

Hóa ra chúng tôi đã làm việc với một loại giống như vậy trong suốt cuốn sổ tay này. loại

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

56. Bất cứ khi nào chúng tôi viết ra các loại như

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

58 hoặc

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

59, đó thực sự chỉ là cách viết tắt của

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

60 và

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

61

ts
interface PaintOptions {
  shape: Shape;
  xPos?: number;
  yPos?: number;
}
 
function paintShape(opts: PaintOptions) {
  // ...
}
 
const shape = getShape();
paintShape({ shape });
paintShape({ shape, xPos: 100 });
paintShape({ shape, yPos: 100 });
paintShape({ shape, xPos: 100, yPos: 100 });
Try

4

Giống như loại

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

26 ở trên, bản thân

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

56 là một loại chung

ts
interface PaintOptions {
  shape: Shape;
  xPos?: number;
  yPos?: number;
}
 
function paintShape(opts: PaintOptions) {
  // ...
}
 
const shape = getShape();
paintShape({ shape });
paintShape({ shape, xPos: 100 });
paintShape({ shape, yPos: 100 });
paintShape({ shape, xPos: 100, yPos: 100 });
Try

5

JavaScript hiện đại cũng cung cấp các cấu trúc dữ liệu chung chung khác, như

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

64,

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

65 và

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

66. Tất cả điều này thực sự có nghĩa là do cách hoạt động của

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

67,

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

68 và

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

69, chúng có thể hoạt động với bất kỳ bộ loại nào

Loại tsinterface Person { name: string; age: number;} function greet(person: Person) { return "Hello " + person.name;}Try70

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

70 là một loại đặc biệt mô tả các mảng không nên thay đổi

ts
interface PaintOptions {
  shape: Shape;
  xPos?: number;
  yPos?: number;
}
 
function paintShape(opts: PaintOptions) {
  // ...
}
 
const shape = getShape();
paintShape({ shape });
paintShape({ shape, xPos: 100 });
paintShape({ shape, yPos: 100 });
paintShape({ shape, xPos: 100, yPos: 100 });
Try

6

Giống như công cụ sửa đổi

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

40 cho các thuộc tính, nó chủ yếu là một công cụ chúng ta có thể sử dụng cho mục đích. Khi chúng ta thấy một hàm trả về các giá trị của

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

70, nó cho chúng ta biết rằng chúng ta không có ý định thay đổi nội dung và khi chúng ta thấy một hàm tiêu tốn các giá trị của

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

70, nó cho chúng ta biết rằng chúng ta có thể chuyển bất kỳ mảng nào vào hàm đó mà không cần lo lắng rằng nó

Không giống như

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

56, không có hàm tạo

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

70 nào mà chúng ta có thể sử dụng

ts
interface PaintOptions {
  shape: Shape;
  xPos?: number;
  yPos?: number;
}
 
function paintShape(opts: PaintOptions) {
  // ...
}
 
const shape = getShape();
paintShape({ shape });
paintShape({ shape, xPos: 100 });
paintShape({ shape, yPos: 100 });
paintShape({ shape, xPos: 100, yPos: 100 });
Try

7

Thay vào đó, chúng ta có thể gán các

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

56 thông thường cho các

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

70

ts
interface PaintOptions {
  shape: Shape;
  xPos?: number;
  yPos?: number;
}
 
function paintShape(opts: PaintOptions) {
  // ...
}
 
const shape = getShape();
paintShape({ shape });
paintShape({ shape, xPos: 100 });
paintShape({ shape, yPos: 100 });
paintShape({ shape, xPos: 100, yPos: 100 });
Try

8

Giống như TypeScript cung cấp cú pháp tốc ký cho

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

79 với

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

80, nó cũng cung cấp cú pháp tốc ký cho

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

81 với

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

82

ts
interface PaintOptions {
  shape: Shape;
  xPos?: number;
  yPos?: number;
}
 
function paintShape(opts: PaintOptions) {
  // ...
}
 
const shape = getShape();
paintShape({ shape });
paintShape({ shape, xPos: 100 });
paintShape({ shape, yPos: 100 });
paintShape({ shape, xPos: 100, yPos: 100 });
Try

9

Một điều cuối cùng cần lưu ý là không giống như công cụ sửa đổi thuộc tính

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

40, khả năng gán không phải là hai chiều giữa các

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

56 và

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

70 thông thường

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

40

Loại Tuple

Loại tuple là một loại khác của loại

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

56 biết chính xác nó chứa bao nhiêu phần tử và chính xác loại nó chứa ở các vị trí cụ thể

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

41

Ở đây,

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

87 là một kiểu tuple của

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

5 và

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

7. Giống như

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

70, nó không có đại diện trong thời gian chạy, nhưng rất quan trọng đối với TypeScript. Đối với hệ thống loại,

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

87 mô tả các mảng có chỉ mục

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

92 chứa

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

5 và chỉ mục

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

94 có chứa một

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

7

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

42

Nếu chúng tôi cố gắng lập chỉ mục vượt quá số phần tử, chúng tôi sẽ gặp lỗi

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

43

Chúng ta cũng có thể hủy cấu trúc các bộ dữ liệu bằng cách sử dụng tính năng hủy mảng của JavaScript

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

44

Các loại Tuple rất hữu ích trong các API dựa trên quy ước nặng nề, trong đó ý nghĩa của từng phần tử là “rõ ràng”. Điều này cho phép chúng tôi linh hoạt trong bất cứ điều gì chúng tôi muốn đặt tên cho các biến của mình khi chúng tôi hủy cấu trúc chúng. Trong ví dụ trên, chúng ta có thể đặt tên các phần tử
ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try
92 và
ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try
94 theo bất cứ thứ gì chúng ta muốn
Tuy nhiên, vì không phải mọi người dùng đều có cùng quan điểm về những gì hiển nhiên, nên có thể đáng để xem xét lại việc sử dụng các đối tượng có tên thuộc tính mô tả có thể tốt hơn cho API của bạn hay không

Khác với các kiểm tra độ dài đó, các loại bộ dữ liệu đơn giản như thế này tương đương với các loại là phiên bản của

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

56 khai báo các thuộc tính cho các chỉ mục cụ thể và khai báo

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

99 với loại chữ số

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

45

Một điều khác mà bạn có thể quan tâm là các bộ dữ liệu có thể có các thuộc tính tùy chọn bằng cách viết ra một dấu chấm hỏi (

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

8 sau kiểu của phần tử). Các phần tử tuple tùy chọn chỉ có thể xuất hiện ở cuối và cũng ảnh hưởng đến loại

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

99

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

46

Các bộ cũng có thể có các phần tử còn lại, các phần tử này phải là kiểu mảng/bộ

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

47

ts
type Person = {
  name: string;
  age: number;
};
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

02 mô tả một bộ có hai phần tử đầu tiên lần lượt là

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

5 và

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

7, nhưng có thể có bất kỳ số lượng

ts
type Person = {
  name: string;
  age: number;
};
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

05 nào theo sau

ts
type Person = {
  name: string;
  age: number;
};
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

06 mô tả một tuple có phần tử đầu tiên là

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

5 và sau đó là một số lượng bất kỳ của các

ts
type Person = {
  name: string;
  age: number;
};
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

05 và kết thúc bằng một

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

7

ts
type Person = {
  name: string;
  age: number;
};
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

10 mô tả một bộ dữ liệu có các phần tử bắt đầu là một số lượng bất kỳ các

ts
type Person = {
  name: string;
  age: number;
};
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

05 và kết thúc bằng một

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

5 sau đó là một

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

7

Một bộ có phần tử còn lại không có “độ dài” cố định - nó chỉ có một tập hợp các phần tử nổi tiếng ở các vị trí khác nhau

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

48

Tại sao các phần tử tùy chọn và phần còn lại có thể hữu ích? . Các loại bộ dữ liệu có thể được sử dụng trong các tham số và đối số còn lại, sao cho sau đây

ts
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

49

về cơ bản là tương đương với

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

0

Điều này rất hữu ích khi bạn muốn lấy một số đối số có thể thay đổi với tham số còn lại và bạn cần số lượng phần tử tối thiểu, nhưng bạn không muốn giới thiệu các biến trung gian

tsfunction paintShape(opts: PaintOptions) { let xPos = opts.xPos === undefined ? 0 : opts.xPos; let xPos: number let yPos = opts.yPos === undefined ? 0 : opts.yPos; let yPos: number // ...}Try40 Loại Tuple

Một lưu ý cuối cùng về các loại bộ dữ liệu - các loại bộ dữ liệu có các biến thể

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

40 và có thể được chỉ định bằng cách dán công cụ sửa đổi

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

40 trước chúng - giống như với cú pháp tốc ký mảng

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

1

Như bạn có thể mong đợi, việc ghi vào bất kỳ thuộc tính nào của bộ dữ liệu

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

40 không được phép trong TypeScript

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

2

Các bộ dữ liệu có xu hướng được tạo và không được sửa đổi trong hầu hết các mã, do đó, các loại chú thích là bộ dữ liệu

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

40 khi có thể là một mặc định tốt. Điều này cũng rất quan trọng vì các ký tự mảng với các xác nhận

ts
type Person = {
  name: string;
  age: number;
};
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

19 sẽ được suy ra với các loại bộ dữ liệu

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

40

ts
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
       let xPos: number
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
       let yPos: number
  // ...
}
Try

3

Ở đây,

ts
type Person = {
  name: string;
  age: number;
};
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

21 không bao giờ sửa đổi các phần tử của nó, nhưng mong đợi một bộ có thể thay đổi. Vì loại của

ts
type Person = {
  name: string;
  age: number;
};
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

22 được suy ra là

ts
type Person = {
  name: string;
  age: number;
};
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

23, nên nó sẽ không tương thích với

ts
type Person = {
  name: string;
  age: number;
};
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

24 vì loại đó không thể đảm bảo các phần tử của

ts
type Person = {
  name: string;
  age: number;
};
 
function greet(person: Person) {
  return "Hello " + person.name;
}
Try

22 sẽ không bị đột biến

Bạn có thể lập chỉ mục một đối tượng JavaScript không?

Để tìm chỉ mục của một đối tượng trong một mảng, theo một thuộc tính cụ thể. Sử dụng phương thức map() để lặp lại mảng, chỉ trả về giá trị của thuộc tính liên quan. Gọi phương thức indexOf() trên mảng bản đồ trả về . Phương thức indexOf trả về chỉ số của lần xuất hiện đầu tiên của một giá trị trong một mảng.

Bạn có thể sử dụng vòng lặp for trên một đối tượng không?

Nếu bạn có một mảng được coi là một đối tượng trong javascript, bạn không thể lặp qua mảng bằng map(), forEach() hoặc for. của vòng lặp .

Đối tượng [] trong JavaScript là gì?

Trong JavaScript, một đối tượng là một thực thể độc lập, có thuộc tính và loại . So sánh nó với một cái cốc chẳng hạn. Một cái cốc là một đối tượng, với các thuộc tính. Một chiếc cốc có màu sắc, kiểu dáng, trọng lượng, chất liệu làm ra nó, v.v.

programming javascript