blocks|key|2852211|text|如果你想写一个类型注解，语法是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2852212|var+x:+{+property:+string;+}+=+{+property:+'hello'+};|code-block|syntax|javascript|2852213|如果您正在尝试编写对象文字，则语法为：|2852214|var+x+=+{+property:+'hello'+};|2852215|您的代码正在尝试在值位置使用类型名称。|2852216|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

If you're trying to write a type annotation, the syntax is:
<pre><code>var x: { property: string; } = { property: 'hello' };
</code></pre>
If you're trying to write an object literal, the syntax is:
<pre><code>var x = { property: 'hello' };
</code></pre>
Your code is trying to use a type name in a value position.

blocks|key|213192|text|已经很接近了，只需要用:替换=即可。您可以使用对象类型文字(参见规范3.5.3节)或接口。使用对象类型文字与您所拥有的非常接近：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|213193|var+obj:+{+property:+string;+}+=+{+property:+"foo"+};|code-block|syntax|javascript|213194|但是您也可以使用一个接口|213195|interface+MyObjLayout+{
++++property:+string;
}

var+obj:+MyObjLayout+=+{+property:+"foo"+};|213196|entityMap^0|B|1|E|1|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

You're pretty close, you just need to replace the <code>=</code> with a <code>:</code>. You can use an object type literal (see spec section 3.5.3) or an interface. Using an object type literal is close to what you have:

<pre><code>var obj: { property: string; } = { property: "foo" };
</code></pre>

But you can also use an interface

<pre><code>interface MyObjLayout {
 property: string;
}

var obj: MyObjLayout = { property: "foo" };
</code></pre>

