當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

WebStorm使用TypeScript

發布時間：2024/2/28 编程问答 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 WebStorm使用TypeScript 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

前提條件：

安裝nodejs

安裝webstorm，自帶有typescript

本人的環境是webstorm 2016.3.3, nodejs 6.9.2

可以通過npm install -g typescript來安裝typescript最新版本.

創建項目demo1

創建typescript的項目配置文件tsconfig.json

{"compilerOptions": {"module": "commonjs","target": "es5","sourceMap": true },"exclude": ["node_modules" ] }

commonjs指使用的模塊規范

es5指生成的代碼版本

創建html文件hello.html

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <script src='hello.js'></script> </body> </html>

創建ts文件hello.ts

class Greeter {constructor(public greeting: string) { }greet() {return "<h1>" + this.greeting + "</h1>";} };var greeter = new Greeter("Hello, world!");document.body.innerHTML = greeter.greet();

配置項目自動生成js文件

如果tsconfig.json配置的是es5，生成js代碼如下

var Greeter = (function () {function Greeter(greeting) {this.greeting = greeting;}Greeter.prototype.greet = function () {return "<h1>" + this.greeting + "</h1>";};return Greeter; }()); ; var greeter = new Greeter("Hello, world!"); document.body.innerHTML = greeter.greet(); //# sourceMappingURL=hello.js.map

如果tsconfig.json配置的是es6，生成js代碼如下

class Greeter {constructor(greeting) {this.greeting = greeting;}greet() {return "<h1>" + this.greeting + "</h1>";} } ; var greeter = new Greeter("Hello, world!"); document.body.innerHTML = greeter.greet(); //# sourceMappingURL=hello.js.map

最后運行就可以在瀏覽器看到效果了。

可以使用內建服務器，也可以使用自動部署功能部署到本地或遠程服務器。

總結

以上是生活随笔為你收集整理的WebStorm使用TypeScript的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。