TypeScript基本型別之typeof和keyof詳解

2023-04-02 06:00:51

編譯並執行 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']) //陣列方法