TypeScript學習筆記(一)TS介紹,環境安裝與運行


介紹:

TypeScript是JavaScript的超集,擴展了JavaScript的語法,因此現有的JavaScript代碼可與TypeScript一起工作無需任何修改,TypeScript通過類型注解提供編譯時的靜態類型檢查。其源於JavaScript(JS的拓展),終於JavaScript(編譯成JS)
TypeScript 起源於使用JavaScript開發的大型項目 。由於JavaScript語言本身的局限性,難以勝任和維護大型項目開發。因此微軟開發了TypeScript ,使得其能夠勝任開發大型項目。

環境安裝:

首先安裝node與npm,參考這篇文章
打開cmd,運行以下命令安裝TypeScript

npm install -g typescript

安裝完成后輸入 tsc -v 查看安裝是否成功,然而有時會碰上下圖問題,系統禁止執行腳本

首先輸入get-ExecutionPolicy來獲取是否允許腳本執行狀態,顯示Restricted說明腳本不被允許執行,此時我們輸入 set-ExecutionPolicy RemoteSigned即可

網上還有一種方式是刪除ts依賴下的tsc.ps1文件,親測有效,副作用尚未發現

IDE推薦:

微軟官方的Visual Studio Code(簡稱VS Code):做開發以來使用的最舒服的輕量級IDE,支持ts開發,之前用的sublime和atom總感覺缺點什么,這款編輯器插件豐富,界面簡潔,如今支持配置同步,讓開發得心應手
JetBrains公司旗下的WebStorm:作為一款重量級web編輯器,功能可以說是非常齊全,在編輯ts時可以配置自動編譯,如果說VScode輕量簡潔開發舒服,Webstorm可以說是功能強大,專為web開發而生的神器

開發與運行:

以VS-Code為例:
在目錄下新建app.ts文件,輸入以下代碼

class HelloWorld {
    constructor() { }
    say() {
        console.log('hello world')
    }
}
new HelloWorld().say()

將cmd打開於當前目錄下,輸入tsc app.ts或者簡寫tsc app,ts會編譯一個app.js文件生成在目錄下,編譯結果如下

var HelloWorld = /** @class */ (function () {
    function HelloWorld() {
    }
    HelloWorld.prototype.say = function () {
        console.log('hello world');
    };
    return HelloWorld;
}());
new HelloWorld().say();

這就是我們熟悉的JS原生代碼,我們使用node app.js或者簡寫node app執行app.js,控制台會輸出hello world

然而每次都需要編譯ts並在node執行調試有點麻煩,這里推薦一個插件ts-node,在cmd中全局安裝依賴

npm i ts-node -g

安裝完成之后在cmd中執行 ts-node app,會直接編譯並在node中執行,打印hello world(注意:該操作不會生成app.js文件,而是直接自動編譯直接執行)

當然,在webstorm中,打開設置,將TS的自動編譯打開,也會節省不少事

總結:

以上就是TypeScript起步的介紹,環境安裝與運行及注意事項


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM