暑期前端训练day5

Typescript复习

之前也速成过一个教程,但是很多地方没有搞明白,然后去看了一个网上别人推荐的课来复习,发现很清晰很细致,今天只是学了一小部分,还有一个装饰器后面再补。

数据类型

(1) any:

可以是任何的类型,相当于直接回到js了, 并且注意any可以复制给任何类型,且还是可以访问任何不存在的东西。

(2) unknown:

unknown可以理解为一个类型安全的any,适用于不确定数据的具体类型,会强制让使用者执行类型判断,访问什么属性和方法都报错。

let a: unknown

a = "hello"

(a as string).toUppercase()

  • 类型收缩:
  1. if(typeof xxx === 'string') {//进行赋值或者其它的操作}
  2. 类型断言:a = b as string || x = y

(4) never:

never是什么值都不是,是用来限制函数的返回值的。

  • 函数有问题,抛出异常
  • 永远没结果,不能正常结束

(5) void

  • 通常用于函数返回值声明,函数返回值为空,其实就是返回undefined
  • void 希望开发者不要关心返回值,不要去拿返回值去操作,操作返回值的时候ts会检测。
  • void和undefined的区别:
    (1) void是一种空的广泛概念,而undefined是一种具体的空
    (2) undefined是void可以接受的一种形式
    (3) void是一种意图上的约定

(6) object

  • 开发中用的比较少,存的是非原始类型
  • Object: 可以调用Object的方法的值,更宽泛,除了undefined和null

(7) 声明对象类型:

  • {key:type}
  • 如果是可选的属性的话:{key?:type}
ts 复制代码
let a: {name: string, age: number} 
a = {name: "cjy", age: 18, handsome: true} 
  • 索引签名:可以增加其它的属性
ts 复制代码
let person: {
  name: string, 
  age: number, 
  [key:string]:any // 索引签名
}

person = {
  name: "cjy", 
  age: 18, 
  handsome: true 
}

(8) 声明函数类型:

ts 复制代码
let f: (a: number, b: number) => number  // 函数类型声明
f = (a, b) => {
  return a + b 
}

(9) 声明数组类型:

ts 复制代码
let arr1: string[] 
let arr2: Array<number> 

(10) tuple: 元祖类型

ts 复制代码
let t1: [string, number] 
t1 = ['cjy', 18] 

let t2: [number, boolean?] 
t2 = [18] 
t2 = [18, true] 

let t3: [number, ...string[]] 
t3 = [123, "12", "3, 4"] 

(11) enum: 枚举类型,一组命名常量,可以增加代码的可读性。

ts 复制代码
enum Direction {
  Up, 
  Down, 
  Left, 
  Right 
}
  • 数字枚举:会按顺序进行数字映射,并且反向映射。
ts 复制代码
enum Direction {
  Up = 0, 
  Down, 
  Left, 
  Right 
}
  • 字符串枚举:丢失了反向映射
ts 复制代码
enum Direction {
  Up = "up", 
  Down = "down", 
  Left = "left", 
  Right = "right"  
}
  • 常量枚举:ts会进行删减代码,将用不到的代码去掉,ts也会自己读取值。
ts 复制代码
const enum Direction {
  Up, 
  Down, 
  Left, 
  Right 
}

(12) type

  • 引入了一个联合类型的概念,相当于或。
ts 复制代码
type S1 = number | string 
type S2 = '1' | '2' 
  • 交叉类型:
ts 复制代码
type S1 = {
  h: number, 
  w: number 
}
type S2 = {
  room: number 
}

type House = S1 & S2 

const house: House = {
  h: 1, 
  w: 2, 
  room: 3 
}

(13) interface接口

interface是一种定义结构的方式,主要作用为:类、对象、函数的一种契约,这样可以确保代码的一致性和类型安全,注意interface是一种类型形式,不能有具体实现。

ts 复制代码
interface IPersion {
  name: string, 
  age: number, 
  speak: (n: number) => void 
}

// 类 
class Person implements IPersion {
  constructor(public name: string, public age: number) {

  }

  speak(n: number) {
    console.log(n)
  } 

}

interface IUser {
  name: string, 
  readonly gender: string, 
  age ?: number, 
  run: (n: number) => void 
}

// 对象 
const user: IUser = {
  name: "cjy", 
  gender: "male", 
  run: (n) => {
    console.log(n)
  }
}

(14) 泛型

  • 泛型函数:
ts 复制代码
function log<T>(data: T): T {
  console.log(data); 
  return data 
}

log(111) 
log("dasd") 

log<number>(111) 
log<string>("dasd") 
  • 泛型可以有多个:
ts 复制代码
function log<T, U>(data1: T, data2: U): T | U {
  return Math.floor(Math.random()*10) % 2 ? data1 : data2
}

log<string, number>("2123", 3)
  • 接口中限制类型:
ts 复制代码
type fn = (a: number, b: number) => void  
interface Iperson<T, U> {
  name: string, 
  age: number, 
  handsome?: boolean, 
  des: T, 
  fn: U
}
const x: Iperson<string, fn> = {
  name: "cjy", 
  age: 18, 
  des: "handsome", 
  fn: (a, b) => {
    console.log(a + b)
  }
}
  • 类中的泛型限制:
ts 复制代码
class Person<T> {
  constructor(
    public name: string, 
    public age: number, 
    public handsome: T
  ) {
  }
  speak() {
    console.log(111);
  }
}

const x = new Person<boolean>("cjy", 18, true) 

(15) 类型声明文件:

引入js文件时,需要用xxx.d.ts声明好类型,然后在ts引入。

看到一个编程技巧,看到视频里面的强制折叠:

复制代码
#region 
....
#endregion 
该区域将强制折叠 
相关推荐
烛阴2 分钟前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子8 分钟前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...17 分钟前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
天天扭码1 小时前
《很全面的前端面试题》——HTML篇
前端·面试·html
xw51 小时前
我犯了错,我于是为我的uni-app项目引入环境标志
前端·uni-app
!win !1 小时前
被老板怼后,我为uni-app项目引入环境标志
前端·小程序·uni-app
Burt1 小时前
tsdown vs tsup, 豆包回答一坨屎,还是google AI厉害
前端
群联云防护小杜2 小时前
构建分布式高防架构实现业务零中断
前端·网络·分布式·tcp/ip·安全·游戏·架构
ohMyGod_1233 小时前
React16,17,18,19新特性更新对比
前端·javascript·react.js
前端小趴菜053 小时前
React-forwardRef-useImperativeHandle
前端·vue.js·react.js