TypeScript基本類型之typeof和keyof詳解

安裝編譯ts的工具

  • 安裝命令:npm i -g typescript 或者 yarn global add typescript
  • 驗證是否安裝成功:tsc –v(查看 TypeScript 的版本)。

編譯並運行 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

思維導圖

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!

推薦閱讀: