系統學習 TypeScript（二）——開發流程和語法規則

程式設計三昧發表於2022-02-22
TypeScript

TypeScript

前言

我們已經知道了 TypeScript 是什麼，以及為什麼要用 TypeScript，今天，我們就來學習怎麼初步使用它。

TypeScript 的使用流程

原始的 TypeScript 檔案以 .ts 結尾，它不能被直接使用到頁面中，需要經過編譯，轉換成 JavaScript （.js）檔案才行。

TypeScript 的使用流程基本上如下圖所示：

image-20220222181806584

編譯 TypeScript 檔案的這一步，我們使用的是前面安裝的全域性 TypeScript 模組，編譯指令為：

tsc index.ts

透過這一步的編譯之後，會在 index.ts 同級目錄下生成一份 index.js 檔案，我們最終在頁面中使用的就是編譯產生的 JavaScript 檔案。

我們在前面說過，TypeScript 是靜態的，會在編譯過程中進行資料型別、語法等的檢測，如果發現錯誤會立即報錯，比如我們編譯下面的 TypeScript 程式碼：

// index.ts
let a: number = 12;
a = "程式設計三昧";

產生如下報錯：

image-20220222184145977

雖然編譯階段發生了報錯，但最終還是會生成一份 JavaScript 檔案：

// index.js
var a = 12;
a = "程式設計三昧";

編譯報錯後是否生成 JavaScript 檔案跟 TypeScript 編譯器的配置項有關，我們會在後面介紹編譯配置的詳細資訊。

TypeScript 基本語法規則

學習一門語言，首先應該學習的應該是它的語法規則，只有掌握了規則，才能保證少犯錯誤。

TypeScript 的基本語法規則和 JavaScript 相同。

TypeScript 保留關鍵字

和 JavaScript 一樣，TypeScript 也有保留關鍵字，主要有：

image-20220222184939869

我們在使用 TypeScript 進行編碼時，需要注意這些保留關鍵字的使用。

空白和換行

TypeScript 會忽略程式中出現的空格、製表符和換行符。

我們經常使用空格、製表符通常用來縮排程式碼，使程式碼易於閱讀和理解。

function add(x: number, y: number): number {
    return x + y;
}

TypeScript 區分大小寫

TypeScript 區分大寫和小寫字元。

let name: string = "bianchengsanmei";
let Name: string = "程式設計三昧";
// name 和 Name 是不同的變數

分號是可選的

每行指令都是一段語句，你可以使用分號或不使用， 分號在 TypeScript 中是可選的，但是我們建議使用每一段語句都使用分號結束。

TypeScript 註釋

註釋是一個良好的習慣，雖然很多程式設計師討厭注÷釋，但還是建議你在每段程式碼寫上文字說明。

註釋可以提高程式的可讀性。

註釋可以包含有關程式一些資訊，如程式碼的作者，有關函式的說明等。

  • 單行註釋 ( // ) − 在 // 後面的文字都是註釋內容。
  • 多行註釋 (/* */) − 這種註釋可以跨越多行。
/*
 * @Author       : 程式設計三昧
 * @FilePath     : /typescript_learning/1.基本使用/index.ts
 */

// 名稱的拼音
let name: string = "bianchengsanmei";
// 名稱的漢字
let Name: string = "程式設計三昧";

總結

關於 TypeScript 的使用流程和基本語法規則就說到這裡，其實和 JavaScript 大差不差。

學習有趣的知識，結識有趣的朋友，塑造有趣的靈魂！

大家好，我是〖程式設計三昧〗的作者 隱逸王，我的公眾號是『程式設計三昧』，歡迎關注，希望大家多多指教！

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章