開始使用 TypeScript

時間 2019-11-10

標籤開始使用 typescript 简体版

原文原文鏈接

簡介

TypeScript是一種由微軟開發的自由和開源的編程語言。它是JavaScript的一個超集，並且本質上向這個語言添加了可選的靜態類型和基於類的面向對象編程。安德斯·海爾斯伯格，C#的首席架構師，已工做於TypeScript的開發。
TypeScript擴展了JavaScript的語法，因此任何現有的JavaScript程序能夠不加改變的在TypeScript下工做。TypeScript是爲大型應用之開發而設計，而編譯時它產生 JavaScript 以確保兼容性。
TypeScript 支持爲已存在的 JavaScript 庫添加類型信息的頭文件，擴展了它對於流行的庫如 jQuery，MongoDB，Node.js 和 D3.js 的好處。html

安裝TypeScript的支持

1.首先安裝 npm 工具 web

參見另一篇博文 https://my.oschina.net/u/659068/blog/1559410typescript

2. 使用命令行 npm install -g typescript 進行安裝npm

3. tsc -v 來驗證是否安裝成功編程

使用開發工具

使用開發工具,能夠大大的提升開發速度. 這裏推薦的開發工具是微軟的 visual studio codejson

固然你也能夠使用 Atom 或者 WebStrom 若是你高興 Eclipse 也能夠架構

Visual Studio Code (簡稱 VS Code / VSC) 是一款免費開源的現代化輕量級代碼編輯器，支持幾乎全部主流的開發語言的語法高亮、智能代碼補全、自定義熱鍵、括號匹配、代碼片斷、代碼對比 Diff、GIT 等特性，支持插件擴展，並針對網頁開發和雲端應用開發作了優化。軟件跨平臺支持 Win、Mac 以及 Linux，運行流暢，可謂是微軟的良心之做……app

訪問 https://code.visualstudio.com/ 官方網站進行下載便可webapp

新建工程

能夠在VSC中直接打開一個文件夾, 也能夠使用CMD命令行創建一個文件夾編程語言

在這裏我新建了一個ts-project的文件夾並使用VSC打開它

而後創建在工程根目錄創建 build 和 app 文件夾

在命令行或者終端中輸入 tsc --init 就會自動生成一個tsconfig.json 文件

而後修改代碼以下

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */
    "module": "system",                     /* Specify module code generation: 'none', commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    "sourceMap": true,                     /* Generates corresponding '.map' file. */
    "outFile": "./build/js/hello.js"
  }
}

在app文件夾下新建 func.ts 代碼以下

namespace com.avicsafety.webapp{
    export class TestFunction{
        createHelloDiv(name: string):HTMLDivElement {
            let div:HTMLDivElement = document.createElement('div');
            div.textContent = name + " = Hello TypeScript";
            return div;
        }
    }
}

在app文件夾下新建 hello.ts 代碼以下

/// <reference path="func.ts" />
let div = new com.avicsafety.webapp.TestFunction().createHelloDiv("shili === ")
document.querySelector("#app").appendChild(div);

在bulid文件夾中創建 index.html

<html lang="zh-cn"> 
    <head> 
        <meta charset="utf-8"> 
        <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> 
        <title>Hello world</title> 
    </head> 
    <body> 
        <div id="app"></div> 
        <script src="js/hello.js"></script> 
    </body> 
</html>

最後在命令行終端輸入 tsc 回車編譯器會自動根據 tsconfig.json 的內容進行編譯

最終完整的的目錄結構以下

最後咱們打開 index.html 看到以下表示成功了!

完成