TypeScript基本類型之typeof和keyof詳解

Posted on 2023-04-02 by WalkonNet

編譯並運行 TS 代碼

創建 hello.ts 文件（註意：TS 文件的後綴名為 .ts）。
將 TS 編譯為 JS：在終端中輸入命令，tsc hello.ts（此時，在同級目錄中會出現一個同名的 JS 文件）。
執行 JS 代碼：在終端中輸入命令，node hello.js。
說明：所有合法的 JS 代碼都是 TS 代碼，有 JS 基礎隻需要學習 TS 的類型即可。
註意：由 TS 編譯生成的 JS 文件，代碼中就沒有類型信息瞭。

創建 .TS文件hello 通過 tsc hello.ts 命令會生成同名js文件通過node hello.js運行js文件

TypeScript基礎

類型註解

給變量添加明確的類型約束叫做類型註解

let name:string='張三'
let age:number=18
 
:number 和 :string 就是類型註解

TS常用基礎類型細分為兩類分別是JS已有類型和TS新增類型

js已有類型 number ,string boolean null undefined symbol 和 bigint

Javascript自es6後一共有 7 種原始類型和 1 種引用類型，如下：

原始類型 number、 string 、boolean 、 undefined 、 null 、 symbol 、 bigint

引用類型 object

TS新增類型有

a,聯合類型 ,自定義類型(類型別名type..), 接口元組字面量類型枚舉 void ang等

b,註意：TS 中的原始類型和 JS 中寫法一致；TS 中的對象類型在 JS 類型基礎上更加細化，每個具體的對象（比如數組、對象、函數）都有自己的類型語法。

數組類型 []

arr是數組類型,數組裡面裝的是number類型

const arr=[1,2,3]
 
// 定義 
 
const arr:number[]=[1,2,3]
arr.push(8)

聯合類型 |

一個類型裡面有多種類型

const temp :number| string =8

記得優先級問題要加()

const arr:number| string[]=[1,'1'] // 不行報錯 優先級問題
// arr是 number類型或者string組成的數組類型
解決如下
const arr:(number| string)[]=[1,'1']

如果打印結果 ts文件報錯可以加 export{}來解決

泛型定義方式

const arr:Array<number>=[1,2,3]
 
const aee:Array<number|string>=[1,'1']

聯合類型的應用場景

錯誤寫法

let timer =null
timer =setInterval(()=>{},2000)

正確寫法一

let timer = number= -1
timer=setInterval(()=>{},2000)

正確寫法二

let timer= null |number =null
timer=setInterval(()=>{})

類型別名

所謂的類型別名就是把類型給定義瞭一個名字當類型很多或者很復雜或者重復使用時這樣書寫就會便捷很多名字可以用中文但是不建議

let arr1: (number | string)[] = [1, 'a', 3, 'b']
let arr2: (number | string)[] = ['x', 'y', 6, 7]
 
改為
type CustomArray = (number | string)[]
 
let arr1: CustomArray = [1, 'a', 3, 'b']
let arr2: CustomArray = ['x', 'y', 6, 7]

解釋說明。

a，使用 type 關鍵字來創建自定義類型。

b，類型別名（比如，此處的 CustomArray）可以是任意合法的變量名稱。

c，推薦使用大寫字母開頭。

d，創建類型別名後，直接使用該類型別名作為變量的類型註解即可。

函數類型

單獨指定參數,返回值的類型

同時指定類型,返回值的類型

// 解釋：可以通過類似箭頭函數形式的語法來為函數添加類型，註意這種形式隻適用於函數表達式。
type AddFn = (num1: number, num2: number) => number
 
const add: AddFn = (num1, num2) => {
    return num1 + num2
}

void類型

如果函數沒有指定返回類型默認為void

function greet(name: string): void {
    console.log('Hello', name)
    // return undefined // 默認有這麼一句
}

如果明確標記瞭函數的返回類型為undefined 那麼就必須手動 return一個undefined

const add = (): undefined => {
    return undefined
}

可選參數 ?

function mySplice(test:number , start?: number,end?:number){
 mySplice(1)
mySplice()
mySplice(1,2)
 可選參數不能出現在必選參數前面  必須在必選函數後面  一般配合類型註解使用
 }

參數默認值=

對象類型 :object

const obj:object = {}

左邊的{}表示類型 (嚴格來說應該是對象字面量類型) ,右邊的{}表示值

等號右邊的值直接是一個對象時左右兩邊數量保持一致

const person:{name:string;age:number} ={
name:"zhansan",
age:18
}

如果提取瞭變量值的實現是可以比類型多 (滿足類型定義的條件下類型定義準確)

interface

interface +接口名用來描述對象類型

與extends使用具有繼承性

相同點

type 和interface的區別

都可以用來描述對象或者函數都允許進行拓展 ,語法不同

不同點

1. interface的接口拓展通過extends type的接口拓展通過&

2. type 加= interface不加=

3.type可以描述任意類型 interface隻能用來描述對象或函數

4.相同的interface聲明能夠合並相同的type聲明會報錯 (命名名字)

總結 :一般使用 interface來表述對象結構用type 來描述類型關系

元組類型

元組類型可以確切地標記出有多少個元素，以及每個元素的類型

// 可以給元組中的元素起別名

類型推論

字面量類型

let str1 = 'Hello TS'   //string類型
const str2 = 'Hello TS'   // 字符串字面量類型

使用方式和場景

使用方式：字面量類型常配合聯合類型一起使用。

