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) 類型相容性 模塊 概念 模塊通信: ...
  • 解構賦值 數組解構 上面的寫法等價於: 利用解構賦值交換變數: 函數參數解構: 解構剩餘參數: 也可以忽略其它參數: 或者跳過解構: 對象解構 示例一: 就像數組解構,你可以用沒有聲明的賦值: 你可以在對象里使用 語法創建剩餘變數: 屬性解構重命名 你也可以給屬性以不同的名字: 註意,這裡的冒號 不 ...
一周排行
  • 1. 泛型Generic 1.1 引入泛型:延遲聲明 泛型方法聲明時,並未寫死類型,在調用的時候再指定類型。 延遲聲明:推遲一切可以推遲的。 1.2 如何聲明和使用泛型 泛型方法:方法名稱後面加上尖括弧,裡面是類型參數 類型參數實際上就是一個類型T聲明,方法就可以用這個類型T了。 如下所示: pub ...
  • 本筆記摘抄自:https://www.cnblogs.com/PatrickLiu/p/7903617.html,記錄一下學習過程以備後續查用。 一、引言 今天我們要講行為型設計模式的第三個模式--迭代器模式,先從名字上來看。迭代是遍歷的意思,迭代器可以理解為是遍歷某某的工具,遍歷什麼呢?在軟 件設 ...
  • 本筆記摘抄自:https://www.cnblogs.com/PatrickLiu/p/7928521.html,記錄一下學習過程以備後續查用。 一、引言 今天我們要講行為型設計模式的第四個模式--觀察者模式,先從名字上來看。觀察者模式可以理解為既然有“觀察者”,那肯定就有“被觀察者”了。“觀察者” ...
  • 先看核心代碼: public List<DataEntity> SearchShopSalesReport(DateTimeOffset? dateFrom, DateTimeOffset? dateTo,string groupBy) { var query = data.DataEntity / ...
  • 首先新建一個項目,名稱叫Caliburn.Micro.ActionConvertions 然後刪掉MainWindow.xaml 然後去app.xaml刪掉StartupUri這行代碼 其次,安裝Caliburn.Micro,Caliburn.Micro.Core,這兩個Nuget包,如下圖 然後新 ...
  • 一文帶你瞭解 C DLR 的世界 在很久之前,我寫了一片文章 "dynamic結合匿名類型 匿名對象傳參" ,裡面我以為DLR內部是用反射實現的。因為那時候是心中想當然的認為只有反射能夠在運行時解析對象的成員信息並調用成員方法。後來也是因為其他的事一直都沒有回過頭來把這一節知識給補上,正所謂亡羊補牢 ...
  • ​ 在C#8.0中,針對介面引入了一項新特性,就是可以指定預設實現,方便對已有實現進行擴展,也對面向Android和Swift的Api進行互操作提供了可能性。下麵我們來看看該特性的具體規則與實現。 一、主要應用場景: 在不破壞影響已有實現的情況下,可以添加新成員。這解決了在第三方已經大量使用了的介面 ...
  • 前言 通常在應用程式開發到正式上線,在這個過程中我們會分為多個階段,通常會有 開發、測試、以及正式環境等。每個環境的參數配置我們會使用不同的參數,因此呢,在ASP.NET Core中就提供了相關的環境API,方便我們更好的去做這些事情。 環境 ASP.NET Core使用ASPNETCORE_ENV ...
  • 擱置了幾天,工作忙的一塌糊塗,今天終於抽空來繼續看看MVC的知識。先來看看MVC的路由是如何處理的。以下為替代的路由: app.UseEndpoints(endpoints => { endpoints.MapControllerRoute( name: "default", pattern: "{ ...
  • 多用www.bing.com國際版解決代碼報錯 代碼運行的時候,報異常,國內的搜索引擎一搜, 浮誇的廣告太多,解決方案准確性不足, 盜版又很嚴重(導致一錯皆錯),方案未及時更新等詬病。 www.bing.com國際版可以關聯到: (1). 外國官網,可以獲得官方的解決方案。 (2). stackov ...
x