Truy cập TypeScript và ký hiệu chấm cho các đối tượng

Question

Nếu TypeScript là một siêu lớn của JavaScript, tại sao ký hiệu chấm trên một đối tượng tùy ý sai? Tôi có mã JS mà tôi muốn chuyển đổi sang TS để có loại an toàn tốt hơn, nhưng tất cả truy cập sử dụng ký pháp chấm (ví dụ: myObj.thing) sẽ cho tôi lỗi Property 'thing' does not exist on type '{}'.. Nó hoạt động đúng khi tôi sử dụng ký hiệu khung (ví dụ: myObj['thing']).

Answer 1

x không giữ bất cứ tài sản đặt tên bar vì vậy bạn cần tạo ra nó trong các đối tượng:

function foobar() { 
    var x = { 

     foo: 'foo', 
     bar: 'bar' 
    } 

    return x; 
} 

alert(foobar().bar); //returns bar 

Answer 2

mwilson đến đó trước khi tôi có thể! ;)

Trong mã ở trên, Loại bản ghi không thể xác định đối tượng x cho thấy thuộc tính được gọi là bar do đó không thể giải quyết khi hiển thị Intellisense.

Thay vào đó, thêm foo, bar, vv như các thuộc tính của đối tượng riêng của mình:

var x = { 
    foo: "FOO", 
    bar: "BAR" 
}; 

Sau đó, khi sử dụng Typescript Playground, bạn sẽ có thấy công việc Intellisense như mong đợi:

HTH

Answer 3

Tôi biết bạn nói điều này là lạ, nhưng đây là một o f những lý do chính TypeScript tồn tại. Lỗi này giúp ngăn chặn vô tình thiết lập hoặc nhận các thuộc tính không tồn tại trên một đối tượng.

Ngay bây giờ, như trình biên dịch là nói cho bạn, tài sản bar không tồn tại trên x vì nó đã được ngầm gõ để {} khi viết var x = {};.

Bạn có thể nói với trình biên dịch rằng x có hơn không tính bằng cách định nghĩa một cách rõ ràng các loại:

var x: { foo?: string; bar?: string; } = {}; 

Bây giờ bạn có thể nhận hoặc thiết lập x.foo và x.bar mà không trình biên dịch phàn nàn. Trong hầu hết các trường hợp, bạn sẽ di chuyển này vào một giao diện như sau:

interface IFooBar { 
    foo?: string; 
    bar?: string; 
} 

var x: IFooBar = {}; 

x.foo = "asdf"; // ok 
x.test = "asdf"; // error, as it should be 

Một số người được giới thiệu bạn cast để any, nhưng không nhận được lười biếng. Bạn nên tận dụng toàn bộ hệ thống kiểu TypeScript cung cấp. Làm như vậy chắc chắn sẽ giúp bạn tiết kiệm thời gian khi bạn duy trì một ứng dụng.

Answer 4

Do tính chất mạnh mẽ, đánh máy của nguyên cảo Object, bạn có thể sử dụng "bất kỳ" để làm cho nó không định kiểu:

var x: any = {}; 
x.bar = "bar"; /// ok 

Nếu những gì bạn cần là để xác định loại tài sản theo nghĩa đen

var x: { [index: string]: TypeA } = {}; 

thì x["bar"] bây giờ chỉ có thể là phiên bản của TypeA.

Answer 5

Cá nhân tôi muốn chỉ định các loại bất cứ khi nào tôi có cơ hội.

Lưu ý rằng bạn chỉ có thể khởi tạo biến này với {} nếu bạn xác định các trường là tùy chọn với toán tử ?:.

let x: {foo?: string, bar?: string} = {}; 
x.foo = 'foo'; 
x.bar = 'bar'; 

Như những người khác đã nói, nếu bạn dự định sử dụng loại này nhiều lần, có thể tốt hơn là tạo lớp học rõ ràng cho nó.

PS: tốt hơn nên sử dụng let thay vì var khi lập trình ở dạng số. (Ví dụ phạm vi của một tuyên bố var là một chút kỳ quặc, so với một let mà làm những gì bạn mong đợi nó để làm.)