Định nghĩa kiểu trong đối tượng bằng chữ trong TypeScript

Trong các lớp TypeScript, có thể khai báo các kiểu cho các thuộc tính, ví dụ:

class className {
  property: string;
};

Làm thế nào để khai báo loại tài sản trong một đối tượng theo nghĩa đen?

Tôi đã thử mã sau đây nhưng nó không biên dịch:

var obj = {
  property: string;
};

Tôi nhận được lỗi sau:

Tên 'chuỗi' không tồn tại trong phạm vi hiện tại

Tôi đang làm gì đó sai hay đây là một lỗi?

Bạn khá gần, bạn chỉ cần thay thế =bằng a :. Bạn có thể sử dụng một loại đối tượng bằng chữ (xem phần spec 3.5.3) hoặc một giao diện. Sử dụng một loại đối tượng theo nghĩa đen gần với những gì bạn có:

var obj: { property: string; } = { property: "foo" };

Nhưng bạn cũng có thể sử dụng một giao diện

interface MyObjLayout {
    property: string;
}

var obj: MyObjLayout = { property: "foo" };

Cập nhật 2019-05-15 (Mẫu mã được cải tiến thay thế)

Sau nhiều năm sử dụng constvà hưởng lợi từ nhiều mã chức năng hơn, tôi sẽ khuyên bạn không nên sử dụng phần dưới đây trong hầu hết các trường hợp. (Khi xây dựng các đối tượng, việc buộc hệ thống loại thành một loại cụ thể thay vì để nó suy ra các loại thường là một dấu hiệu cho thấy có gì đó không đúng).

Thay vào đó, tôi khuyên bạn nên sử dụng constcác biến càng nhiều càng tốt và sau đó soạn đối tượng làm bước cuối cùng:

const id = GetId();
const hasStarted = true;
...
const hasFinished = false;
...
return {hasStarted, hasFinished, id};

• Điều này sẽ gõ đúng mọi thứ mà không cần gõ rõ ràng.
• Không cần phải gõ lại tên trường.
• Điều này dẫn đến mã sạch nhất từ ​​kinh nghiệm của tôi.
• Điều này cho phép trình biên dịch cung cấp xác minh trạng thái nhiều hơn (ví dụ: nếu bạn quay lại ở nhiều vị trí, trình biên dịch sẽ đảm bảo cùng một loại đối tượng luôn được trả về - điều này khuyến khích bạn khai báo toàn bộ giá trị trả về tại mỗi vị trí - cho thấy rõ ràng hoàn toàn ý định của giá trị đó).

Bổ sung 2020-02-26

Nếu bạn thực sự cần một loại mà bạn có thể được khởi tạo một cách lười biếng: Đánh dấu nó là một loại kết hợp nullable (null hoặc Type). Hệ thống loại sẽ ngăn bạn sử dụng nó mà không đảm bảo trước tiên nó có giá trị.

Trong tsconfig.json, đảm bảo bạn kích hoạt kiểm tra null nghiêm ngặt:

"strictNullChecks": true

Sau đó sử dụng mẫu này và cho phép hệ thống loại bảo vệ bạn khỏi quyền truy cập vô tình / không xác định:

const state = {
    instance: null as null | ApiService,
    // OR
    // instance: undefined as undefined | ApiService,

};

const useApi = () => {
    // If I try to use it here, the type system requires a safe way to access it

    // Simple lazy-initialization 
    const api = state?.instance ?? (state.instance = new ApiService());
    api.fun();

    // Also here are some ways to only access it if it has value:

    // The 'right' way: Typescript 3.7 required
    state.instance?.fun();

    // Or the old way: If you are stuck before Typescript 3.7
    state.instance && state.instance.fun();

    // Or the long winded way because the above just feels weird
    if (state.instance) { state.instance.fun(); }

    // Or the I came from C and can't check for nulls like they are booleans way
    if (state.instance != null) { state.instance.fun(); }

    // Or the I came from C and can't check for nulls like they are booleans 
    // AND I was told to always use triple === in javascript even with null checks way
    if (state.instance !== null && state.instance !== undefined) { state.instance.fun(); }
};

class ApiService {
    fun() {
        // Do something useful here
    }
}

Không làm như sau trong 99% trường hợp:

Cập nhật 2016 / 02-10 - Để xử lý TSX (Cảm ơn @Josh)

Sử dụng astoán tử cho TSX.

var obj = {
    property: null as string
};