blocks|key|208841|text|更新2019-05-15+(改进的Code+Pattern作为替代方案)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|208842|在使用const多年并受益于更多的函数代码之后，我建议在大多数情况下不要使用下面的代码。(在构建对象时，强制将类型系统转换为特定类型，而不是让它推断类型，这通常是出了问题的迹象)。|offset|length|style|CODE|208843|相反，我建议尽可能多地使用const变量，然后将对象组合为最后一步：|208844|const+id+=+GetId();
const+hasStarted+=+true;
...
const+hasFinished+=+false;
...
return+{hasStarted,+hasFinished,+id};|code-block|syntax|javascript|208845|208846|这将正确地键入所有内容，而不需要任何显式类型。|unordered-list-item|208847|无需重新键入字段名称。|208848|这将导致my+experience.|208849|This中最干净的代码允许编译器提供更多的状态验证(例如，如果您在多个位置返回，编译器将确保始终返回相同类型的对象-这鼓励您在每个位置声明整个返回值-给出该值的一个非常清晰的意图)。|208850|208851|相加2020-02-26|208852|如果您确实需要一个可以延迟初始化的类型:请标记它是一个可以为null的联合类型(null或Type)。类型系统将阻止您在未首先确保它具有值的情况下使用它。|208853|在tsconfig.json中，确保启用严格的null检查：|208854|"strictNullChecks":+true|208855|然后使用此模式，并允许类型系统保护您免受意外的空/未定义访问：|208856|const+state+=+{
++++instance:+null+as+null+%7C+ApiService,
++++//+OR
++++//+instance:+undefined+as+undefined+%7C+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
++++}
}|208857|208858|在99%25的情况下，不要执行以下操作：|208859|更新2016-02-10+-处理TSX+(谢谢@Josh)|208860|对TSX使用as运算符。|208861|var+obj+=+{
++++property:+null+as+string
};|208862|一个更长的例子：|208863|var+call+=+{
++++hasStarted:+null+as+boolean,
++++hasFinished:+null+as+boolean,
++++id:+null+as+number,
};|208864|原始答案|208865|使用cast操作符使其简洁(通过将null转换为所需的类型)。|208866|var+obj+=+{
++++property:+<string>+null
};|208867|208868|var+call+=+{
++++hasStarted:+<boolean>+null,
++++hasFinished:+<boolean>+null,
++++id:+<number>+null,
};|208869|这比有两个部分(一个声明类型，第二个声明默认值)要好得多：|208870|var+callVerbose:+{
++++hasStarted:+boolean;
++++hasFinished:+boolean;
++++id:+number;
}+=+{
++++hasStarted:+null,
++++hasFinished:+null,
++++id:+null,
};|208871|entityMap^0|0|3|5|0|D|5|0|0|0|0|0|0|0|0|0|0|1|D|0|0|O|0|0|0|0|0|0|6|2|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|23|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|24|8|@$D|25|E|26|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|27|8|@$D|28|E|29|F|G]]|9|@]|A|$]]|$1|J|3|K|5|L|7|2A|8|@]|9|@]|A|$M|N]]|$1|O|3|-4|5|6|7|2B|8|@]|9|@]|A|$]]|$1|P|3|Q|5|R|7|2C|8|@]|9|@]|A|$]]|$1|S|3|T|5|R|7|2D|8|@]|9|@]|A|$]]|$1|U|3|V|5|R|7|2E|8|@]|9|@]|A|$]]|$1|W|3|X|5|R|7|2F|8|@]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|2G|8|@]|9|@]|A|$]]|$1|Z|3|10|5|6|7|2H|8|@]|9|@]|A|$]]|$1|11|3|12|5|6|7|2I|8|@]|9|@]|A|$]]|$1|13|3|14|5|6|7|2J|8|@$D|2K|E|2L|F|G]]|9|@]|A|$]]|$1|15|3|16|5|6|7|2M|8|@$D|2N|E|2O|F|G]]|9|@]|A|$]]|$1|17|3|18|5|6|7|2P|8|@]|9|@]|A|$]]|$1|19|3|1A|5|L|7|2Q|8|@]|9|@]|A|$M|N]]|$1|1B|3|-4|5|6|7|2R|8|@]|9|@]|A|$]]|$1|1C|3|1D|5|6|7|2S|8|@]|9|@]|A|$]]|$1|1E|3|1F|5|6|7|2T|8|@]|9|@]|A|$]]|$1|1G|3|1H|5|6|7|2U|8|@$D|2V|E|2W|F|G]]|9|@]|A|$]]|$1|1I|3|1J|5|L|7|2X|8|@]|9|@]|A|$M|N]]|$1|1K|3|1L|5|6|7|2Y|8|@]|9|@]|A|$]]|$1|1M|3|1N|5|L|7|2Z|8|@]|9|@]|A|$M|N]]|$1|1O|3|1P|5|6|7|30|8|@]|9|@]|A|$]]|$1|1Q|3|1R|5|6|7|31|8|@]|9|@]|A|$]]|$1|1S|3|1T|5|L|7|32|8|@]|9|@]|A|$M|N]]|$1|1U|3|1L|5|6|7|33|8|@]|9|@]|A|$]]|$1|1V|3|1W|5|L|7|34|8|@]|9|@]|A|$M|N]]|$1|1X|3|1Y|5|6|7|35|8|@]|9|@]|A|$]]|$1|1Z|3|20|5|L|7|36|8|@]|9|@]|A|$M|N]]|$1|21|3|-4|5|6|7|37|8|@]|9|@]|A|$]]]|22|$]]

<h3>Update 2019-05-15 (Improved Code Pattern as Alternative)</h3>

After many years of using <code>const</code> and benefiting from more functional code, I would recommend against using the below in most cases. (When building objects, forcing the type system into a specific type instead of letting it infer types is often an indication that something is wrong).

Instead I would recommend using <code>const</code> variables as much as possible and then compose the object as the final step: 

<pre><code>const id = GetId();
const hasStarted = true;
...
const hasFinished = false;
...
return {hasStarted, hasFinished, id};
</code></pre>

<ul>
<li>This will properly type everything without any need for explicit typing. </li>
<li>There is no need to retype the field names.</li>
<li>This leads to the cleanest code from my experience.</li>
<li>This allows the compiler to provide more state verification (for example, if you return in multiple locations, the compiler will ensure the same type of object is always returned - which encourages you to declare the whole return value at each position - giving a perfectly clear intention of that value).</li>
</ul>

<h3>Addition 2020-02-26</h3>

If you do actually need a type that you can be lazily initialized: Mark it is a nullable union type (null or Type). The type system will prevent you from using it without first ensuring it has a value.

In <code>tsconfig.json</code>, make sure you enable strict null checks: 

<code>"strictNullChecks": true</code>

Then use this pattern and allow the type system to protect you from accidental null/undefined access:

<pre><code>

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

};

const useApi = () =&gt; {
 // 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 &amp;&amp; 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 &amp;&amp; state.instance !== undefined) { state.instance.fun(); }
};

class ApiService {
 fun() {
 // Do something useful here
 }
}
</code></pre>

<hr>

