typescript-學習使用ts-1

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

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];

元組

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

// 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類型的變數沒有什麼大用,因為你只能為它賦予undefinednull

let unusable: void = undefined;

Null 和 Undefined

void相似,它們的本身的類型用處不是很大:

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

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

然而,當你指定了--strictNullChecks 標記,nullundefined 只能賦值給 void 和它們各自。 這能避免 很多常見的問題。許在某處你想傳入一個 stringnullundefined,你可以使用聯合類型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。 賦值後, xy再也不能被改變了。

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

readonly vs const

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

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

更多相關文章
  • 寫在前面 首先,祝大家新年快樂,在國人的情結里,現在才是真正的年底,估計現在好多朋友已經陸續回家過節去了,祝回家的路順風。過年回去就好好陪伴家人,不要看一些毒瘤號寫的,過年時間彎道超越別人,趁著假期學習什麼各種新知識,這完全瞎扯,這一年的時間該努力,努力了,吃苦也吃了,春節就好好陪伴家人吃喝玩樂。 ...
  • Python的駐留機制及為在同一運行空間內,當兩變數的值相同,則地址也相同。 舉例: 以上示例為駐留機制有效的情況下的記憶體地址。 以下為加入非數字、字母、下劃線內容的駐留機制驗證,結果為無效 ...
  • 在經常性讀取大量的數值文件時(比如深度學習訓練數據),可以考慮現將數據存儲為Numpy格式,然後直接使用Numpy去讀取,速度相比為轉化前快很多. 下麵就常用的保存數據到二進位文件和保存數據到文本文件進行介紹: 1.保存為二進位文件(.npy/.npz) numpy.save 保存一個數組到一個二進 ...
  • list list(列表)是Python內置的一種數據類型,它是一種有序、可變的集合,可以隨時添加和刪除其中的元素。 變數classmates就是一個list。關於list的操作如下: 方法 len():獲取list元素的個數 通過索引訪問 append:向list末尾追加元素 insert:把元素 ...
  • @ "TOC" JDK1.7:數組+鏈表 JDK1.8:數組+鏈表+紅黑樹 前五個問題環境用的是是JDK1.7,後面全部是1.8 1、Hash的計算規則? 簡單的說是個“擾動函數”,目的是為了使散列分佈的更加均勻。 具體演算法是用key的Hashcode值右移16位,將hashcode高位和低位的值進 ...
  •   Spark Streaming對實時數據流進行分析處理,源源不斷的從數據源接收數據切割成一個個時間間隔進行處理;    流處理與批處理有明顯區別,批處理中的數據有明顯的邊界、數據規模已知;而流處理數據流並沒有邊界,也未知數據規模;    ...
  • 函數 函數參數 參數及返回值類型 可選參數 預設參數 剩餘參數 箭頭函數 基本示例 for of 迴圈 for 迴圈 forEach 不支持 break for in 會把數組當作對象來遍歷 for of 支持 break 類型推斷(Type Inference) 類型相容性 模塊 概念 模塊通信: ...
  • 解構賦值 數組解構 上面的寫法等價於: 利用解構賦值交換變數: 函數參數解構: 解構剩餘參數: 也可以忽略其它參數: 或者跳過解構: 對象解構 示例一: 就像數組解構,你可以用沒有聲明的賦值: 你可以在對象里使用 語法創建剩餘變數: 屬性解構重命名 你也可以給屬性以不同的名字: 註意,這裡的冒號 不 ...
一周排行
  • Consul是HashiCorp公司推出的開源工具,Consul由Go語言開發,部署起來非常容易,只需要極少的可執行程式和配置文件,具有綠色、輕量級的特點。Consul是`分散式`的、`高可用`的、 `可橫向擴展`的用於實現分散式系統的服務發現與配置。 ...
  • Blazor的哪個特點, 可以讓程式員快速完成任務? 這隨筆講解的是使用代碼上下文來節約代碼, 讓驗證碼機制變得更加簡易. ...
  • 在C#中,struct和class都是用戶定義的數據類型,struct和class有許多不同之處,但主要的區別是: Class是引用類型,它保存在堆上並且能夠被垃圾回收;然而stuct是值類型,它保存在棧上或者內嵌在它的包含類型之中。因此,從總體上來說struct比class節省記憶體。 下圖是Cla ...
  • 這篇文章,我將帶領大家學習ASP.NET Core中的launchSettings.json文件。為了學習它,我們打開之前建的空白模板的ASP.NET Core項目。 從上面的圖片中你可以看到,我們項目的屬性中有一個launchSettings.json文件。那麼我們來一起學習這個重要的文件吧。la... ...
  • [TOC] 都是迭代,為啥我一定要用foreach ​ 問題起源於本人的一個練手的撲克牌程式:洗完牌之後要發給場上的三人。 ​ 只發給單個人的時候用 foreach 迴圈一下就好了,但三個人就有點麻煩了。 ​ 牌組用list保存你可能會想到這樣寫: 對於字典,可以使用 : 可能各位早會這樣弄了,讓各 ...
  • 首先以Winform項目開發舉例 1.完整的學習計劃 2.對於學習內容分類 3.良好的學習習慣 4.項目實踐 學習計劃 1.基礎篇 2.提高篇 3.應用篇 內容分類 1.語法 2.控制項 3.業務邏輯 學習習慣 1.時間安排 2.進度安排 3.記錄筆記 4.練習寫代碼 項目實踐 1.實現頁面展示 2. ...
  • 在進行 Asp.NetCore.MVC 文件上傳時,後臺無法正常讀取文件流保存,出現:Synchronous operations are disallowed. Call WriteAsync or set AllowSynchronousIO to true instead. 查找資料,發現需要 ...
  • 在這篇文章中,我將詳細介紹在ASP.NET Core中使用appsettings.json文件的重要性。這篇文章,我將詳細介紹下麵幾個問題:在ASP.NET Core應用程式中,有哪些不同的配置資源可用呢?什麼是ASP.NET Core appsetting.json文件?在ASP.NET Core ...
  • 這篇文章中,我將帶領大家一起詳細學習:ASP.NET Core Middleware Components.這篇文章中,我將詳細討論下麵幾個問題:什麼是ASP.NET Core 中的中間件組件?ASP.NET Core應用程式中,在哪裡來使用中間件組件?怎樣來配置ASP.NET Core 應用程式中... ...
  • 參考 ABP設計UI菜單欄的源碼分析,抽出了ABP這塊自定義擴展的實現。在ABP的源碼裡面有很多地方都用到了這種設計方式,實現了用戶自定義擴展。 新建一個空的asp.net core項目,新建一個類,源碼: StartUp類源碼: 擴展點:在 中提供用戶自定義擴展點,完美的是下瞭解耦。 參考: "B ...