TypeScript（入門）

時間 2019-11-12

標籤 typescript 入門简体版

原文原文鏈接

最近由於項目的須要開始着手調查一個叫作typescript的東西，經過翻閱一些github上的源碼，一些論壇的文檔，漸漸的有所瞭解。不管去學習研究哪一種框架或者哪一種語言，咱們首先要知道的應該是如何去構建開發環境。javascript

實踐才能多出錯多瞭解嘛，這就是所謂的實踐出真知。廢話很少言，咱們先來看看typescript是如何被介紹的。html

經過介紹咱們瞭解到typescript對javascript有很好的支持，屬於javascript的一個超集。屬於把javascript開發集成爲真正的面向對象的，強類型的框架，使前臺的開發能夠像後臺開發同樣，模塊化，便利化，大大的提升了開發的效率。java

首先咱們看看開發typescript須要哪些東西？node

首先咱們須要安裝Node.js（Node.js 是一個基於 Chrome V8 引擎的 JavaScript 運行環境。）http://nodejs.cn/官方網站上能夠下載本身的電腦對應的版本。
其次咱們須要nodejs的版本管理工具npm,安裝完成後npm install -g typescript經過這個命令就能夠下載安裝TypeScript Compiler了。
更新TypeScript Compiler
- 輸入指令：npm update -g typescript
- 查看版本：tsc -v
安裝Visual Studio Code 開發工具
- Visual Studio Code (VS Code) 是微軟開發的、免費開源、功能強大的輕量級的IDE。
- 運行環境：Windows 7 (64位)

我的以爲學習typescript最快最好的方式是親自實驗，經過github網站去下載基本的原型框架，經過本地搭建的環境試着去運行別人的demo。git

下面咱們簡單的介紹一下，在本地該如何去搭建運行的環境。github

第一步，在本地新建一個文件夾，暫且命名爲typescript。經過命令行進入這個文件夾，而後執行 tsc --init命令進行基本的初期化，在本地會生成一個叫作tscconfig.json的配置文件。typescript

第二步，經過vscode工具打開當前目錄。npm

第三步，咱們開始編譯構建的環境，Ctrl+Shift+B。而後以下圖所示。json

而後咱們選擇構成管理，會生成新的編譯文件。暫時先不上圖了。接下來咱們試着去寫咱們第一個typescript文件。仍是學習代碼的老規則暫且叫作helloword.ts框架

class Hello {
    firstName : string;
    lastName : string;
    constructor(fiestName : string,  lastName : string) {
        this.firstName = fiestName;
        this.lastName = lastName;
    }
    greeter() {
        return "歡迎來到typescript的世界，hello" + this.firstName + " " + this.lastName;
    }
}

var user = new Hello("王", "小二");

document.body.innerHTML = user.greeter();

View Code

代碼編寫完成後，咱們須要對它進行編譯的工做，仍是Ctrl+Shift+B，而後你會發現原來的目錄下多個一個叫作helloword.js的文件代碼以下：

var Hello = (function () {
    function Hello(fiestName, lastName) {
        this.firstName = fiestName;
        this.lastName = lastName;
    }
    Hello.prototype.greeter = function () {
        return "歡迎來到typescript的世界，hello" + this.firstName + " " + this.lastName;
    };
    return Hello;
}());
var user = new Hello("王", "小二");
document.body.innerHTML = user.greeter();

View Code

其實咱們正真的引用是叫作js的這個文件，而不是ts自己。當咱們編譯完成後咱們還須要一個頁面來測試咱們的代碼是否是能夠正常的顯示，所以咱們新建了一個叫作index.html的文件。代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Word</title>
</head>
<body>
    <script src="helloword.js"></script>
</body>
</html>