TS 自學筆記(一)

来源:https://www.cnblogs.com/xhyccc/archive/2020/05/06/12833906.html
-Advertisement-
Play Games

TS 自學筆記(一) 本文寫於 2020 年 5 月 6 日 日常廢話兩句 有幾天沒有更新了,最近學的比較亂,休息了兩天感覺好一些了。這兩天玩了幾個設計軟體,過幾天也寫篇文章分享分享。 為啥要學 TS? 進入正題哈,經常寫 JS 的人會特別多的碰到一個 bug: 之類的。 這是為什麼呢? 其實就是我 ...


TS 自學筆記(一)

本文寫於 2020 年 5 月 6 日

日常廢話兩句

有幾天沒有更新了,最近學的比較亂,休息了兩天感覺好一些了。這兩天玩了幾個設計軟體,過幾天也寫篇文章分享分享。

為啥要學 TS?

進入正題哈,經常寫 JS 的人會特別多的碰到一個 bug:xxxx is not a function之類的。

這是為什麼呢?

其實就是我們用了一些不屬於它的方法。

比如說我們有一個const a = 250,然後我們讓他a.filter(()=>{})

有人可能會說,那明明是一個 number 類型,我怎麼可能給他 filter 呢?

我之前就犯過這個錯誤,我想讓一個數組等於另一個被 push 一個新元素數組:

let newArr = arr.push('hello')
newArr.filter(() => {})

要知道,arr.push他的返回值是新的數組長度!

我讓一個 number 類型去使用數組方法,自然是會報錯的。

好吧我知道這樣似乎非常愚蠢,但是總而言之,在日常寫 JS 的報錯中,有大把大把的報錯是因為這種完全可以避免掉的問題

如果是 Java,他會在編輯器內就給你劃紅線,不會等到你運行了,再去告訴你。

這就是動態語言的毛病。

關於代碼提示

不僅如此,我們是否會在寫代碼的時候煩心於代碼提示呢?

比如我在某個 class 內部聲明瞭一些變數,可是當我在其他地方進行實力化的時候,統統都沒有提示!

我必須要翻到這個 class 的文件,找到那些變數再確認一番。

而 TS 的介面概念,可以幫助我們非常完美的解決問題!


所以我們需要學習 TypeScript。

據說用了 TS,能有效減少 80%的 Bug(笑)。

但不管這是不是真的,從各個大框架對於 TS 的青睞程度來看,未來幾年內,TS 必然會是絕對的熱點之一!

畢竟,現在已經不只是:

能被 JS 改寫的終將被 JS 改寫

而是:

能被 TS 改寫的,終將被 TS 改寫

01 變數類型

JS 是弱類型語言,TS 卻不是。

TS 擁有這些類型:

1. undefined
2. null
3. boolean
4. number
5. string
6. object
7. array

----⬆️JS 有的,⬇️JS 沒有的----

8. tuple
9. enum
10. any
11. void
12. never

number、string、boolean 沒有什麼特別好說的,和 JS 沒什麼區別,我來寫幾個我覺得比較重要的。

數組的聲明

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

第一種方法不難理解,就是生命一個 number 數組。

第二種方法叫做數組泛型,即Array<元素類型>

什麼叫做泛型呢?

如果我們有一個函數:

function identity(arg: number): number {
  return arg
}

那這個時候,傳入的變數就必須是數字。

考慮到可復用性的問題,我們可以使用泛型。

function identity<T>(arg: T): T {
  return arg
}

identity 函數 叫做泛型(註意,T 不是泛型!),因為它可以適用於多個類型。

T 是類型變數,它是一種特殊的變數,只用於表示類型而不是值。

它可以幫助我們捕獲用戶傳入的類型,讓我們可以對這個類型加以利用。

其實之前的情況,我們可以通過 any 來實現,但是 any 就會讓我們丟失 T 這一信息。

在命名變數的時候有一個小坑,變數名不能命名為name,因為會與 DOM 中的全局 window 對象下的 name 屬性出現重名。

enum 是成組常量的好用法!

enum Hello {
  teacher: "老師好",
  classmate: "同學好",
  parents: "爸爸好",
  girlfriend: "劉好"
}

一般情況,枚舉類型會自動賦給自己常量值:

enum Hello {
  teacher, // 0
  classmates, // 1
  parents, // 2
  girlfriend // 3
}

我們也可以從中間打斷這個賦值:

enum Hello {
  teacher, // 0
  classmates, // 1
  parents = 5, // 5
  girlfriend // 6
}

接下來會進行順延。

從來沒有的 Never 值

never 類型表示的是那些永不存在的值的類型,聽起來就像個悖論——我如何列舉一個不存在的值?

其實never 類型可以是拋出的異常,或根本就不會有返回值的函數的返回值類型。

function error(message: string): never {
  throw new Error(message)
}

function fail() {
  return error('Something failed')
}

function infiniteLoop(): never {
  while (true) {}
}

總體來講大同小異,TS 補充了一些在別的語言中有過的常見數據類型,相信這一塊對於 JS 開發者來說,不會是什麼難題。

唯一的難題就是習慣,可不能老是使用 any 類型!

(未完待續)


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