Một ví dụ dài hơn:

var call = {
    hasStarted: null as boolean,
    hasFinished: null as boolean,
    id: null as number,
};

Câu trả lời gốc

Sử dụng toán tử cast để tạo ra súc tích này (bằng cách chuyển null thành loại mong muốn).

var obj = {
    property: <string> null
};

Một ví dụ dài hơn:

var call = {
    hasStarted: <boolean> null,
    hasFinished: <boolean> null,
    id: <number> null,
};

Điều này tốt hơn nhiều so với việc có hai phần (một phần để khai báo các loại, phần thứ hai để khai báo mặc định):

var callVerbose: {
    hasStarted: boolean;
    hasFinished: boolean;
    id: number;
} = {
    hasStarted: null,
    hasFinished: null,
    id: null,
};

Tôi ngạc nhiên khi không ai nhắc đến điều này nhưng bạn chỉ có thể tạo một giao diện được gọi là ObjectLiteralchấp nhậnkey: value các cặp loại string: any:

interface ObjectLiteral {
  [key: string]: any;
}

Sau đó, bạn sẽ sử dụng nó, như thế này:

let data: ObjectLiteral = {
  hello: "world",
  goodbye: 1,
  // ...
};

Một phần thưởng bổ sung là bạn có thể sử dụng lại giao diện này nhiều lần nếu bạn cần, trên bao nhiêu đối tượng bạn muốn.

Chúc may mắn.

Nếu bạn đang cố gắng viết một chú thích kiểu, cú pháp là:

var x: { property: string; } = ...;

Nếu bạn đang cố gắng viết một đối tượng bằng chữ, cú pháp là:

var x = { property: 'hello' };

Mã của bạn đang cố gắng sử dụng tên loại ở vị trí giá trị.

Trong TypeScript nếu chúng ta khai báo đối tượng thì chúng ta sẽ sử dụng cú pháp sau:

[access modifier] variable name : { /* structure of object */ }

Ví dụ:

private Object:{ Key1: string, Key2: number }

Nếu bạn đang cố gắng thêm các kiểu chữ vào một đối tượng bị phá hủy theo nghĩa đen, ví dụ như trong các đối số cho một hàm, cú pháp là:

function foo({ bar, baz }: { bar: boolean, baz: string }) {
  // ...
}

foo({ bar: true, baz: 'lorem ipsum' });

Nếu thuộc tính của bạn có cùng loại, bạn có thể sử dụng loại tiện ích được xác định trước Record:

type Keys = "property" | "property2"

var obj: Record<Keys, string> = {
  property: "my first prop",
  property2: "my second prop",
};

Tất nhiên bạn có thể đi xa hơn và xác định loại tùy chỉnh cho các giá trị thuộc tính của bạn:

type Keys = "property" | "property2"
type Value = "my prop" | "my other allowed prop"

var obj: Record<Keys, Value> = {
  property: "my prop",
  property2: "my second prop", // TS Error: Type '"my second prop"' is not assignable to type 'Value'.
};

// Use ..

const Per = {
  name: 'HAMZA',
  age: 20,
  coords: {
    tele: '09',
    lan: '190'
  },
  setAge(age: Number): void {
    this.age = age;
  },
  getAge(): Number {
    return age;
  }
};
const { age, name }: { age: Number; name: String } = Per;
const {
  coords: { tele, lan }
}: { coords: { tele: String; lan: String } } = Per;

console.log(Per.getAge());

Trong mã của bạn:

var obj = {
  myProp: string;
};

Bạn đang thực sự tạo một đối tượng bằng chữ và gán chuỗi biến cho thuộc tính myProp. Mặc dù thực tế rất tệ nhưng đây thực sự sẽ là mã TS hợp lệ (không sử dụng mã này!):

var string = 'A string';

var obj = {
  property: string
};

Tuy nhiên, những gì bạn muốn là các đối tượng theo nghĩa đen được gõ. Điều này có thể đạt được theo nhiều cách khác nhau:

Giao diện:

interface myObj {
    property: string;
}

var obj: myObj = { property: "My string" };

Loại tùy chỉnh:

type myObjType = {
    property: string
};

var obj: myObjType = { property: "My string" };

Toán tử diễn viên:

var obj = {
    myString: <string> 'hi',
    myNumber: <number> 132,
};

Loại đối tượng theo nghĩa đen:

var obj: { property: string; } = { property: "Mystring" };