<h3>Do not do the below in 99% of cases:</h3>

<h3>Update 2016-02-10 - To Handle TSX (Thanks @Josh)</h3>

Use the <code>as</code> operator for TSX.

<pre><code>var obj = {
 property: null as string
};
</code></pre>

A longer example:

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

<h3>Original Answer</h3>

Use the cast operator to make this succinct (by casting null to the desired type).

<pre><code>var obj = {
 property: &lt;string&gt; null
};
</code></pre>

A longer example:

<pre><code>var call = {
 hasStarted: &lt;boolean&gt; null,
 hasFinished: &lt;boolean&gt; null,
 id: &lt;number&gt; null,
};
</code></pre>

This is much better than having two parts (one to declare types, the second to declare defaults):

<pre><code>var callVerbose: {
 hasStarted: boolean;
 hasFinished: boolean;
 id: number;
} = {
 hasStarted: null,
 hasFinished: null,
 id: null,
};
</code></pre>

blocks|key|208876|text|在TypeScript中，如果我们声明object，那么我们将使用以下语法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|208877|[access+modifier]+variable+name+:+{+/*+structure+of+object+*/+}|code-block|syntax|javascript|208878|例如：|208879|private+Object:{+Key1:+string,+Key2:+number+}|208880|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

In TypeScript if we are declaring object then we'd use the following syntax:

<pre><code>[access modifier] variable name : { /* structure of object */ }
</code></pre>

For example:

<pre><code>private Object:{ Key1: string, Key2: number }
</code></pre>

blocks|key|2852340|text|如果您试图将类型添加到非结构化对象文字中，例如，在函数的参数中，语法为：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2852341|function+foo({+bar,+baz+}:+{+bar:+boolean,+baz:+string+})+{
++//+...
}

foo({+bar:+true,+baz:+'lorem+ipsum'+});|code-block|syntax|javascript|2852342|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

If you're trying to add typings to a destructured object literal, for example in arguments to a function, the syntax is:

<pre><code>function foo({ bar, baz }: { bar: boolean, baz: string }) {
 // ...
}

foo({ bar: true, baz: 'lorem ipsum' });
</code></pre>

blocks|key|211795|text|我很惊讶没有人提到这一点，但您可以只创建一个名为ObjectLiteral的接口，它接受类型为string:+any的key:+value对|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|211796|interface+ObjectLiteral+{
++[key:+string]:+any;
}|code-block|syntax|javascript|211797|然后使用它，如下所示：|211798|let+data:+ObjectLiteral+=+{
++hello:+"world",
++goodbye:+1,
++//+...
};|211799|一个额外的好处是，您可以根据需要在任意多个对象上多次重用此接口。|211800|祝好运。|211801|entityMap^0|O|D|1B|B|1N|A|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|13|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|14|8|@]|D|@]|E|$]]|$1|Q|3|R|5|6|7|15|8|@]|D|@]|E|$]]|$1|S|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|T|$]]

I'm surprised that no-one's mentioned this but you could just create an interface called <code>ObjectLiteral</code>, that accepts <code>key: value</code> pairs of type <code>string: any</code>:

<pre><code>interface ObjectLiteral {
 [key: string]: any;
}
</code></pre>

Then you'd use it, like this:

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

An added bonus is that you can re-use this interface many times as you need, on as many objects you'd like.

Good luck.

blocks|key|208927|text|在你的代码中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|208928|var+obj+=+{
++myProp:+string;
};|code-block|syntax|javascript|208929|您实际上是在创建一个对象文字，并将变量字符串分配给属性myProp。尽管这是非常糟糕的做法，但这实际上是有效的TS代码(不要使用这个！)：|208930|var+string+=+'A+string';

var+obj+=+{
++property:+string
};|208931|208932|但是，您需要的是输入object文本。这可以通过多种方式来实现：|208933|接口：|offset|length|style|BOLD|208934|interface+myObj+{
++++property:+string;
}

var+obj:+myObj+=+{+property:+"My+string"+};|208935|类型别名：|208936|type+myObjType+=+{
++++property:+string
};

