TypeScript:冒号与等于(角度教程)

Question

我正在学习Angular4并完成教程示例.

https://angular.io/docs/ts/latest/tutorial/toh-pt1.html

我在教程中有以下代码.

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>{{title}}</h1><h2>{{hero.name}} details!</h2>`
})
export class AppComponent { 
    title = 'Tour of Heroes'; // *1
      hero: Hero = {
      id: 1,
      name: 'Windstorm'
    };
  }

export class Hero {
  id: number; // *2
  name: string;
}

在代码中定义了2个类,AppComponent和Hero.我无法理解为什么对于类的成员声明,​​AppComponent遵循样式property = value而类Hero使用style 属性:value

如果我将类AppComponent更改为以下,代码将无法按预期方式工作.

export class AppComponent { 
    title : 'Tour of Heroes', 
      hero: Hero : {
      id: 1,
      name: 'Windstorm'
    };
  }

我想知道使用:和使用之间的区别=以及何时应该使用什么？

Answer 1

再看看AppComponent:

export class AppComponent { 
  title = 'Tour of Heroes';
  hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };
}

第一个字段定义:

title = 'Tour of Heroes';

正在分配一个字符串值.因为该值是一个字符串,TS可以推断出类型.这条线相当于:

title: string = 'Tour of Heroes';

第二个字段定义

hero: Hero = {
  id: 1,
  name: 'Windstorm'
};

正在分配一个可能是类型的对象any.所以在这里,为了充分利用TS,我们应该具体说明它将会是什么样的东西.它也可以写成:

hero = {...} as Hero;

或者您可以内联定义而不是命名它:

hero: { id: number, name: string } = {...};

在Hero类中,您只设置类型,没有默认值.两种模式实际上是相同的:

name[: type][ = value];

有关类型和类定义的更多信息,可能值得查看TS手册.

Answer 2

:在 JSON 中用于值，例如：

{ name: "name value" };

:也用于打字稿中定义对象类型。例如：

myObj: JSON;

=用于在 JSON 之外进行赋值。

myObj: JSON = { name: "name value" }; // meaning myObj has type JSON and is equal to { name: "name value" };

您的代码中的问题：

title : 'Tour of Heroes',  <-- Here you are making titles **type** 'Tour of Heroes'

我建议您阅读 typescript 的基本文档：https://www.typescriptlang.org/docs/handbook/basic-types.html