TypeScript：冒号与等于（Angular 教程）答案

【问题标题】：TypeScript : Colon vs Equal To ( Angular Tutorial )TypeScript：冒号与等于（Angular 教程）
【发布时间】：2017-04-12 11:22:07
【问题描述】：

我正在学习 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 使用样式 property : value

如果我将 AppComponent 类更改为以下，代码将无法按预期工作。

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

我想知道使用:和使用=有什么区别，什么时候应该使用？

【问题讨论】：

在Hero 中定义的是types，而不是values。
@jonrsharpe - 知道了。请将此作为答案，我将其标记为答案。

标签： angular typescript

【解决方案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: { id: number, name: string } = {...};

在Hero 类中，您只是设置类型，没有默认值。两者的模式实际上是相同的：

name[: type][ = value];

有关类型和类定义的更多信息，可能值得查看TS handbook。

【讨论】：

【解决方案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

【讨论】：

如果我将该行替换为 - title : string: 'Tour of Heroes';它也不起作用。
@JamaicaGeek 是的，因为您将titles 类型定义为string，然后您尝试将strings 类型定义为'Tour of Heroes'，它应该是title: string = 'Tour of Heroes'。这意味着titles 类型为string，我将其指定为'Tour of Heroes'。

【解决方案3】：

我会说它是一种接口，但你可以使用这个类作为类型来代替实现它：

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

let a: Hero = 'some call to create new hero';

它将确保对象是<Hero> 类型，否则会导致在类型错误中。

在这里你可以看到它被用作创建英雄类型的新英雄的类型：

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

【讨论】：

【解决方案4】：

export class AppComponent { 
    title = 'Tour of Heroes'; // here you assign a value to var.  
      hero: Hero = {
      id: 1,
      name: 'Windstorm'
    };
  }

export class Hero {
  id: number; // <= here you are declaring a var to be a string but without value
  name: string;
}

如果您立即为其赋值（数字、字符串、布尔值），则无需声明原语。

【讨论】：

【解决方案5】：

简单回答：

英雄 = 英雄； // 英雄有一个英雄

selectedHero : 英雄； // selectedHero 是一个 HERO

【讨论】：

【解决方案6】：

因为它是 Typescript，而不是 JavaScript。打字稿具有这种可变数据类型定义的风格。这就是 TypeScript 的一大优势：完整的 oop 和类型安全变量。

【讨论】：