TypeScript初探

TypeScript是什么？跟JavaScript有什么區別？要不要值不值得學習TypeScript？接下來我將介紹一下TypeScript，將講述從零開始到HelloWorld的過程，初探一下TypeScript，整個過程下來后，上邊的疑問應該都會有個結果。

基本介紹

TypeScript是微軟開發的開源編程語言，是JavaScript的一個超集，擴展了JavaScript的語法，添加了靜態類型和基于類的面向對象編程，是一種強類型語言?，F有的JavaScript程序可以不作任何改變就能在TypeScript下工作。學過ES6的話，會覺得ES6和TypeScript很像，是的，TypeScript實現了ES6的特性，并且進行了擴展，最大的改善是增加了類型系統，兩者都需要編譯才能在瀏覽器運行，編譯目標都是JavaScript。

實現TypeScript版HelloWorld

有句話叫show me the code，don’t …；其實挺有道理的，那么我們就先來實現一個TypeScript的HelloWorld，先感受一下再討論吧。

①安裝TypeScript

本人使用的是npm方法安裝，使用的是淘寶鏡像cnpm，打開控制臺輸入：
cnpm install typescript -g
回車，等待，隨后輸入tsc -v，能查看版本證明安裝成功。

②編寫ts文件

新建一個名為TypeScript的文件夾，在文件夾里新建一個名為 hello.ts 的文件，打開一個編輯器，推薦使用VS，因為同樣是Microsoft的產品，輸入以下代碼：

function hello(word) {return 'hello, ' + word } let word = 'TypeScript' console.log(hello(word))

即：

打開控制臺，進入TypeScript文件夾，輸入以下命令編譯hello.ts
tsc hello.ts
可以看到，TypeScript文件夾下多了一個hello.js文件，此文件由hello.ts文件編譯而來。

運行編譯出來的js文件

本人使用的是node的方式，不喜歡使用node的話，也可以在網頁中引入編譯出來的js文件然后再瀏覽器看結果。
在控制臺輸入以下命令：
node hello.js
隨后，TypeScript版HelloWorld就會打印出來。

是不是覺得hello.ts跟編譯出來的hello.js一樣？是的，這正是證實了JavaScript程序可以不做修改地在TypeScript下工作這個結論。上邊的兩個程序一樣，是因為還沒有加上TypeScript相對于JavaScript擴展的新特性。

更TypeScript的HelloWorld

為什么說更呢？接下來我們使用一些TypeScript相對JavaScript特有的東西修改我們的hello.ts，將hello.ts修改成以下寫法：

function hello(word: string) {return 'hello, ' + word } let word = 111 console.log(hello(word))

會發現編譯器報了以下錯誤：

為什么會報錯？因為我們使用了TypeScript的類型注解，類型注解是一種為函數或變量添加約束的方式，也就是上邊的代碼中，word只能是string類型，否則會報錯，要想正確運行以上代碼，需要對hello()中的參數類型改為number或者對函數外的word改為字符串類型。

修改后便不會報錯，使用之前的方法，將ts文件編譯成js文件，然后再次
node hello.js
可以看到

再次將hello.ts代碼改為如下寫法：

class Student {fullName: stringconstructor(public firstName, public lastName) {this.fullName = firstName + " " + lastName} }interface Person {firstName: stringlastName: string }function greeter(person : Person) {return "Hello, " + person.firstName + " " + person.lastName }let user = new Student("Kobe", "Bryant") console.log(greeter(user))

跟之前一樣運行編譯出來的js，可以看到：

是不是挺有意思的？可是為什么會這樣？還有其他更有意思的知識嗎？本文只是講解一下TypeScript是什么，以及實現HelloWorld，更多內容可留意本人后續博客或者直接訪問TypeScript官網學習，有錯誤歡迎指出，謝謝。
祝學習愉快~~~~
TypeScript官網：http://www.typescriptlang.org/

總結

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

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