typescript-學習使用ts-1

来源:https://www.cnblogs.com/ygjzs/archive/2020/01/19/12215421.html
-Advertisement-
Play Games

Hello World 新建 並寫入以下內容： 安裝編譯器： 編譯： 修改 文件中的代碼，為 greeter 函數的參數 person 加上類型聲明 ： 重新編譯執行。 讓我們繼續修改： 重新編譯，你將看到如下錯誤： 介面（Interface） 類（Class） 變數聲明 作用域 重覆聲明 塊級作用 ...


Hello World

新建 greeter.ts 並寫入以下內容：

function greeter(person) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.innerHTML = greeter(user);

安裝編譯器：

npm i -g typescript

編譯：

tsc greeter.ts

修改 greeter.ts 文件中的代碼，為 greeter 函數的參數 person 加上類型聲明 :string：

function greeter(person: string) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.innerHTML = greeter(user);

重新編譯執行。

讓我們繼續修改：

function greeter(person: string) {
    return "Hello, " + person;
}

let user = [0, 1, 2];

document.body.innerHTML = greeter(user);

重新編譯，你將看到如下錯誤：

error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.

介面（Interface）

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person: Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = { firstName: "Jane", lastName: "User" };

document.body.innerHTML = greeter(user);

類（Class）

class Student {
    fullName: string;
    constructor(public firstName: string, public middleInitial: string, public lastName: string) {
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
}

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person : Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = new Student("Jane", "M.", "User");

document.body.innerHTML = greeter(user);

變數聲明

var

  • 作用域
  • 重覆聲明

let

  • 塊級作用域
  • 在同一個塊中不能重覆聲明

const

  • 聲明同時必須賦值
  • 一定聲明不可改變
    • 對象可以修改
  • 塊級作用域

let vs const

使用最小特權原則，所有變數除了你計划去修改的都應該使用const。 基本原則就是如果一個變數不需要對它寫入，那麼其它使用這些代碼的人也不能夠寫入它們，並且要思考為什麼會需要對這些變數重新賦值。 使用 const也可以讓我們更容易的推測數據的流動。

基本數據類型

布爾值

let isDone: boolean = false;

數字

let amount: number = 6;

字元串

  • 類型
  • 模板字元串
    • 支持換行
    • 支持內嵌表達式
  • 和 JavaScript 一樣，可以使用雙引號，也可以使用單引號，推薦單引號
let nickname: string = '張三';

還可以使用模板字元串（換行 + 嵌入表達式）：

let nickname: string = `Gene`;
let age: number = 37;
let sentence: string = `Hello, my nickname is ${ nickname }.

I'll be ${ age + 1 } years old next month.`;

數組

TypeScript像JavaScript一樣可以操作數組元素。 有兩種方式可以定義數組。 第一種，可以在元素類型後面接上[]，表示由此類型元素組成的一個數組：

let list: number[] = [1, 2, 3];

第二種方式是使用數組泛型，Array<元素類型>：

let list: Array<number> = [1, 2, 3];

元組

元組類型允許表示一個已知元素數量和類型的數組，各元素的類型不必相同。 比如，你可以定義一對值分別為string和number類型的元組。

// Declare a tuple type
let x: [string, number];
// Initialize it
x = ['hello', 10]; // OK
// Initialize it incorrectly
x = [10, 'hello']; // Error

Object

  • 允許賦任意值
  • 但是不能調用任意方法，即便它真的有
let foo: Object = {
  name: 'Jack',
  age: 18
}

知道即可，用的很少，沒有類型校驗和語法提示

Any

有時候，我們會想要為那些在編程階段還不清楚類型的變數指定一個類型。 這些值可能來自於動態的內容，比如來自用戶輸入或第三方代碼庫。 這種情況下，我們不希望類型檢查器對這些值進行檢查而是直接讓它們通過編譯階段的檢查。 那麼我們可以使用 any類型來標記這些變數：

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean

Void

void類型像是與any類型相反，它表示沒有任何類型。 當一個函數沒有返回值時，你通常會見到其返回值類型是 void：

function warnUser(): void {
  alert("This is my warning message");
}

聲明一個void類型的變數沒有什麼大用，因為你只能為它賦予undefined和null：

let unusable: void = undefined;

Null 和 Undefined

和 void相似，它們的本身的類型用處不是很大：

// Not much else we can assign to these variables!
let u: undefined = undefined;
let n: null = null;

預設情況下null和undefined是所有類型的子類型。 就是說你可以把 null和undefined賦值給number類型的變數。

然而，當你指定了--strictNullChecks 標記，null 和 undefined 只能賦值給 void 和它們各自。 這能避免 很多常見的問題。許在某處你想傳入一個 string或null或undefined，你可以使用聯合類型string | null | undefined。

註意：我們推薦儘可能地使用--strictNullChecks ，因為它使你的代碼更嚴謹，可以極大的減少出錯的幾率。

類型推斷

有時候你會遇到這樣的情況，你會比TypeScript更瞭解某個值的詳細信息。 通常這會發生在你清楚地知道一個實體具有比它現有類型更確切的類型。

通過類型斷言這種方式可以告訴編譯器，“相信我，我知道自己在乾什麼”。 類型斷言好比其它語言里的類型轉換，但是不進行特殊的數據檢查和解構。 它沒有運行時的影響，只是在編譯階段起作用。 TypeScript會假設你，程式員，已經進行了必須的檢查。

類型斷言有兩種形式。 其一是“尖括弧”語法：

let someValue: any = "this is a string";

let strLength: number = (<string>someValue).length;

另一個為as語法：

let someValue: any = "this is a string";

let strLength: number = (someValue as string).length;

兩種形式是等價的。 至於使用哪個大多數情況下是憑個人喜好；然而，當你在TypeScript里使用JSX時，只有 as語法斷言是被允許的。

其它