var+obj:+myObjType+=+{+property:+"My+string"+};|208937|对象类型文字：|208938|var+obj:+{+property:+string;+}+=+{+property:+"Mystring"+};|208939|entityMap^0|0|0|0|0|0|0|0|3|0|0|0|5|0|0|0|7|0|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|16|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|17|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|18|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|19|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1A|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|1B|8|@$P|1C|Q|1D|R|S]]|9|@]|A|$]]|$1|T|3|U|5|D|7|1E|8|@]|9|@]|A|$E|F]]|$1|V|3|W|5|6|7|1F|8|@$P|1G|Q|1H|R|S]]|9|@]|A|$]]|$1|X|3|Y|5|D|7|1I|8|@]|9|@]|A|$E|F]]|$1|Z|3|10|5|6|7|1J|8|@$P|1K|Q|1L|R|S]]|9|@]|A|$]]|$1|11|3|12|5|D|7|1M|8|@]|9|@]|A|$E|F]]|$1|13|3|-4|5|6|7|1N|8|@]|9|@]|A|$]]]|14|$]]

In your code:
<pre><code>var obj = {
 myProp: string;
};
</code></pre>
You are actually creating a object literal and assigning the variable string to the property myProp. Although very bad practice this would actually be valid TS code (don't use this!):
<pre><code>var string = 'A string';

var obj = {
 property: string
};
</code></pre>
<hr />
However, what you want is that the object literal is typed. This can be achieved in various ways:
Interface:
<pre><code>interface myObj {
 property: string;
}

var obj: myObj = { property: &quot;My string&quot; };
</code></pre>
Type alias:
<pre><code>type myObjType = {
 property: string
};

var obj: myObjType = { property: &quot;My string&quot; };
</code></pre>
Object type literal:
<pre><code>var obj: { property: string; } = { property: &quot;Mystring&quot; };
</code></pre>

blocks|key|3065875|text|//+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());|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|3065876|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>// 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());
</code></pre>

blocks|key|213299|text|您可以使用预定义的实用程序类型：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|213300|const+obj:+Record<string,+string>+=+{
++property:+"value",
};|code-block|syntax|javascript|213301|它允许为您的对象文本指定键：|213302|type+Keys+=+"prop1"+%7C+"prop2"

const+obj:+Record<Keys,+string>+=+{
++prop1:+"Hello",
++prop2:+"Aloha",
++something:+"anything"+//+TS+Error:+Type+'{+prop1:+string;+prop2:+string;+something:+string;+}'+is+not+assignable+to+type+'Record<Keys,+string>'.
++++++++++++++++++++++++//+++Object+literal+may+only+specify+known+properties,+and+'something'+does+not+exist+in+type+'Record<Keys,+string>'.
};|213303|以及属性值的类型：|213304|type+Keys+=+"prop1"+%7C+"prop2"
type+Value+=+"Hello"+%7C+"Aloha"

const+obj1:+Record<Keys,+Value>+=+{
++prop1:+"Hello",
++prop2:+"Hey",+//+TS+Error:+Type+'"Hey"'+is+not+assignable+to+type+'Value'.
};|213305|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

You could use predefined utility type <a href="https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeystype" rel="noreferrer"><code>Record&lt;Keys, Type&gt;</code></a> :
<pre><code>const obj: Record&lt;string, string&gt; = {
 property: &quot;value&quot;,
};
</code></pre>
It allows to specify keys for your object literal:
<pre><code>type Keys = &quot;prop1&quot; | &quot;prop2&quot;

const obj: Record&lt;Keys, string&gt; = {
 prop1: &quot;Hello&quot;,
 prop2: &quot;Aloha&quot;,
 something: &quot;anything&quot; // TS Error: Type '{ prop1: string; prop2: string; something: string; }' is not assignable to type 'Record&lt;Keys, string&gt;'.
 // Object literal may only specify known properties, and 'something' does not exist in type 'Record&lt;Keys, string&gt;'.
};
</code></pre>
And a type for the property value:
<pre><code>type Keys = &quot;prop1&quot; | &quot;prop2&quot;
type Value = &quot;Hello&quot; | &quot;Aloha&quot;

const obj1: Record&lt;Keys, Value&gt; = {
 prop1: &quot;Hello&quot;,
 prop2: &quot;Hey&quot;, // TS Error: Type '&quot;Hey&quot;' is not assignable to type 'Value'.
};
</code></pre>

blocks|key|208979|text|这就是我在2021年用TypeScript+4.5做的事情：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|208980|const+sm+=+{
++reg:+{}+as+ServiceWorkerRegistration,
++quantum:+null+as+number+%7C+null,
++currentCacheName:+''+as+string,+//+superfluous
++badSWTimer:+0+as+number,+//+superfluous
}|code-block|syntax|javascript|208981|这不仅仅是一个值转换，而且对于对象属性来说，它的工作方式与接口定义是相同的。|208982|更新:我包含了两个多余的类型作为示例。也就是说，可以自动推断这些类型，因此不会生成编译器错误。|208983|来源：4.4+Playground|offset|length|208984|entityMap|0|LINK|mutability|MUTABLE|url|https://www.typescriptlang.org/play?ts=4.4.4#code/MYewdgzgLgBBC2MC8MDeAoGMBOBTA5gFxoC%2BMAhhDAMq7YBuAlsLgOojYDWdASgY9GzkojcABpMMAI4BXcmCgz4xMDIA2ailVXwARnRgAfGKo0SswGdjwKAwuWAALXADly8XMQDkXrXCjYjGD4YjAA9GFwMgAOdABmajIgMhCSuuQAJtSsACqMHtjEAAx%2BOvrYoRFRsdgJSSnoJOjoVQgAdLLyiogoXhm4cUGMULhqAJ4UMABEZXRToWMxbVO%2BVTmO2CAA7lTkMFBjsTB0m9jooJAgarhtaiD4ABQIAJRAA^0|0|0|0|0|3|E|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

This is what I'm doing in 2021 with TypeScript 4.5:
<pre><code>const sm = {
 reg: {} as ServiceWorkerRegistration,
 quantum: null as number | null,
 currentCacheName: '' as string, // superfluous
 badSWTimer: 0 as number, // superfluous
}
</code></pre>
This is not just a value cast, but works the same as an interface definition, for the object properties that is.
Update: I included two superfluous typings as an example. That is, these typings can be inferred automatically and thus, would not generate compiler errors.
Source: <a href="https://www.typescriptlang.org/play?ts=4.4.4#code/MYewdgzgLgBBC2MC8MDeAoGMBOBTA5gFxoC+MAhhDAMq7YBuAlsLgOojYDWdASgY9GzkojcABpMMAI4BXcmCgz4xMDIA2ailVXwARnRgAfGKo0SswGdjwKAwuWAALXADly8XMQDkXrXCjYjGD4YjAA9GFwMgAOdABmajIgMhCSuuQAJtSsACqMHtjEAAx+OvrYoRFRsdgJSSnoJOjoVQgAdLLyiogoXhm4cUGMULhqAJ4UMABEZXRToWMxbVO+VTmO2CAA7lTkMFBjsTB0m9jooJAgarhtaiD4ABQIAJRAA" rel="nofollow noreferrer">4.4 Playground</a>

blocks|key|3065981|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3065982|使用类型关键字|ordered-list-item|3065983|创建类型|3065984|type+ObjType+=+{
++property:+string;
}|code-block|syntax|javascript|3065985|然后你可以用它来绑定你的对象，只接受这个类型，如下所示。|3065986|const+obj:+ObjType+=+{
property:+"TypeScript"
}|3065987|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|-4|4|5|6|Q|7|@]|8|@]|9|$]]|$1|A|3|B|4|C|6|R|7|@]|8|@]|9|$]]|$1|D|3|E|4|5|6|S|7|@]|8|@]|9|$]]|$1|F|3|G|4|H|6|T|7|@]|8|@]|9|$I|J]]|$1|K|3|L|4|5|6|U|7|@]|8|@]|9|$]]|$1|M|3|N|4|H|6|V|7|@]|8|@]|9|$I|J]]|$1|O|3|-4|4|5|6|W|7|@]|8|@]|9|$]]]|P|$]]

