TypeScript基本类型之typeof和keyof详解

JavaScript/前端
329
0
0
2023-04-26
一文详解Canvas实现打飞字游戏过程示例
上一篇
TypeScript 中提升幸福感的 10 个高级技巧
下一篇
标签   TypeScript
目录
  • 编译并运行 TS 代码
  • TypeScript基础
  • 数组类型  []
  • 联合类型 |
  • 类型别名
  • 函数类型 
  • void类型
  • 可选参数 ?
  • 参数默认值=   
  • 对象类型 :object
  • interface
  • 元组类型 
  • 类型推论
  • 类型断言 as 或者 <>泛型
  • typeof 
  • keyof
  • any和unknow的区别
  • 函数重载
  •  总结

安装编译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']) //数组方法

一文详解Canvas实现打飞字游戏过程示例
上一篇
TypeScript 中提升幸福感的 10 个高级技巧
下一篇