  • ReadonlyArray<T> 去除了數組的所有可變方法，確保數組創建後再也不能被修改

介面

TypeScript的核心原則之一是對值所具有的結構進行類型檢查。 它有時被稱做“鴨式辨型法”或“結構性子類型化”。 在TypeScript里，介面的作用就是為這些類型命名和為你的代碼或第三方代碼定義契約。

基本示例

function printLabel(labelledObj: { label: string }) {
  console.log(labelledObj.label);
}

let myObj = { size: 10, label: "Size 10 Object" };
printLabel(myObj);

類型檢查器會查看printLabel的調用。 printLabel有一個參數，並要求這個對象參數有一個名為label類型為string的屬性。 需要註意的是，我們傳入的對象參數實際上會包含很多屬性，但是編譯器只會檢查那些必需的屬性是否存在，並且其類型是否匹配。 然而，有些時候TypeScript卻並不會這麼寬鬆

下麵我們重寫上面的例子，這次使用介面來描述：必須包含一個label屬性且類型為string：

interface LabelledValue {
  label: string;
}

function printLabel(labelledObj: LabelledValue) {
  console.log(labelledObj.label);
}

let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);

可選屬性

介面里的屬性不全都是必需的。 有些是只在某些條件下存在，或者根本不存在。 可選屬性在應用“option bags”模式時很常用，即給函數傳入的參數對象中只有部分屬性賦值了。

interface SquareConfig {
  color?: string;
  width?: number;
}

function createSquare(config: SquareConfig): {color: string; area: number} {
  let newSquare = {color: "white", area: 100};
  if (config.color) {
    newSquare.color = config.color;
  }
  if (config.width) {
    newSquare.area = config.width * config.width;
  }
  return newSquare;
}

let mySquare = createSquare({color: "black"});

只讀屬性

一些對象屬性只能在對象剛剛創建的時候修改其值。 你可以在屬性名前用 readonly來指定只讀屬性:

interface Point {
    readonly x: number;
    readonly y: number;
}

你可以通過賦值一個對象字面量來構造一個Point。 賦值後， x和y再也不能被改變了。

let p1: Point = { x: 10, y: 20 };
p1.x = 5; // error!

readonly vs const

  • 常量使用 const
  • 對象屬性使用 readonly

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

-Advertisement-
Play Games
更多相關文章
  • 2019年文章精選，分類整理，順帶聊幾句時間觀念
    寫在前面 首先，祝大家新年快樂，在國人的情結里，現在才是真正的年底，估計現在好多朋友已經陸續回家過節去了，祝回家的路順風。過年回去就好好陪伴家人，不要看一些毒瘤號寫的，過年時間彎道超越別人，趁著假期學習什麼各種新知識，這完全瞎扯，這一年的時間該努力，努力了，吃苦也吃了，春節就好好陪伴家人吃喝玩樂。 ...
  • Python的駐留機制（僅對數字，字母，下劃線有效）
    Python的駐留機制及為在同一運行空間內，當兩變數的值相同，則地址也相同。 舉例： 以上示例為駐留機制有效的情況下的記憶體地址。 以下為加入非數字、字母、下劃線內容的駐留機制驗證，結果為無效 ...
  • Python Numpy中數據的常用的保存與讀取方法
    在經常性讀取大量的數值文件時(比如深度學習訓練數據),可以考慮現將數據存儲為Numpy格式,然後直接使用Numpy去讀取,速度相比為轉化前快很多. 下麵就常用的保存數據到二進位文件和保存數據到文本文件進行介紹: 1.保存為二進位文件(.npy/.npz) numpy.save 保存一個數組到一個二進 ...
  • Python中比較特殊的幾種數據類型list、tuple、dict、set
    list list（列表）是Python內置的一種數據類型，它是一種有序、可變的集合，可以隨時添加和刪除其中的元素。 變數classmates就是一個list。關於list的操作如下： 方法 len():獲取list元素的個數 通過索引訪問 append:向list末尾追加元素 insert:把元素 ...
  • HashMap源碼刨析（面試必看）
    @ "TOC" JDK1.7：數組+鏈表 JDK1.8：數組+鏈表+紅黑樹 前五個問題環境用的是是JDK1.7，後面全部是1.8 1、Hash的計算規則？ 簡單的說是個“擾動函數”，目的是為了使散列分佈的更加均勻。 具體演算法是用key的Hashcode值右移16位，將hashcode高位和低位的值進 ...
  • Spark Streaming數據限流簡述
      Spark Streaming對實時數據流進行分析處理，源源不斷的從數據源接收數據切割成一個個時間間隔進行處理；    流處理與批處理有明顯區別，批處理中的數據有明顯的邊界、數據規模已知；而流處理數據流並沒有邊界，也未知數據規模；    ...
  • typescript-學習使用ts-3
    函數 函數參數 參數及返回值類型 可選參數 預設參數 剩餘參數 箭頭函數 基本示例 for of 迴圈 for 迴圈 forEach 不支持 break for in 會把數組當作對象來遍歷 for of 支持 break 類型推斷（Type Inference） 類型相容性 模塊 概念 模塊通信： ...
  • typescript-學習使用ts-2
    解構賦值 數組解構 上面的寫法等價於： 利用解構賦值交換變數： 函數參數解構： 解構剩餘參數： 也可以忽略其它參數： 或者跳過解構： 對象解構 示例一： 就像數組解構，你可以用沒有聲明的賦值： 你可以在對象里使用 語法創建剩餘變數： 屬性解構重命名 你也可以給屬性以不同的名字： 註意，這裡的冒號 不 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 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 ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類