<ol>
<li>create a type using type keyword</li>
</ol>
<pre class="lang-js prettyprint-override"><code>type ObjType = {
 property: string;
}
</code></pre>
and then you can use it to bind your object to accept this type only, like below.
<pre><code>const obj: ObjType = {
property: &quot;TypeScript&quot;
}
</code></pre>

blocks|key|2852468|text|使用DRY将对象文字转换为类型|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2852469|只需这样做：|2852470|const+myObject+=+{
+++hello:+'how+are+you',
+++hey:+'i+am+fine+thank+you'
}|code-block|syntax|javascript|2852471|type+myObjectType+=+keyof+typeof+MyObject|2852472|任务完成了！|2852473|entityMap^0|0|5|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|X|8|@]|D|@]|E|$K|L]]|$1|O|3|P|5|6|7|Y|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|R|$]]

Convert Object Literal into Type With DRY
Just do:
<pre class="lang-js prettyprint-override"><code>const myObject = {
 hello: 'how are you',
 hey: 'i am fine thank you'
}
</code></pre>
<pre class="lang-js prettyprint-override"><code>type myObjectType = keyof typeof MyObject
</code></pre>
Job done!

blocks|key|2852491|text|当心。对某些人来说，这似乎是显而易见的，但类型声明：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2852492|const+foo:+TypeName+=+{}|code-block|syntax|javascript|2852493|与使用as进行强制转换不同|offset|length|style|CODE|2852494|const+foo+=+{}+as+TypeName|2852495|尽管有人建议在其他答案上使用它。|2852496|示例：|2852497|谢谢，类型安全！：|2852498|const+foo:+{+[K+in+'open'+%7C+'closed']:+string+}+=+{}
//+ERROR:+TS2739:+Type+'{}'+is+missing+the+following+properties+from+type+'{+open:+string;+closed:+string;+}':+open,+closed|2852499|再见，类型安全！：|2852500|const+foo+=+{}+as+{+[K+in+'open'+%7C+'closed']:+string+}
//+No+error|2852501|entityMap^0|0|0|3|2|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|14|8|@$I|15|J|16|K|L]]|9|@]|A|$]]|$1|M|3|N|5|D|7|17|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|18|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|19|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1A|8|@]|9|@]|A|$]]|$1|U|3|V|5|D|7|1B|8|@]|9|@]|A|$E|F]]|$1|W|3|X|5|6|7|1C|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|D|7|1D|8|@]|9|@]|A|$E|F]]|$1|10|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]]|11|$]]

