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使用样式 属性：值

如果我将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 handbook。

Answer 2

:在JSON中用于值，例如：

{ name: "name value" };

:也在typescript中用于定义对象类型。例如：

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'

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

Answer 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'
};

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

如果你立即赋值（number，string，boolean），你不需要声明原语。

Answer 5

简单答案：

英雄=英雄； //英雄拥有英雄

selectedHero：英雄； // selectedHero is a HERO

Answer 6

因为它是Typescript而不是JavaScript。 Typescript具有可变数据类型定义的样式。这是TypeScript的一大优势：Full oop和类型安全变量。

TypeScript：Colon vs Equal To（Angular Tutorial）

6 个答案: