腳本之家服務(wù)器常用軟件

快捷導航

TypeScript基本類型 typeof 和keyof案例詳解

更新時間：2023年10月19日 10:27:49 作者：學習吖

這篇文章主要介紹了TypeScript基本類型 typeof 和keyof案例詳解,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

安裝編譯ts的工具

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

編譯并運行 TS 代碼

創(chuàng)建 hello.ts 文件（注意：TS 文件的后綴名為 .ts）。
將 TS 編譯為 JS：在終端中輸入命令，tsc hello.ts（此時，在同級目錄中會出現(xiàn)一個同名的 JS 文件）。
執(zhí)行 JS 代碼：在終端中輸入命令，node hello.js。
說明：所有合法的 JS 代碼都是 TS 代碼，有 JS 基礎(chǔ)只需要學習 TS 的類型即可。
注意：由 TS 編譯生成的 JS 文件，代碼中就沒有類型信息了。

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

TS基礎(chǔ) TypeScript

類型注解

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

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

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

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

Javascript自es6后一共有 7 種原始類型和 1 種引用類型，如下：
原始類型 number、 string 、boolean 、 undefined 、 null 、 symbol 、 bigint
引用類型 object

TS新增類型有

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

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

數(shù)組類型 []

arr是數(shù)組類型,數(shù)組里面裝的是number類型

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

聯(lián)合類型 |

一個類型里面有多種類型

const temp :number| string =8

記得優(yōu)先級問題要加()

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

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

泛型定義方式

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

聯(lián)合類型的應(yīng)用場景

錯誤寫法

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 關(guān)鍵字來創(chuàng)建自定義類型。

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

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

d，創(chuàng)建類型別名后，直接使用該類型別名作為變量的類型注解即可。

函數(shù)類型

單獨指定參數(shù),返回值的類型

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

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

void類型

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

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

如果明確標記了函數(shù)的返回類型為undefined 那么就必須手動 return一個undefined

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

可選參數(shù) ?

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

參數(shù)默認值=

對象類型 :object

const obj:object = {}

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

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

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

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

interface

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

與extends使用具有繼承性

相同點

type 和interface的區(qū)別

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

不同點

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

2. type 加= interface不加=

3.type可以描述任意類型 interface只能用來描述對象或函數(shù)

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

總結(jié) :一般使用 interface來表述對象結(jié)構(gòu) 用type 來描述類型關(guān)系

元組類型

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

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

類型推論

字面量類型

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

使用方式和場景

使用方式：字面量類型常配合聯(lián)合類型一起使用。
使用場景：用來表示一組明確的可選值列表，比如在貪吃蛇游戲中，游戲方向的值只能是上、下、左、右中的一個

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

枚舉類型

基本使用

枚舉的功能類似于字面量類型+聯(lián)合類型組合的功能，也可以表示一組明確的可選值。
枚舉：定義一組命名常量，它描述一個值，該值可以是這些命名常量中的一個。既可以當做值也可以當做類型
使用 enum 關(guān)鍵字定義枚舉，約定枚舉名稱以大寫字母開頭。
枚舉中的多個值之間通過 ,（逗號）分隔，定義好枚舉后，直接使用枚舉名稱作為類型注解。

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

數(shù)字枚舉

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

實現(xiàn)原理

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

字符串枚舉

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

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中判斷某個數(shù)據(jù)的類型

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

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

keyof

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

// 接口
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組成的聯(lián)合類型

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

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

思維導圖

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

https://gitee.com/link?target=https%3A%2F%2Fwww.processon.com%2Fview%2Flink%2F62d5351be401fd2596077274

any和unknow的區(qū)別

unknow 是更加安全的any類型

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

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

函數(shù)重載

重載簽名 :包含了函數(shù)的參數(shù)類型和返回值類型,但不包含函數(shù)體

函數(shù)簽名(定義了函數(shù)的類型不包括實現(xiàn)) + 簽名實現(xiàn)

函數(shù)簽名

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

簽名實現(xiàn)

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

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