Beware. It may seem obvious to some, but the type declaration:
<pre class="lang-js prettyprint-override"><code>const foo: TypeName = {}
</code></pre>
is not the same compared to casting with <code>as</code>:
<pre class="lang-js prettyprint-override"><code>const foo = {} as TypeName
</code></pre>
despite the suggestions to use it on other answers.
Example:
Thanks, type-safety!:
<pre><code>const foo: { [K in 'open' | 'closed']: string } = {}
// ERROR: TS2739: Type '{}' is missing the following properties from type '{ open: string; closed: string; }': open, closed
</code></pre>
Goodbye, type-safety!:
<pre><code>const foo = {} as { [K in 'open' | 'closed']: string }
// No error
</code></pre>

blocks|key|2852527|text|只是为了扩展@RickLove的回复...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2852528|这非常有效，因为您只需要定义无法推断的类型：|2852529|const+initialState+=+{+
+++user:+undefined+as+User+%7C+undefined,+
+++userLoading:+false
};+|code-block|syntax|javascript|2852530|并将其转换为以下js代码：|2852531|const+initialState+=+{+
+++user:+undefined,+
+++userLoading:+false
};++|2852532|如果你需要把它提取到一个类型中，你可以这样做：|2852533|export+type+InitState+=+typeof+initialState;|2852534|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

Just to extend @RickLove's reply...
This works great, as you only need to define the type that cannot be inferred:
<pre class="lang-js prettyprint-override"><code>const initialState = { 
 user: undefined as User | undefined, 
 userLoading: false
}; 
</code></pre>
and it transpiles to this js code:
<pre class="lang-js prettyprint-override"><code>const initialState = { 
 user: undefined, 
 userLoading: false
}; 
</code></pre>
And if you need to extract it into a type, you can just do this:
<pre class="lang-js prettyprint-override"><code>export type InitState = typeof initialState;
</code></pre>

In TypeScript classes it's possible to declare types for properties, for example:

<pre><code>class className {
 property: string;
};
</code></pre>

How do declare the type of a property in an object literal?

I've tried the following code but it doesn't compile:

<pre><code>var obj = {
 property: string;
};
</code></pre>

I'm getting the following error:

<blockquote>
 The name 'string' does not exist in the current scope
</blockquote>

Am I doing something wrong or is this a bug?

Type definition in object literal in TypeScript

TypeScript

编译器

在TypeScript类中，可以声明属性的类型，例如：class className {  property: string;};如何在对象文字中声明属性的类型？我尝试了以下代码，但它不能编译：var obj = {  property: string;};我得到以下错误：名称'string‘在当前作用域中不存在是我做...

问TypeScript中对象文字中的类型定义
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问TypeScript中对象文字中的类型定义EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问TypeScript中对象文字中的类型定义
EN