TypeScript 旅途1:基礎類型

来源:https://www.cnblogs.com/tornodo/archive/2018/01/27/8366218.html
-Advertisement-
Play Games

相信你在寫JavaScript代碼的時候也碰到過很頭疼的時刻,比如對象的屬性名或方法名大小寫錯了,或是記不得某個對象有沒有某個屬性,害怕最新的ES標準有的瀏覽器還沒有支持...等等種種問題,那麼你需要使用TypeScript,你會愛上她的(●'◡'●)。 TypeScript是JavaScript的 ...


TypeScript

相信你在寫JavaScript代碼的時候也碰到過很頭疼的時刻,比如對象的屬性名或方法名大小寫錯了,或是記不得某個對象有沒有某個屬性,害怕最新的ES標準有的瀏覽器還沒有支持...等等種種問題,那麼你需要使用TypeScript,你會愛上她的(●'◡'●)。

  • TypeScript是JavaScript的超級,她是靜態類型檢查的

    這就意味著,你的變數、函數參數、返回值等等都是確定類型的,當你試圖使用不相容的類型,那麼你的開發工具會提示你錯誤,並且拒絕給你編譯。

  • 開發工具智能提示

    主流的開發工具都支持TypeScript,智能提示會讓你感覺像是在使用Idea來寫Java代碼一樣的享受。

  • 方便的代碼重構

    面向對象與介面編程,擁有非常清晰的代碼結構,可讀性大大提高。

  • 容易上手,初次接觸,也能看懂

    高度相容原生腳本語法,對語法的破壞性較少,即使沒接觸過的人,也能很快上手,初次閱讀也沒有什麼障礙。

本著解決JavaScript的糟糕之處,這註定是個不平凡的開源項目。
Phaser、Cocos2dx、laybox、白鷺等等游戲引擎都有TS版本。更多的使用TypeScript的開源項目可以參考這裡

關於開發環境搭建與調試配置可以參考這裡

