學習TypeScript,筆記一:TypeScript的簡介與數據類型

来源:https://www.cnblogs.com/MrDin/archive/2019/03/27/10608650.html
-Advertisement-
Play Games

該文章用於督促自己學習TypeScript,作為學筆記進行保存,如果有錯誤的地方歡迎指正 2019-03-27 16:50:03 一、什麼是TypeScript? TypeScript是javascript的超集,在ts中可以使用所有的js代碼,並對js進行了擴展,包括類型效驗,數據類型,介面等 如 ...


該文章用於督促自己學習TypeScript,作為學筆記進行保存,如果有錯誤的地方歡迎指正

 2019-03-27  16:50:03


 

一、什麼是TypeScript?

TypeScript是javascript的超集,在ts中可以使用所有的js代碼,並對js進行了擴展,包括類型效驗,數據類型,介面等

如圖所示,TypeScript包含了javascript併進行延伸

 

二、準備工作

在說TypeScript之前先說一下如何讓ts編譯為js代碼

首先安裝 typescrpt,

npm install -g typescript 

將ts編譯為js代碼,在命令行中輸入

tsc index.ts

但不能每次寫完代碼都輸入一遍 tsc 來進行編譯吧?那也太麻煩了,我們能不能直接保存就自動編譯呢?可以的,下麵是使用VScode的自動編譯方法

首先在文件根目錄下打開命令行輸入,

tsc --init

 

輸入以後會在文件中出現一個 tsconfig.json 文件

 

在文件中將 "outDir" : "./"打開,改為 "outDir" : "./js" ,表示編譯後的 .js 文件 的存放位置

 

 

在 VScode 的工具欄中選擇:終端 --> 運行任務

 

在工具欄彈出框里選擇:

tsc:監視 - tsconfig.json

 

這樣就配置完成了,可以在文件中試一試,保存ts文件後,會在文件中生成一個名為js的文件,裡面就是編譯後的 同名.js 文件,在html中引入js,就可以進行測試了

 

三、TypeScript的數據類型

1)布爾值類型(boolean)

使用 ts 的高級工具 類型註解來創建一個變數 bol ,要求 變數bol 的值得類型為 boolean 類型,否則會報錯

 

2)數字類型(number)

支持所有浮點數,並支持二進位、八進位、十進位、十六進位的寫法

 

3)字元串類型(string)

支持雙引號 " "、單引號 ' ' 和模板字元串 ` `

 

4)數組類型(Array)

創建模板字元串有兩種方式:

第一種:在變數名的類型後面加上 [ ] ,表示數組內的元素都是同一個類型:

 

第二種:是數組泛型,使用Array<元素類型>

 

5)元組類型(Tuple)

元組也是數組的一種,ts的數組如果使用使用類型註解來創建,數組的元素就具有效驗的功能,但是未免太單一,而使用元組的方式創建數組,會稍微靈活那麼一點點

使用元組來創建:

瀏覽器輸出為:

在圖示中可以看到,元組可以規定前兩個元素的類型,下標為 0 的元素必須為 string,下標為 1 的元素必須為 number,而後的元素則會使用聯合類型替代,可以是 string 或 number ,我嘗試了隔空添加元素,下標為 2 的元素 顯示為 empty(空),在遍歷這個元組的時候,empty不會被遍歷出來,只會遍歷到 “10”  1  “123” ,對應的下標為0,1,3

圖示中的報錯是vscode插件的報錯,不會影響運行

 

6)枚舉類型(enum)

枚舉類型可以是對狀態碼的標識,如 0 代表成功支付 ,1 代表失敗支付,2 代表取消訂單,3 代表未支付 這樣的狀態碼標識不易讀,可以使用枚舉的方式來標識

看到枚舉類型 Status 的輸出,就明白了為什麼可以得到 Status[1] 為success 了

枚舉類型也可以不賦值,預設從 0 開始,一旦手動賦值後,前面的值不變,後面的值會依次遞增

 

7)任意類型(any)

在實際使用中我們也許並不想讓 ts 進行類型註解,就可以使用 any類型 ,any類型的好處在於,當我們不確定這個值為什麼類型的時候,用 any類型註解 聲明後的變數,他的類型是不確定的,從而使得這個變數可以調用任何不同類型的方法,但是編譯器不會檢查

 

 