使用場景：用來表示一組明確的可選值列表，比如在貪吃蛇遊戲中，遊戲方向的值隻能是上、下、左、右中的一個

type Direction = 'up' | 'down' | 'left' | 'right'
function changeDirection(direction: Direction) {
    console.log(direction)
}
changeDirection('up') // 調用函數時，會有類型提示

枚舉類型

基本使用

枚舉的功能類似於字面量類型+聯合類型組合的功能，也可以表示一組明確的可選值。

枚舉：定義一組命名常量，它描述一個值，該值可以是這些命名常量中的一個。既可以當做值也可以當做類型

使用 enum 關鍵字定義枚舉，約定枚舉名稱以大寫字母開頭。

枚舉中的多個值之間通過 ,（逗號）分隔，定義好枚舉後，直接使用枚舉名稱作為類型註解。

// 創建枚舉
enum Direction {
    Up,
    Down,
    Left,
    Right,
}
 
// 可以當做類型使用枚舉
function changeDirection(direction: Direction) {
    console.log(direction)
}
 
// 也可以當做值使用枚舉
// 調用函數時，需要傳入：枚舉 Direction 成員的任意一個，類似於 JS 中的對象，直接通過點（.）語法 訪問枚舉的成員
changeDirection(Direction.Up)

數字枚舉

enum Direction {
    Up = 2,
    Down = 4,
    Left = 8,
    Right = 16,
}
console.log(Direction['Up']) // 2
// 也可以反向操作
console.log(Direction[2]) // Up

實現原理

枚舉類型比較特殊，不僅僅可以用作類型，還可以當做值使用，因為枚舉成員都是有值的。
也就是說，其他的類型會在編譯為 JS 代碼時自動移除，但是，枚舉類型會被編譯為 JS 代碼。
說明：枚舉與前面講到的字面量類型 + 聯合類型組合的功能類似，都用來表示一組明確的可選值列表。
推薦：字面量類型 + 聯合類型組合的方式，因為相比枚舉，這種方式更加直觀、簡潔、高效。

字符串枚舉

定義：枚舉成員的值是字符串稱為字符串枚舉。
註意：字符串枚舉沒有自增長行為，因此，字符串枚舉的每個成員必須有初始值。

enum Gender {
    女,
    男,
}
type User = {
    name: string
    age: number
    // gender: '男' | '女' // 但後臺需要 0 和 1
    gender: Gender
}
 
const user: User = {
    name: 'ifer',
    age: 18,
    gender: Gender.男,
}

類型斷言 as 或者 <>泛型

可以將一個寬泛的類型斷言為更為簡潔的類型

當你明確知道你所寫的類型是什麼時就可以使用類型斷言為瞭使用具體的方法

typeof

js中判斷某個數據的類型

let a = 8
console.log(typeof a)// 'number'

ts中的typeof是根據已有的值來獲取值的類型來簡化代碼的書寫

keyof

作用：獲取接口、對象（配合 typeof）、類等的所有屬性名組成的聯合類型。

// 接口
interface Person {
    name: string
    age: number
}
type K1 = keyof Person // "name" | "age"
type K2 = keyof Person[] // "length" | "toString" | "pop" | "push" | "concat" | "join"
 
// 錯誤寫法
const a =keyof Person

要想獲取對象的key組成的聯合類型

1.先獲取到對象的類型通過typeof 2.獲取對象類型所組成的聯合類型

const a ={name:"張三",age:18}
type keyofa =keyof typeof a

思維導圖

https://www.processon.com/view/link/62d5351be401fd2596077274

any和unknow的區別

unknow 是更加安全的any類型

任何類型可以給any , any也可以給任何類型

任何類型也可以給unknow但是unknow隻能給unknow和any

函數重載

重載簽名 :包含瞭函數的參數類型和返回值類型,但不包含函數體

函數簽名(定義瞭函數的類型不包括實現) + 簽名實現

函數簽名

函數類型的第一種情況
function greet(name:string) :string
 
函數類型的第二種情況
 
function greet(name:string[]):string[]

簽名實現

函數參數和函數的返回值要覆蓋前面的函數前面的所有情況

function gerrt(name:unknown) :unknow{
if(Array.isArray(name)){
  return name.map((item)=>`Hello${item}`) 
  } 
  return `Hello${name}`
}
greet('xxx')  // 後跟字符串方法
greet(['1','2']) //數組方法

總結

到此這篇關於TypeScript基本類型之typeof和keyof詳解的文章就介紹到這瞭,更多相關ts基本類型typeof和keyof內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

TypeScript基本類型之typeof和keyof詳解

目錄

編譯並運行 TS 代碼

TypeScript基礎

數組類型 []

聯合類型 |

類型別名

函數類型

void類型

可選參數 ?

參數默認值=

對象類型 :object

interface

元組類型

類型推論

類型斷言 as 或者 <>泛型

typeof

keyof

any和unknow的區別

函數重載

總結

推薦閱讀：

發佈留言取消回覆

近期文章

目錄

編譯並運行 TS 代碼

TypeScript基礎

數組類型 []

聯合類型 |

類型別名

函數類型

void類型

可選參數 ?

參數默認值=

對象類型 :object

interface

元組類型

類型推論

類型斷言 as 或者 <>泛型

typeof

keyof

any和unknow的區別

函數重載

總結

推薦閱讀：

發佈留言 取消回覆

近期文章

標籤

發佈留言取消回覆