官網:https://www。typescriptlang。org/zh/github:https://github。com/microsoft/TypeScript
介紹
TypeScript 是適用於任何規模應用的 JavaScript
TypeScript 擴充套件了 JavaScript ,為它添加了型別支援。
TypeScript 可以在您執行程式碼之前找到錯誤並提供修復,從而改善您的開發體驗。
任何瀏覽器,任何作業系統,任何執行 JavaScript 的地方,完全開源。
特點
1、TypeScript 是一個開源的程式語言,透過在 JavaScript(世界上最常用的語言之一) 的基礎上新增靜態型別定義構建而成。
型別提供了一種描述物件形狀的方法。可以幫助提供更好的文件,還可以讓 TypeScript 驗證你的程式碼可以正常工作。
在 TypeScript 中,不是每個地方都需要標註型別,因為型別推斷允許您無需編寫額外的程式碼即可獲得大量功能。
2、所有有效的 JavaScript 程式碼同時也是有效的 TypeScript 程式碼。你也許會有型別檢查的錯誤,但是這不會阻止你執行生成的 JavaScript。儘管您可以選擇更嚴格的行為,但是這意味著一切依然在您的控制中。
TypeScript 程式碼透過 TypeScript 編譯器或 Babel 轉譯為 JavaScript 程式碼,生成後的程式碼也是乾淨,簡潔,執行在任何可以執行 JavaScript 的地方,無論是在瀏覽器,Node。JS 還是在您的應用中。
3、使用 TypeScript 並不是一個二元選擇,您可以首先使用 JSDoc 來註釋現有的 JavaScript,然後只讓 TypeScript 檢查一小部分檔案,從而讓您的程式碼可以在後續迭代中逐漸完成遷移。
TypeScript 的型別推導意味著只有您希望獲得更佳的安全性時,才需要在您的程式碼中寫更多的型別註釋。
TypeScript 安裝
我們需要使用到 npm 工具安裝,如果你還不瞭解 npm,可以參考NPM 使用介紹。
NPM 安裝 TypeScript
如果你的本地環境已經安裝了 npm 工具,可以使用以下命令來安裝。
使用國內映象:
npm config set registry https://registry。npm。taobao。org
安裝 typescript:
npm install -g typescript
安裝完成後我們可以使用
tsc
命令來執行 TypeScript 的相關程式碼,以下是檢視版本號:
$ tsc -vVersion 3。2。2
然後我們新建一個 app。ts 的檔案,程式碼如下:
var message:string = “Hello World” console。log(message)
通常我們使用
.ts
作為 TypeScript 程式碼檔案的副檔名。
然後執行以下命令將 TypeScript 轉換為 JavaScript 程式碼:
tsc app。ts
這時候再當前目錄下(與 app。ts 同一目錄)就會生成一個 app。js 檔案,程式碼如下:
var message = “Hello World”; console。log(message);
使用 node 命令來執行 app。js 檔案:
$ node app。js Hello World
TypeScript 轉換為 JavaScript 過程如下圖:
typeScript 基礎語法
TypeScript 程式由以下幾個部分組成:
模組
函式
變數
語句和表示式
註釋
第一個 TypeScript 程式
我們可以使用以下 TypeScript 程式來輸出 “Hello World” :
Runoob。ts 檔案程式碼:
const hello : string = “Hello World!” console。log(hello)
以上程式碼首先透過
tsc
命令編譯:
tsc Runoob。ts
Runoob。js 檔案程式碼:
var hello = “Hello World!”; console。log(hello);
最後我們使用 node 命令來執行該 js 程式碼。
$ node Runoob。jsHello World
整個流程如下圖所示:
我們可以同時編譯多個 ts 檔案:
tsc file1。ts file2。ts file3。ts
tsc 常用編譯引數如下表所示:
序號
編譯引數說明
1。
--help
顯示幫助資訊
2。
--module
載入擴充套件模組
3。
--target
設定 ECMA 版本
4。
--declaration
額外生成一個 。d。ts 副檔名的檔案。
tsc ts-hw。ts ——declaration
以上命令會生成 ts-hw。d。ts、ts-hw。js 兩個檔案。
5。
--removeComments
刪除檔案的註釋
6。
--out
編譯多個檔案併合併到一個輸出的檔案
7。
--sourcemap
生成一個 sourcemap (。map) 檔案。
sourcemap 是一個儲存原始碼與編譯程式碼對應位置對映的資訊檔案。
8。
--module noImplicitAny
在表示式和宣告上有隱含的 any 型別時報錯
9。
--watch
在監視模式下執行編譯器。會監視輸出檔案,在它們改變時重新編譯。
TypeScript 保留關鍵字
TypeScript 保留關鍵字如下表所示:
break
as
catch
switch
case
if
throw
else
var
number
string
get
module
type
instanceof
typeof
public
private
enum
export
finally
for
while
void
null
super
this
new
in
return
true
false
any
extends
static
let
package
implements
interface
function
new
try
yield
const
continue
do
空白和換行
TypeScript 會忽略程式中出現的空格、製表符和換行符。
空格、製表符通常用來縮排程式碼,使程式碼易於閱讀和理解。
TypeScript 區分大小寫
TypeScript 區分大寫和小寫字元。
分號是可選的
每行指令都是一段語句,你可以使用分號或不使用, 分號在 TypeScript 中是可選的,建議使用。
以下程式碼都是合法的:
console。log(“Runoob”)console。log(“Google”);
如果語句寫在同一行則一定需要使用分號來分隔,否則會報錯,如:
console。log(“Runoob”);console。log(“Google”);
TypeScript 註釋
註釋是一個良好的習慣,雖然很多程式設計師討厭註釋,但還是建議你在每段程式碼寫上文字說明。
註釋可以提高程式的可讀性。
註釋可以包含有關程式一些資訊,如程式碼的作者,有關函式的說明等。
編譯器會忽略註釋。
TypeScript 支援兩種型別的註釋
單行註釋 ( // )
− 在 // 後面的文字都是註釋內容。
多行註釋 (/* */)
− 這種註釋可以跨越多行。
註釋例項:
// 這是一個單行註釋 /* 這是一個多行註釋 這是一個多行註釋 這是一個多行註釋 */
TypeScript 與面向物件
面向物件是一種對現實世界理解和抽象的方法。
TypeScript 是一種面向物件的程式語言。
面向物件主要有兩個概念:物件和類。
物件
:物件是類的一個例項(
物件不是找個女朋友
),有狀態和行為。例如,一條狗是一個物件,它的狀態有:顏色、名字、品種;行為有:搖尾巴、叫、吃等。
類
:類是一個模板,它描述一類物件的行為和狀態。
方法
:方法是類的操作的實現步驟。
下圖中
girl、boy
為類,而具體的每個人為該類的物件:
TypeScript 面向物件程式設計例項:
class Site { name():void { console。log(“Runoob”) } } var obj = new Site(); obj。name();
以上例項定義了一個類 Site,該類有一個方法 name(),該方法在終端上輸出字串 Runoob。
new 關鍵字建立類的物件,該物件呼叫方法 name()。
編譯後生成的 JavaScript 程式碼如下:
var Site = /** @class */ (function () { function Site() { } Site。prototype。name = function () { console。log(“Runoob”); }; return Site; }()); var obj = new Site(); obj。name();
執行以上 JavaScript 程式碼,輸出結果如下:
Runoob
覺得效果不錯的請幫忙加個關注點個贊,每天分享前端實用開發技巧