-Advertisement-
Play Games
更多相關文章
  • 使用JQuery完成頁面定時彈出廣告 Js相關技術 定時器: ​ setInterval & clearInterval ​ setTimeout & clearTimeout 顯示: img.style.display = "block" 隱藏: img.style.display = "none ...
  • 資料 鏈接:https://pan.baidu.com/s/1aHUnfPcs1VJAas5zj5abQA 提取碼:b1hb 包括本章節需要的js庫文件,以及JQuery的api文檔 什麼JQuery jQuery是一個快速、簡潔的JavaScript框架,是繼Prototype之後又一個優秀的Ja ...
  • 使用JS控制下拉列表左右選擇 需求分析 在我們的分類管理中,我們要能夠去修改我們的分類信息,當我們一點修改的時候,跳轉到一個可以編輯的頁面,這裡面能夠修改分類的名稱,分類的描述,以及分類的商品 技術分析 ondblclick="selectOne()":雙擊事件 select標簽的屬性multipl ...
  • 省市聯動效果 技術分析 什麼是DOM: Document Object Model : 管理我們的文檔,增刪改查規則 【HTML中的DOM操作】 一些常用的 HTML DOM 方法: getElementById(id) 獲取帶有指定 id 的節點(元素) appendChild(node) 插入新 ...
  • 覆選框的全選和全不選 需求分析 ​ 商品分類界面中,當我們點擊全選框的時候,我們希望選中所有的商品,當我們取消掉的時候,我們希望不選中所有的商品 技術分析 checked="checked" 選擇覆選框 事件 : onclick點擊事件 getElementsByTagName:返回包含帶有指定標簽 ...
  • 表格隔行換色 需求分析 ​ 我們商品分類的信息太多,如果每一行都顯示同一個顏色的話會讓人看的眼花,為了提高用戶體驗,減少用戶看錯的情況,需要對錶格進行隔行換色 技術分析 table對象 集合 cells[]:返回包含表格中所有單元格的一個數組。 rows[]:返回包含表格中所有行的一個數組。 tBo ...
  • 完成表單的校驗 需求分析 ​ 昨天我們做了一個簡單的表單校驗,每當用戶輸入出錯的時候,我們是彈出了一個對話框,提示用戶去修改。這樣的用戶體驗效果非常不好好。我們今天就是需要來對他進行一個修改,當用戶輸入信息有問題的時候,我們就再輸入框的後面給他一個友好提示。 技術分析 【HTML中innerHTML ...
  • 一、複習了伸縮佈局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="CSS/base.css"> <link rel="s ...
一周排行
    -Advertisement-
    Play Games
  • Dapr Outbox 是1.12中的功能。 本文只介紹Dapr Outbox 執行流程,Dapr Outbox基本用法請閱讀官方文檔 。本文中appID=order-processor,topic=orders 本文前提知識:熟悉Dapr狀態管理、Dapr發佈訂閱和Outbox 模式。 Outbo ...
  • 引言 在前幾章我們深度講解了單元測試和集成測試的基礎知識,這一章我們來講解一下代碼覆蓋率,代碼覆蓋率是單元測試運行的度量值,覆蓋率通常以百分比表示,用於衡量代碼被測試覆蓋的程度,幫助開發人員評估測試用例的質量和代碼的健壯性。常見的覆蓋率包括語句覆蓋率(Line Coverage)、分支覆蓋率(Bra ...
  • 前言 本文介紹瞭如何使用S7.NET庫實現對西門子PLC DB塊數據的讀寫,記錄了使用電腦模擬,模擬PLC,自至完成測試的詳細流程,並重點介紹了在這個過程中的易錯點,供參考。 用到的軟體: 1.Windows環境下鏈路層網路訪問的行業標準工具(WinPcap_4_1_3.exe)下載鏈接:http ...
  • 從依賴倒置原則(Dependency Inversion Principle, DIP)到控制反轉(Inversion of Control, IoC)再到依賴註入(Dependency Injection, DI)的演進過程,我們可以理解為一種逐步抽象和解耦的設計思想。這種思想在C#等面向對象的編 ...
  • 關於Python中的私有屬性和私有方法 Python對於類的成員沒有嚴格的訪問控制限制,這與其他面相對對象語言有區別。關於私有屬性和私有方法,有如下要點: 1、通常我們約定,兩個下劃線開頭的屬性是私有的(private)。其他為公共的(public); 2、類內部可以訪問私有屬性(方法); 3、類外 ...
  • C++ 訪問說明符 訪問說明符是 C++ 中控制類成員(屬性和方法)可訪問性的關鍵字。它們用於封裝類數據並保護其免受意外修改或濫用。 三種訪問說明符: public:允許從類外部的任何地方訪問成員。 private:僅允許在類內部訪問成員。 protected:允許在類內部及其派生類中訪問成員。 示 ...
  • 寫這個隨筆說一下C++的static_cast和dynamic_cast用在子類與父類的指針轉換時的一些事宜。首先,【static_cast,dynamic_cast】【父類指針,子類指針】,兩兩一組,共有4種組合:用 static_cast 父類轉子類、用 static_cast 子類轉父類、使用 ...
  • /******************************************************************************************************** * * * 設計雙向鏈表的介面 * * * * Copyright (c) 2023-2 ...
  • 相信接觸過spring做開發的小伙伴們一定使用過@ComponentScan註解 @ComponentScan("com.wangm.lifecycle") public class AppConfig { } @ComponentScan指定basePackage,將包下的類按照一定規則註冊成Be ...
  • 操作系統 :CentOS 7.6_x64 opensips版本: 2.4.9 python版本:2.7.5 python作為腳本語言,使用起來很方便,查了下opensips的文檔,支持使用python腳本寫邏輯代碼。今天整理下CentOS7環境下opensips2.4.9的python模塊筆記及使用 ...