TypeScript基本類型之typeof和keyof怎么使用

本文小編為大家詳細介紹“TypeScript基本類型之typeof和keyof怎么使用”，內容詳細，步驟清晰，細節處理妥當，希望這篇“TypeScript基本類型之typeof和keyof怎么使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

編譯并運行 TS 代碼

1. 創建 hello.ts 文件（注意：TS 文件的后綴名為 .ts）。

2. 將 TS 編譯為 JS：在終端中輸入命令，tsc hello.ts（此時，在同級目錄中會出現一個同名的 JS 文件）。

3. 執行 JS 代碼：在終端中輸入命令，node hello.js。

4. 說明：所有合法的 JS 代碼都是 TS 代碼，有 JS 基礎只需要學習 TS 的類型即可。

5. 注意：由 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

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怎么使用”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。