可以使用 any 來進行數組的類型註解,不限制數組的元素類型

 

 8)無類型(void)

void類型可以說與any類型完全相反,當函數沒有返回值時返回的類型就是 void 類型,一般來說聲明一個 void類型 的變數沒有什麼用,void 類型只能被賦值,undefined 和 null 

在 typescript 中 預設情況下 undefined 和 null 是所有類型的子類型,可以將他們賦值給 number 類型的變數

當指定了嚴格模式 --strictNullChecks 後,undefined 和 null 只能賦值給他本身

 

9)never類型(never)

never類型表示永遠不存在的值的類型,

引入官方文檔的示例圖

never類型是所有類型的子類型,但never類型本身沒有子類型或任何類型都不能賦值給他,連any都不行,never只能賦值給never

 

9)Object類型

object類型表示非原始類型,就是除了 boolean,number,string,array,undefined,null 之外的類型

參考官方給的圖片

圖片示例的意思我理解的是這樣的:

創建一個create函數,參數 o 的類型註解表示,參數的類型為 object 或者 null ,函數create的返回值為 void類型

接著調用函數,發現參數為 {prop:0} 和 null 是可以的

參數為 數字 42,字元串 "string",布爾值 false,無類型 undefined,都不可以

 

補充:類型斷言

類型斷言使用在告訴編譯器,你已完全確定這個值的類型,編譯器將會跳過數據檢查,不影響運行

類型斷言有兩種寫法

第一種:使用尖括弧

 

第二種:使用 as 語法

 

註意:在 TypeScript 中使用 JSX,只能用 as語法 的類型斷言


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Hello, 大噶好, 小葵花媽媽課堂開課啦。。。。。。 我們日常工作中拿到的數據不可能是只有一維的平面數組, 百分之99.99 是數組裡嵌套數組再套數組的n維數組 ............................. 這種讓人想問候它xx的多維數組我們怎麼把它變成一維數組, 也就是只有一個中 ...
  • angular.js AngularJS [1] 誕生於2009年,由Misko Hevery 等人創建,後為Google所收購。是一款優秀的前端JS框架,已經被用於Google的多款產品當中。AngularJS有著諸多特性,最為核心的是:MVC(Model–view–controller)、模塊化 ...
  • 這是一個非常老牌的Bootstrap商業模板,全面性和穩定性俱佳 ...
  • JavaScript中的閉包 JavaScript中的閉包 介紹 在大多數常用語言中,函數返回後,所有局部變數不再可訪問,因為堆棧幀已被銷毀。牢記這一點,閉包可以被看作是當函數返回時不會釋放的棧幀。 為什麼使用閉包 我有很多人問我為什麼要關閉。我會儘力解釋。 我遇到過閉包的場景是使用Tabular ...
  • 什麼是事件冒泡 <div style="width: 200px;height: 200px;background: red;margin: 200px auto;" onclick="box()"> <p onclick="test()" style="background: blue"> wub ...
  • 1.無限滾動的運用場景: 一般運用在列表展示,有分頁、下拉載入更多的需求中。 2.代碼分析 代碼很簡單,實現了列表分頁,數據載入完之後顯示數據狀態 參考mint-ui官網介紹 1.為HTML元素添加v-infinite-scroll指令即可使用無限滾動。 2.滾動該元素,當其底部與被滾動元素底部的距 ...
  • 這裡先放上官網的教程和說明:點擊這裡,vue導航守衛官方文檔 路由守衛 路由守衛說白了就是路由攔截,在地址欄跳轉之前 之後 跳轉的瞬間 乾什麼事 全局守衛 全局守衛顧名思義,就是全局的,整個項目所有路由,跳轉所用到的守衛(攔截),設置了全局守衛之後,只要路由(瀏覽器地址欄)發生變化就會觸發的事件 全 ...
  • [toc] 1. 搭建環境 2. React知識點 1. 組件 組件:就是將整個UI拆分為很多小的,可重用的UI,每一個小的UI獨立做自己的事情。 1.1 定義一個組件 一個組件需要繼承 重寫 函數,返回 註意點: 1.只要有JSX的地方必須引入 2.返回值中只能有一個元素包裹, 包裹整個JSX,如 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...