Ketikkan definisi dalam objek literal dalam TypeScript

Di kelas-kelas TypeScript dimungkinkan untuk mendeklarasikan tipe untuk properti, misalnya:

class className {
  property: string;
};

Bagaimana cara mendeklarasikan tipe properti dalam objek literal?

Saya sudah mencoba kode berikut tetapi tidak dikompilasi:

var obj = {
  property: string;
};

Saya mendapatkan kesalahan berikut:

Nama 'string' tidak ada dalam cakupan saat ini

Apakah saya melakukan sesuatu yang salah atau ini bug?

Anda cukup dekat, Anda hanya perlu mengganti =dengan a :. Anda dapat menggunakan tipe objek literal (lihat bagian spesifikasi 3.5.3) atau antarmuka. Menggunakan tipe objek literal dekat dengan apa yang Anda miliki:

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

Tapi Anda juga bisa menggunakan antarmuka

interface MyObjLayout {
    property: string;
}

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

Pembaruan 2019-05-15 (Pola Kode Peningkatan sebagai Alternatif)

Setelah bertahun-tahun menggunakan constdan mendapatkan manfaat dari kode yang lebih fungsional, saya akan merekomendasikan untuk tidak menggunakan di bawah ini dalam banyak kasus. (Saat membangun objek, memaksa sistem tipe ke dalam tipe tertentu alih-alih membiarkannya menyimpulkan tipe sering merupakan indikasi bahwa ada sesuatu yang salah).

Sebagai gantinya saya akan merekomendasikan menggunakan constvariabel sebanyak mungkin dan kemudian menyusun objek sebagai langkah terakhir:

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

• Ini dengan benar akan mengetik semuanya tanpa perlu mengetik secara eksplisit.
• Tidak perlu mengetik ulang nama bidang.
• Ini mengarah ke kode terbersih dari pengalaman saya.
• Ini memungkinkan kompiler untuk memberikan lebih banyak verifikasi status (misalnya, jika Anda kembali di beberapa lokasi, kompiler akan memastikan jenis objek yang sama selalu dikembalikan - yang mendorong Anda untuk mendeklarasikan seluruh nilai pengembalian di setiap posisi - memberikan penjelasan yang sangat jelas niat nilai itu).

Penambahan 2020-02-26

Jika Anda benar-benar membutuhkan jenis yang Anda dapat diinisialisasi dengan malas: Tandai itu adalah jenis gabungan yang dapat dibatalkan (nol atau Jenis). Sistem tipe akan mencegah Anda menggunakannya tanpa terlebih dahulu memastikan memiliki nilai.

Di tsconfig.json, pastikan Anda mengaktifkan pemeriksaan nol yang ketat:

"strictNullChecks": true

Kemudian gunakan pola ini dan izinkan sistem tipe untuk melindungi Anda dari akses null / undefined yang tidak disengaja:

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
    }
}

Jangan lakukan hal di bawah ini dalam 99% kasus:

Pembaruan 2016-02-10 - Untuk Menangani TSX (Terima Kasih @Josh)

Gunakan asoperator untuk TSX.

var obj = {
    property: null as string
};

Contoh yang lebih panjang:

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

Jawaban Asli

Gunakan operator transmisi untuk membuat ringkas ini (dengan memberikan null ke jenis yang diinginkan).

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

Contoh yang lebih panjang:

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

Ini jauh lebih baik daripada memiliki dua bagian (satu untuk mendeklarasikan tipe, yang kedua untuk menyatakan default):

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

Saya terkejut bahwa tidak ada yang menyebutkan ini tetapi Anda hanya bisa membuat antarmuka yang disebut ObjectLiteral, yang menerima key: valuepasangan jenis string: any:

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

Maka Anda akan menggunakannya, seperti ini:

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

Bonus tambahan adalah Anda dapat menggunakan kembali antarmuka ini berkali-kali sesuai kebutuhan, pada banyak objek yang Anda inginkan.

Semoga berhasil.

Jika Anda mencoba menulis anotasi jenis, sintaksnya adalah:

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

Jika Anda mencoba menulis objek literal, sintaksnya adalah:

var x = { property: 'hello' };

Kode Anda mencoba menggunakan nama jenis di posisi nilai.

Dalam TypeScript jika kita mendeklarasikan objek maka kita akan menggunakan sintaks berikut:

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

Sebagai contoh:

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

Jika Anda mencoba menambahkan pengetikan ke objek literal yang dirusak , misalnya dalam argumen ke suatu fungsi, sintaksnya adalah:

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

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

Jika properti Anda memiliki tipe yang sama, Anda bisa menggunakan tipe utilitas yang telah ditentukan Record:

type Keys = "property" | "property2"

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

Tentu saja Anda dapat melangkah lebih jauh dan menentukan jenis khusus untuk nilai properti Anda:

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());

Dalam kode Anda:

var obj = {
  myProp: string;
};

Anda sebenarnya membuat objek literal dan menetapkan string variabel ke properti myProp. Meskipun praktik yang sangat buruk ini sebenarnya akan menjadi kode TS yang valid (jangan gunakan ini!):

var string = 'A string';

var obj = {
  property: string
};

Namun, yang Anda inginkan adalah objek literal diketik. Ini dapat dicapai dengan berbagai cara:

Antarmuka:

interface myObj {
    property: string;
}

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

Jenis kustom:

type myObjType = {
    property: string
};

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

Operator cor:

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

Jenis objek literal:

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