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
  • WPF中輕鬆生成動態圖表：實例詳解(MVVM模式)
    概述：本文代碼示例演示瞭如何在WPF中使用LiveCharts庫創建動態條形圖。通過創建數據模型、ViewModel和在XAML中使用`CartesianChart`控制項，你可以輕鬆實現圖表的數據綁定和動態更新。我將通過清晰的步驟指南包括詳細的中文註釋，幫助你快速理解並應用這一功能。 先上效果： 在 ...
  • .NET 中使用 GaussDB C# ORM
    openGauss(GaussDB ) openGauss是一款全面友好開放，攜手伙伴共同打造的企業級開源關係型資料庫。openGauss採用木蘭寬鬆許可證v2發行，提供面向多核架構的極致性能、全鏈路的業務、數據安全、基於AI的調優和高效運維的能力。openGauss深度融合華為在資料庫領域多年的研 ...
  • .NET中使用 openGauss C# ORM
    openGauss(GaussDB ) openGauss是一款全面友好開放，攜手伙伴共同打造的企業級開源關係型資料庫。openGauss採用木蘭寬鬆許可證v2發行，提供面向多核架構的極致性能、全鏈路的業務、數據安全、基於AI的調優和高效運維的能力。openGauss深度融合華為在資料庫領域多年的研 ...
  • 輕鬆使用Aspire rabbitmq framework
    概述：本示例演示了在WPF應用程式中實現多語言支持的詳細步驟。通過資源字典和數據綁定，以及使用語言管理器類，應用程式能夠在運行時動態切換語言。這種方法使得多語言支持更加靈活，便於維護，同時提供清晰的代碼結構。 在WPF中實現多語言的一種常見方法是使用資源字典和數據綁定。以下是一個詳細的步驟和示例源代 ...
  • .net事件
    描述（做一個簡單的記錄）： 事件（event）的本質是一個委托；（聲明一個事件： public event TestDelegate eventTest;） 委托（delegate）可以理解為一個符合某種簽名的方法類型；比如：TestDelegate委托的返回數據類型為string，參數為 int和 ...
  • .NET CORE 完美支持AOT 的 ORM SqlSugar 教程
    1、AOT適合場景 Aot適合工具類型的項目使用，優點禁止反編 ，第一次啟動快，業務型項目或者反射多的項目不適合用AOT AOT更新記錄: 實實在在經過實踐的AOT ORM 5.1.4.117 +支持AOT 5.1.4.123 +支持CodeFirst和非同步方法 5.1.4.129-preview1 ...
  • 【UWP】修改清單脫離沙盒運行
    總說周知，UWP 是運行在沙盒裡面的，所有許可權都有嚴格限制，和沙盒外交互也需要特殊的通道，所以從根本杜絕了 UWP 毒瘤的存在。但是實際上 UWP 只是一個應用模型，本身是沒有什麼許可權管理的，許可權管理全靠 App Container 沙盒控制，如果我們脫離了這個沙盒，UWP 就會放飛自我了。那麼有沒... ...
  • 《Effective C++》第三版-4. 設計與聲明（Design and Declarations）
    目錄條款17：讓介面容易被正確使用，不易被誤用（Make interfaces easy to use correctly and hard to use incorrectly）限制類型和值規定能做和不能做的事提供行為一致的介面條款19：設計class猶如設計type（Treat class de ...
  • 從零開始：Django項目的創建與配置指南
    title: 從零開始：Django項目的創建與配置指南 date: 2024/5/2 18:29:33 updated: 2024/5/2 18:29:33 categories: 後端開發 tags: Django WebDev Python ORM Security Deployment Op ...
  • mORMot 1.18 第18章 使用REST/JSON的客戶端/伺服器
    1、BOM對象 BOM:Broswer object model,即瀏覽器提供我們開發者在javascript用於操作瀏覽器的對象。 1.1、window對象 視窗方法 // BOM Browser object model 瀏覽器對象模型 // js中最大的一個對象.整個瀏覽器視窗出現的所有東西都 ...
所有分類