【问题标题】：What is the use of the class in typescript打字稿中的类有什么用
【发布时间】：2017-04-13 19:13:00
【问题描述】：

这是英雄教程角游的app.component.ts

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

export class Hero{
 name : string;
 id : number;
}

const HEROES : Hero[] = [
    {name : 'jhon snow', id : 1},
    {name : 'wiz kahlifa',id : 2},
    {name : 'superman',id : 3},
    {name : 'batman',id : 4},
    {name : 'supersyian', id : 5}
];

我想知道类在类型脚本中是如何工作的，我检查了 app.component.js 并看到了以下代码行

var Hero = (function () {
 function Hero() {
 }
 return Hero;
}());
exports.Hero = Hero;
var HEROES = [
 { name: 'jhon snow', id: 1 },
 { name: 'wiz kahlifa', id: 2 },
 { name: 'superman', id: 3 },
 { name: 'batman', id: 4 },
 { name: 'supersyian', id: 5 }
];

我无法理解 app.component.js 中类的使用，HEROES 数组和我在 app.component.ts 中创建的 Hero 类之间没有链接

【问题讨论】：

那是因为 typescript 正在转换成 javascript。一般来说，您应该阅读更多关于 typescript 和 javascript 的信息。
该类允许编译时检查。如果数组中的某个字段在编译时丢失，则会出现错误。
TypeScript 的目的是添加类型。 JS 不支持与 TypeScript 相同的类型机制；一旦它被转译，TypeScript 的东西就消失了。

标签： javascript angularjs typescript

【解决方案1】：

我无法理解 app.component.js 中类的使用，HEROES 数组和我在 app.component.ts 中创建的 Hero 类之间没有链接

你是对的。它应该。我建议不要关注旧浏览器的编译代码。您可以针对现代 JavaScript 引擎进行编译：关键字 class 将保留，您的问题也将保留。

以下代码声明了一个 ES6 类（带有 TypeScript 语法糖）：

export class Hero {
  name: string;
  id: number;
}

那么，实例化类的唯一方法是使用new 运算符：

但是，您只能通过new (source: exploringjs from Dr. Axel Rauschmayer) 调用一个类

以下代码具有误导性：

const HEROES : Hero[] = [
  {name : 'jhon snow', id : 1},
  {name : 'wiz kahlifa',id : 2},
  // ...
];

它声明了一个Hero[] 类型的数组。但是构造函数没有被执行。它充满了不是类实例的对象。

有效途径

带接口：

export interface Hero {
  name: string;
  id: number;
}
const HEROES : Hero[] = [
  {name : 'jhon snow', id : 1},
  {name : 'wiz kahlifa', id : 2},
  // ...
];

有一个类：

export class Hero {
  constructor (public name: string, public id: number) {
  }
}
const HEROES : Hero[] = [
  new Hero('jhon snow', 1),
  new Hero('wiz kahlifa', 2),
  // ...
];

【讨论】：

这是一个类型脚本类而不是 ES6 类。
@Nothing 阅读the official Web site：“TypeScript 是 JavaScript 的类型化超集”。 TS 类是 ES6 类。
不，您误解了超集的含义。给我找一个不会抱怨该代码的 ES6 解释器。
您也错过了使用术语语法糖。 ECMAScript 6 使用语法糖来处理底层行为与 ECMAScript 5 原型完全相同的类。 Typescript 仍然需要被转译成另一种语言。
我不是拖钓，但新开发人员应该清楚阅读 ES6 类和 TypeScript 类是不同的。你今天不能写一个 TypeScript 类，希望它能够在一两年内被 Chrome/IE 解释。如果你今天编写一个 ES6 类，它已经可以被 node 6+ 和任何最新版本的 chrome 理解。任何主流浏览器都可能永远无法理解类型脚本类。

【解决方案2】：

所以这里的 Transpiler 将 Type 脚本类转换为 javascript 5 或 ES5 兼容的代码。在 ES5 中，您在定义“类”时不使用类语法，而是使用函数语法。例如

function car() { } //This defines a "class" called car but it doesnt do anything yet

//This defines a function of car that returns the max speed
car.prototype.maxSpeed = function() {
 return "70 MPH";
}

如您所见，这里没有类型，因为 javascript 是动态类型的。声明类之后，什么都不需要声明。

在您的示例中，您看不到名称和 ID，因为它们用于在 typescript 中进行编译时错误检查。它们不会存在于他们的 javascript 转换类中。

至于你的 const 英雄。这些只是 javascript 对象，它们在实例化后采用您的类在 javascript 中的形状。

【讨论】：