使用VSCode搭建TypeScript開發環境 (重點)

時間 2019-11-24

標籤使用 vscode 搭建 typescript 開發環境重點简体版

原文原文鏈接

下載TypeScript

在CMD（Windows系統）或者終端（macOS系統）中輸入一下命令：css

npm install -g typescript

下載VSCode

VSCode是我使用過最棒的編輯器沒有之一，比Sublime Text還有優秀。html

建立項目

建立目錄

首先咱們建立一個項目文件夾，好比叫ts_vscode，而後建立一些主要目錄，在VSCode中打開項目html5

目錄結構：node

ts_vscode/
    └─src/
        ├─ css/
        ├─ fonts/
        └─ images/

在ts_vscode  中 按shift 右鍵 命令行中打開。   輸入 code . 打開項目

建立`package.json`

使用命令npm init來建立package.json文件，通常默認就能夠，具體詳情能夠看這裏。jquery

目錄結構：nginx



ts_vscode/
    ├─ src/
    │    ├─ css/
    │    ├─ fonts/
    │    └─ images/
    └─ package.json

建立`tsconfig.json`

使用tsc --init命令就能夠快速建立一個tsconfig.json文件，關於tsconfig.json的屬性描述請訪問這裏。sql

目錄結構：typescript

ts_vscode/
    ├─ src/
    │    ├─ css/
    │    ├─ fonts/
    │    └─ images/
    ├─ package.json └─ tsconfig.json

安裝項目依賴和開發依賴

咱們的這個項目使用jQuery和Bootstrap來作，所以咱們使用npm來安裝：shell

npm install jquery bootstrap --save

咱們的項目使用了TypeScript來開發，所以咱們須要下載相對應的聲明文件，關於聲明文件請訪問這裏。安裝聲明文件命令：npm

npm install @types/jquery @types/bootstrap -save-dev

建立`index.html`

在ts_vscode目錄下建立index.html，index.html文件中放入下面的代碼：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>TypeScript with VSCode</title>
  <!-- Bootstrap -->
  <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
  <link rel="stylesheet" href="./src/css/index.css">
</head>

<body>
  <h1 class="text-center"></h1>
  <div class="container">
    <div class="row show-grid">
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
    </div>
    <div class="row show-grid">
      <div class="col-md-8">.col-md-8</div>
      <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row show-grid">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row show-grid">
      <div class="col-md-6">
        <button type="button" class="btn btn-default" aria-label="Left Align">
          <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
        </button>
      </div>
      <div class="col-md-6">
        <button type="button" class="btn btn-default btn-lg">
          <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
        </button>
      </div>
    </div>
  </div>
  <!-- /.modal -->
  <!-- js -->
  <script src="./node_modules/jquery/dist/jquery.min.js"></script>
  <script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  <script src="./src/index.js"></script>
</body>

</html>

目錄結構：

ts_vscode/
    ├─ src/
    │    ├─ css/
    │    ├─ fonts/
    │    └─ images/
    ├─ index.html
    ├─ package.json └─ tsconfig.json

建立`index.ts`文件並編寫TS代碼

在src目錄下建立index.ts文件。咱們使用TS編寫一個類，並使用這個類的方法向index.html的h1標籤中插入一句話，代碼以下：

class Main {
    constructor() {

    }

    name: string;

    show(text: string): void {
        let $ele: JQuery = $("h1");
        $ele.text(text);
    }
}

let main = new Main();
main.name = "Hello TypeScript";
main.show(main.name);

目錄結構：

ts_vscode/
    ├─ src/
    │    ├─ css/
    │    ├─ fonts/
    │    ├─ images/
    │    └─ index.ts
    ├─ index.html
    ├─ package.json └─ tsconfig.json

編譯和啓動項目

咱們使用package.json中的scripts來編譯和啓動項目。

編譯比較簡單，tsc命令就能夠編譯項目，tsc -w命令監控並自動編譯，編譯會使用tsconfig.json中的配置項。

啓動項目咱們安裝live-server，來幫助咱們啓動一個服務器環境，live-server很是輕便且帶有自動刷新功能，咱們使用npm全局安裝便可：

npm install -g live-server

安裝完畢後，咱們修改package.json中的scripts以下：

"scripts": { "test": "tsc -w & live-server" }

最終目錄結構：

最後咱們在終端中輸入npm t就能夠啓動項目了.

npm t 是

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。