TypeScriptのオブジェクトリテラルの型定義

TypeScriptクラスでは、プロパティの型を宣言できます。次に例を示します。

class className {
  property: string;
};

オブジェクトリテラルでプロパティの型を宣言するにはどうすればよいですか？

次のコードを試してみましたが、コンパイルできません。

var obj = {
  property: string;
};

次のエラーが発生します。

名前「string」は現在のスコープに存在しません

私は何か間違ったことをしていますか、これはバグですか？

あなたはかなり近い、あなただけ交換する必要があります=し:。オブジェクト型リテラル（仕様セクション3.5.3を参照）またはインターフェースを使用できます。オブジェクト型リテラルを使用することは、あなたが持っているものに近いです：

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

しかし、インターフェースを使用することもできます

interface MyObjLayout {
    property: string;
}

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

2019-05-15の更新（代替としての改善されたコードパターン）

長年にわたってconstより機能的なコードを使用し、その恩恵を受けた後、ほとんどの場合、以下を使用しないことをお勧めします。（オブジェクトを構築するとき、型システムに型を推論させるのではなく、特定の型に型システムを強制することは、多くの場合、何かが間違っていることを示しています）。

代わりにconst、できるだけ変数を使用し、最後のステップとしてオブジェクトを作成することをお勧めします。

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

• これにより、明示的に入力する必要なく、すべてが適切に入力されます。
• フィールド名を再入力する必要はありません。
• これは私の経験から最もクリーンなコードにつながります。
• これにより、コンパイラーはより多くの状態検証を提供できます（例えば、複数の場所に戻る場合、コンパイラーは常に同じタイプのオブジェクトが返されることを保証します-これにより、各位置で戻り値全体を宣言することを奨励します-完全に明確になりますその値の意図）。

追加2020-02-26

遅延初期化できる型が実際に必要な場合：null許容の共用体型（nullまたはType）であるとマークします。型システムは、最初に値があることを確認せずに使用できないようにします。

ではtsconfig.json、必ず厳密なnullチェックを有効にしてください。

"strictNullChecks": true

次に、このパターンを使用して、型システムが偶発的なnull /未定義のアクセスからユーザーを保護できるようにします。

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

99％の場合、以下を行わないでください。

更新2016-02-10-TSXを処理するには（@Joshに感謝）Update 2016-02-10-To Handle TSX（Thanks @Josh）

asTSX の演算子を使用します。

var obj = {
    property: null as string
};

より長い例：

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

元の回答

キャスト演算子を使用してこれを簡潔にします（目的の型にnullをキャストします）。

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

より長い例：

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

これは、2つの部分（タイプを宣言する部分と、デフォルトを宣言する部分）を使用するよりもはるかに優れています。

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

誰もこれについて言及していないことに驚いていますが、タイプのペアObjectLiteralを受け入れると呼ばれるインターフェイスを作成することができます：key: valuestring: any

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

次に、次のように使用します。

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

追加のボーナスは、このインターフェイスを必要なだけ何度でも再利用できることです。

幸運を。

型注釈を記述しようとしている場合、構文は次のとおりです。

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

オブジェクトリテラルを記述しようとしている場合、構文は次のとおりです。

var x = { property: 'hello' };

コードが値の位置で型名を使用しようとしています。

TypeScriptでは、オブジェクトを宣言する場合、次の構文を使用します。

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

例えば：

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

あなたがタイピングを追加しようとしている場合は破壊さ関数の引数には、たとえば、オブジェクトリテラル、構文は次のとおりです。

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

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

プロパティのタイプが同じ場合は、事前定義されたユーティリティタイプを使用できますRecord。

type Keys = "property" | "property2"

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

もちろん、さらに進んで、プロパティ値のカスタムタイプを定義できます。

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

あなたのコードで：

var obj = {
  myProp: string;
};

オブジェクトリテラルを実際に作成し、変数文字列をプロパティmyPropに割り当てています。非常に悪い習慣ですが、これは実際には有効なTSコードです（これは使用しないでください）。

var string = 'A string';

var obj = {
  property: string
};

ただし、必要なのは、オブジェクトリテラルが型指定されていることです。これはさまざまな方法で実現できます。

インターフェース：

interface myObj {
    property: string;
}

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

カスタムタイプ：

type myObjType = {
    property: string
};

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

キャスト演算子：

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

オブジェクト型リテラル：

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