如何通过npm编译Typescript代码

Posted 2020-12-18 montai

 

通过 npm 按安装的步骤：

1、安装 TypeScript npm 包：

$ npm install -g typescript

安装完成后我们就可以使用 TypeScript 编译器，名称叫 tsc，可将编译结果生成 js 文件。

要编译 TypeScript 文件，可使用如下命令：

tsc filename.ts

一旦编译成功，就会在相同目录下生成一个同名 js 文件，你也可以通过命令参数来修改默认的输出名称。

默认情况下编译器以ECMAScript 3（ES3）为目标但ES5也是受支持的一个选项。TypeScript增加了对为即将到来的ECMAScript 6标准所建议的特性的支持。

如下是ts的代码, 这里定义了sharp类, 并继承了sharp3D 和 sharp4D 两个子类

 1 //class.ts
 2 
 3 class Shape {
 4  
 5     area: number;
 6     color: string;
 7     text: string;
 8  
 9     constructor (public name: string, width: number, height: number ) {
10         this.area = width * height;
11         this.color = "pink";
12         this.text = ‘I am a 2D object:‘;
13     };
14  
15     shoutout() {
16         return this.text + this.color + " " + this.name +  " with an area of " + this.area + " cm squared.";
17     }
18 }
19 
20 class Shape3D extends Shape {
21  
22     volume: number;
23     
24  
25     constructor ( public name: string, width: number, height: number, length: number ) {
26         super( name, width, height );
27         this.volume = length * this.area;
28         this.text = ‘I am a 3D object:‘;
29     };
30  
31     shoutout() {
32         return this.text + this.name +  " with a volume of " + this.volume + " cm cube.";
33     }
34  
35     superShout() {
36         return super.shoutout();
37     }
38 }
39 
40 class Shape4D extends Shape3D {
41     
42     d4volume: number;
43     constructor ( public name: string, width: number, height: number, length: number, d4: number ){
44         super(name, width, height, length);
45         this.d4volume = d4 * this.volume;
46         this.text = ‘I am a 4D object‘;
47     };
48     
49     shoutout() {
50         return this.text + this.name +  " with a d4volume of " + this.d4volume + " cm d4cube.";
51     }
52     
53     superShout(){
54         return super.shoutout();
55     }
56 }
57 
58 var cube = new Shape3D("cube", 30, 30, 30);
59 console.log( cube.shoutout() );
60 console.log( cube.superShout());
61 
62 var d4cube = new Shape4D("d4cube", 30, 30, 30, 30);
63 console.log( d4cube.shoutout() );
64 console.log( d4cube.superShout() );

 

编译好的代码:

 1 //class.js
 2 var __extends = (this && this.__extends) || (function () {
 3     var extendStatics = function (d, b) {
 4         extendStatics = Object.setPrototypeOf ||
 5             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
 6             function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
 7         return extendStatics(d, b);
 8     };
 9     return function (d, b) {
10         extendStatics(d, b);
11         function __() { this.constructor = d; }
12         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
13     };
14 })();
15 var Shape = /** @class */ (function () {
16     function Shape(name, width, height) {
17         this.name = name;
18         this.area = width * height;
19         this.color = "pink";
20         this.text = ‘I am a 2D object:‘;
21     }
22     ;
23     Shape.prototype.shoutout = function () {
24         return this.text + this.color + " " + this.name + " with an area of " + this.area + " cm squared.";
25     };
26     return Shape;
27 }());
28 var Shape3D = /** @class */ (function (_super) {
29     __extends(Shape3D, _super);
30     function Shape3D(name, width, height, length) {
31         var _this = _super.call(this, name, width, height) || this;
32         _this.name = name;
33         _this.volume = length * _this.area;
34         _this.text = ‘I am a 3D object:‘;
35         return _this;
36     }
37     ;
38     Shape3D.prototype.shoutout = function () {
39         return this.text + this.name + " with a volume of " + this.volume + " cm cube.";
40     };
41     Shape3D.prototype.superShout = function () {
42         return _super.prototype.shoutout.call(this);
43     };
44     return Shape3D;
45 }(Shape));
46 var Shape4D = /** @class */ (function (_super) {
47     __extends(Shape4D, _super);
48     function Shape4D(name, width, height, length, d4) {
49         var _this = _super.call(this, name, width, height, length) || this;
50         _this.name = name;
51         _this.d4volume = d4 * _this.volume;
52         _this.text = ‘I am a 4D object‘;
53         return _this;
54     }
55     ;
56     Shape4D.prototype.shoutout = function () {
57         return this.text + this.name + " with a d4volume of " + this.d4volume + " cm d4cube.";
58     };
59     Shape4D.prototype.superShout = function () {
60         return _super.prototype.shoutout.call(this);
61     };
62     return Shape4D;
63 }(Shape3D));
64 var cube = new Shape3D("cube", 30, 30, 30);
65 console.log(cube.shoutout());
66 console.log(cube.superShout());
67 var d4cube = new Shape4D("d4cube", 30, 30, 30, 30);
68 console.log(d4cube.shoutout());
69 console.log(d4cube.superShout());