如何通過npm編譯Typescript程式碼
阿新 • • 發佈:2020-07-21
通過 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());