下麵正式介紹TypeScript的基礎類型,無論學習一門什麼語言,從基礎類型開始都再合適不過了。

  • 先介紹兩個關鍵字let和const
    ```
    //let const
    //let 定義的變數有一個新的變數環境
    for (let i = 0; i < 10 ; i++) {
    setTimeout(function() {console.log(i); }, 100 * i);
    }

//const 定義的變數屬於常量,不能更改
const a: number = 19;
//a = 20;//錯誤,不允許改變常量
const alian = {
name: "alian",
age: 35
}

// 錯誤,因為alian是const定義的
// alian = {
// name: "haha",
// age:22
// }

>let定義的變數不會像var定義的變數那樣污染全局環境。
const定義一個對象的時候,可以修改對象的屬性值,但是不能修改對象引用。

* **布爾類型**

// 布爾類型
let success: boolean = true;
let failed: boolean = false;

>類型名**boolean**定義一個布爾類型,值為*true*或*false*。如果不寫類型名,則會自動推斷出類型。

* **數字類型**

// 數字類型
let dec: number = 9;//10進位
let hex: number = 0xABCD;//16進位
let bin: number = 0b1011;//二進位
let octal: number = 0o123;//八進位

>關鍵字**number**定義一個數字類型,值可以是二進位(0b開頭)、八進位(0o開頭)、十進位、十六進位(0x開頭)。

* **字元串**

// 字元串
let hello: string = "hello";
let world: string = 'world';
let today: number = 1.26;
let express: string = ${hello} ${world}, today is ${today};//模版字元串

>關鍵字**string**定義一個字元串變數。
使用``定義一個多行字元串(可以帶有表達式 **${變數名}**)。

* **數組**

// 數組
let numbers: number[] = [0x1, 0o32, 0b11, 3, 2, 1];
let names: string[] = ['ana', 'hello', ${hello} + ${world}];
let result: Array

>**類型名稱[]** 定義一個指定類型的數組。
**Array<類型名稱>** 同樣定義一個指定類型的數組。

* **元組 Tuple**

//元組 Tuple
let x: [string, number, boolean];
x = ['name', 35, false];

console.log(x[0].substr(1)); //ame
console.log(x[1].toString()); //35

> **[類型名、類型名...]** 定義一個元組,一個元組裡可以包含幾個不同類型的變數。

* **枚舉**

//枚舉
enum Color {Red = 1, Green, Blue}
let color: Color = Color.Blue;
let color2: string = Color[2];
console.log(color2); //Green

>非常有用的一種類型。關鍵字**enum name{value...}** 定義一個枚舉。預設情況下,從0開始為元素編號,可以手動設置一個數字編號,後面沒有設置編號的會依次往上疊加。
>TypeScript 2.4開始支持枚舉成員變數包含字元串構造器,如***enum Color {Red = 'a', Green = 'b', Blue = 'ccc'}***,只是每個元素的編號都要手動設置,需要註意的是字元串枚舉成員不能被反向映射到枚舉成員的名字。 換句話說,你不能使用 Color["a"] 來得到 "Red" 。。
>有了枚舉就可以把同類型但是互斥的變數定義成一個枚舉,而不用定義成一些變數了(比如描述一個音量開關按鈕的開關狀態等等)。

* **Any**

//Any
let y: any = 4;
y = false;
y = 'type not sure';
//y.name();
console.log((y as string).length); //13

let anyArray: Array

>雖然是強類型的,但是有了**any**就有了自由。一個定義為any類型的變數,在使用的過程中可以改變它的值類型,甚至可以調用它的方法,但是需要小心,如果沒有這個方法,會出異常。
![不存在的方法](//upload-images.jianshu.io/upload_images/9984013-af1fe2aa93c1f1e7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

* **Void**

//Void
function noReturn(): void {
console.log('no return function');
}

let useless: void = null;
useless = undefined;

>某種程度上來說,**void**類型像是與**any**類型相反,它表示沒有任何類型。比如定義一個方法沒有返回值。
聲明一個**void**類型的變數沒有什麼大用,因為你只能為它賦予*undefined*和*null*。

* **Null 和 Undefined**

//Null 和 Undefined
let u: undefined = undefined;
let n: null = null;
let age: number = undefined;
let married: boolean = null;

>和 **void**相似,它們的本身的類型用處不是很大。
預設情況下**null**和**undefined**是所有類型的子類型。 就是說你可以把 **null**和**undefined**賦值給其它類型(比如**number**、**string**等等)的變數。

* **Never**

//Never
function fail(message: string): never {
throw new Error(message);
}

>同樣是一個沒什麼用的類型。**never**類型表示的是那些永不存在的值的類型。 例如, **never**類型是那些總是會拋出異常或根本就不會有返回值的函數表達式或Lambda表達式的返回值類型。

* **類型斷言**

let y: any = 4;
y = false;
y = 'type not sure';
//y.name();
console.log((y as string).length); //13
console.log(

當我確定某個變數是什麼類型的時候可以使用類型斷言,明確告訴編譯器我知道它是什麼類型。類型斷言使用y as string或者兩種方式都行。

九層之台,起於壘土,千里之行,始於足下。有了類型基礎,就可以對TypeScript進行下一步的觀光學習了。
公眾號二維碼


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

-Advertisement-
Play Games
更多相關文章
  • SQL語句系列 1、SQL語句之行操作 2、SQL語句之表操作 3、SQL語句之資料庫操作 4、SQL語句之用戶管理 關係型資料庫的存儲形式 在關係型資料庫中,數據都是以類似於Excel表格的形式存儲(如下圖),我們將“列名”稱作“欄位”,一條數據指一行存儲的信息,對這一行的數據主要的操作有“增、刪 ...
  • 優點 1. 運行速度:對於很簡單的sql,存儲過程沒有什麼優勢。對於複雜的業務邏輯,因為在存儲過程創建的時候,資料庫已經對其進行了一次解析和優化。存儲過程一旦執行,在記憶體中就會保留一份這個存儲過程,這樣下次再執行同樣的存儲過程時,可以從記憶體中直接調用,所以執行速度會比普通sql快。 2. 減少網路傳 ...
  • select count(*) '總欄位數', ISNULL(ISNULL(sum(case when isnullable=0 then 1 end),null),null) as '非空欄位數' from syscolumns where id=object_id( 'EmpInfo') --空 ...
  • 原文地址: "一個輕量級的Android資料庫操作工具" 寫了一個輕量級的Android操作資料庫的ORM工具。方便Android定義資料庫,操作資料庫(增刪改查),資料庫更新,實現了Android對象與資料庫對象之間的映射。源碼地址: "輕量級Android操作資料庫ORM工具" 。可以直接gra ...
  • 1.把要導入成Mudle的項目修改成符合Library的格式 修改該項目中bulid.gradle文件中第一行代碼 把 修改為 然後,修改AndroidManifiest.xml文件中配置信息,此處主要是把原來配置的項目Style等配置以及MainActivity配置刪除,這樣處理是為了防止重覆。以 ...
  • Gradle是一個基於Apache Ant和Apache Maven概念的 項目自動化構建工具 。 它使用一種基於Groovy的特定領域語言(DSL)來聲明項目配置,真正起作用的是Plugin,Gradle預設提供了許多常用的Plugin,如構建Java項目的Plugin、War、Ear等。 Gra ...
  • 小程式支持打開移動應用到底是怎麼回事?什麼APP都可以打開麽? ...
  • DreamweaverCS6安裝與破解 一、背景介紹:同學畢業分佈圖項目計劃簡介 哎哎哎,炸麽說呢,對於Web前端設計來說,純手撕html部分代碼實在是難受。 對於想做地圖這類的就“必須”用這個老工具啦: 0、準備把高中畢業同學分佈圖做一下。之前看到的大多數只是一張圖,實在太LOW,太沒實用性,太不 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...