cypress写测试脚本怎么引用fixture下json文件中的值 typescript调用js

🌈TypeScript介绍

TypeScript是JavaScript的超集， 完全兼容JavaScript代码的 。 在 JS 基础之上，为 JS 添加了类型支持。

💡TS属于静态类型的编程语言

1. 它要先编译，再执行。不能直接执行，需要编译成js才能执行
2. 它会在编译期间做类型检查，从而提前发现错误。配合 VSCode 等开发工具，TS 可以提前到在编写代码的同时就发现代码中的类型错误，减少找 Bug、改 Bug 时间

🏮生态

Vue 3 源码使用 TS 重写、Angular 默认支持 TS、React 与 TS 完美配合，TypeScript 已成为大中型前端 项目的首选编程语言
目前，前端最新的开发技术栈：

• React： TS + Hooks
• Vue： TS + Vue3

💡注意： Vue2 对 TS 的支持不好~

🌈第一句TS代码

🏮全局安装编译 TS 的工具包

安装包：npm i -g typescript

• typescript 包：用来编译 TS 代码的包，提供了 tsc 命令，实现了 TS -> JS 的转化
• 验证是否安装成功：tsc –v (查看 typescript 的版本)

🏮编译并运行 TS 代码

步骤

2. 创建ts文件。例如 hello.ts 文件（注意：TS 文件的后缀名为 .ts）



3. 
   



5. 编译。将 TS 编译为 JS
   在终端中输入命令，tsc hello.ts（此时，在同级目录中会出现一个同名的 JS 文件）



6. 
   



8. 执行 JS 代码。
   在node中运行。在终端中输入命令，node hello.js

🌈TS类型注解

TypeScript 是 JS 的超集，TS 提供了 JS 的所有功能，并且额外的增加了：类型系统

• TS中定义变量(常量)可以指定类型了。
• A类型的变量不能保存B类型的数据

💡可以显示标记出代码中的意外行为，从而降低了发生错误的可能性

格式:

let 变量名: 类型 = 初始值

示例代码:

let age: number = 18

代码中的 : number 就是类型注解
作用：为变量添加类型约束

上述代码中，约定变量 age 的类型为 number 类型，就只能给变量赋值该类型的值，否则，就会报错

🌈类型推论

在 TS 中，某些没有明确指定类型的情况下，TS 的类型推论机制会自动提供类型

💡好处：由于类型推论的存在，有些情况下的类型注解可以省略不写

• 声明变量并初始化时

// 变量 age 的类型被自动推断为：number
let age = 18

• 决定函数返回值时

// 函数返回值的类型被自动推断为：number
function add(num1: number, num2: number) {
  return num1 + num2
}

🌈常用基础类型

将 TS 中的常用基础类型分为两类:

🏮JS 已有类型

1. 原始类型：number/string/boolean/null/undefined/symbol
2. 对象类型：object（包括，数组、对象、函数等对象）

🏮TS 新增类型

1. 联合类型
2. 自定义类型(类型别名)
3. 接口
4. 元组
5. 字面量类型
6. 枚举
7. void
8. any 等

💡注意：

• 原始类型在 TS 和 JS 中写法一致
• 对象类型在 TS 中更加细化，每个具体的对象（比如，数组、对象、函数）都有自己的类型语法

🌈原始类型

• 原始类型：number/string/boolean/null/undefined/symbol
• 特点：简单，这些类型，完全按照 JS 中类型的名称来书写

// 数值类型
let age: number = 18

// 字符串类型
let myName: string = '亚索'

// 布尔类型
let isLoading: boolean = false

// undefined
let un: undefined = undefined

// null
let timer:null = null

🌈联合类型

我们想定义一个变量可以是null也可以是 number 类型

联合类型的格式

let 变量: 类型1 | 类型2 | 类型3 .... = 初始值

let arr: (number | string)[] = [1, 'a', 3, 'b']

💡|（竖线）在 TS 中叫做联合类型，即：由两个或多个其他类型组成的类型，表示可以是这些类型中的任意一种

🌈自定义类型（类型别名）

格式：

type 别名 = 类型

使用：

type s = string // 定义

const str1:s = 'abc'
const str2:string = 'abc'

💡作用

1. 给类型起别名
2. 定义了新类型

场景
给复杂类型起别名

// type NewType = string | number

// let a: NewType = 1
// let b: NewType = '1'

// let arr: NewType[] = [1, '1']
    
type MyArr = (number | string) []
const arr:MyArr = [1, '1']

别名可以是任意的合法字符串，一般首字母大写

🌈接口（interface）

当一个对象类型被多次使用时，可以有两种方式来来描述对象的类型，达到复用的目的。

1. 类型别名， Type（类型别名，不仅可以为对象指定类型，实际上可以为任意类型指定别名）
2. 接口, interface （只能为对象指定类型。但是它可以继承。）

💡推荐：能使用 type 就是用 type
格式：

interface 接口名  {
    属性1: 类型1,
    属性2: 类型2,
}

示例

interface IGoodItem  {
    name: string, price: number, func: ()=>string
}


const good1: IGoodItem = {
    name: '手表',
    price: 200,
    func: function() {
        return '看时间'
    }
}

const good2: IGoodItem = {
    name: '手机',
    price: 2000,
    func: function() {
        return '打电话'
    }
}

接口名称 推荐以 I 开头，能使用type尽量使用type

🏮接口的继承

有这样一段代码：

//这两个接口都有 x、y 两个属性，重复写两次，可以，但很繁琐
interface Ia{ a: number; b: number }
interface Ib{ a: number; b: number; c: number }

🏮分析

💡如果两个接口之间有相同的属性或方法，可以将公共的属性或方法抽离出来，通过继承来实现复用

格式:

interface 接口2 extends 接口1 {
    属性1： 类型1， // 接口2中特有的类型
    ... 
}

实现代码：

interface Ib extends Ia {
    c: number // 接口2中特有的类型
    }

• 使用 extends(继承)关键字实现了接口 Ib 继承 Ia
• 继承后Ib就有了Ia的的所有属性和方法，此时Ib同时有a,b,c三个属性

🌈元组（Tuple）

💡元组是另一种特殊的数组：

• 它确切地包含多少个元素
• 特定索引对应的类型

示例代码：

// 约定position这个数组里只能有两个参数 ，且都只能是number类型
let position: [number, number] = [39.5427, 116.2317]

🌈字面量类型

看下面代码：
他们的类型分别是什么？

let str1 = 'hello'
const str2 = 'hello'

str1是字符串类型

str2是hello类型（什么鬼！！！）

🏮解释：

str1 是一个变量(let)，它的值可以是任意字符串，所以类型为:string
str2 是声明的常量，常量不允许修改的 所以str2的类型是hello**

str2等价于：

const str2 :'hello'= 'hellow'

💡注意：此处的 'hello '，就是一个字面量类型，也就是说某个特定的字符串也可以作为 TS 中的类型

💡字面量的作用：

单个字面量没有什么用处，它一般和联合类型一起使用 ， 用来表示一组明确的可选值列表

🏮示例：

比如，在游戏中，游戏的方向的可选值只能是上、下、左、右中的任意一个

// 使用自定义类型:
type Direction = 'up' | 'down' | 'left' | 'right'

function changeDirection(direction: Direction) {
  console.log(direction)
}

// 调用函数时，写上''，就会有类型提示：
changeDirection('up')

VScode已经给出我们提示 只能传这四个合法参数如果填别的，就会报错

💡优势：相比于 string 类型，使用字面量类型更加精确、严谨

字面量类型约定：只能取某些个特定的值。一般和联合类型一起使用。

🌈数组类型

两种写法

格式:

let 变量: 类型[] = [值1，...]

let 变量: Array<类型> = [值1，...]

🏮基本示例

// 写法一：
let numbers: number[] = [1, 3, 5] //  numbers必须是数组，每个元素都必须是数字

// 写法二：
let strings: Array<string> = ['a', 'b', 'c'] //  strings必须是数组，每个元素都必须是字符串

🏮拓展示例

如何定义一个数组，它的元素可能是字符串类型，也可能是数值类型。

分析，结合联合类型来使用

let arr: (number | string) [] = ['1', 1]

🌈函数-单个定义

函数的类型实际上指的是：函数参数和返回值的类型
格式:

// 普通函数
function 函数名(形参1： 类型=默认值， 形参2：类型=默认值): 返回值类型 { }

// 箭头函数
const 函数名（形参1： 类型=默认值， 形参2：类型=默认值):返回值类型 => { }

🏮示例：

// 函数声明
//声明add函数 定义它的类型 两个形参的类型必须是number 返回值也必须是number
function add(num1: number, num2: number): number {
  return num1 + num2
}
//声明add函数 定义它的类型 两个形参的类型必须是number 如果不给参数 num1默认是10，num2默认20  返回值也必须是number
// 箭头函数
const add = (num1: number=10, num2: number=20): number => {
  return num1 + num2
}

add（1,'1') // 报错

🌈函数-统一定义函数格式

定义多个具有相同参数类型和返回值类型的函数时，代码比较累赘

const add1 = (num1: number, num2: number): number => {
  return num1 + num2
  }
 const add2 = (num1: number, num2: number): number => {
  return num1 - num2
  }

把拥有相同形参和返回值的函数当做一个整体，来定义

//形参和返回值 类型相同的函数 我们可以自定义一个类型 来复用 
type Add = (a: number,b:number)=>number

const add1 : Add  = (num1, num2) => {
  return num1 + num2
  }
 const add2 : Add  = (num1, num2)=> {
  return num1 - num2
  }

🌈函数返回值是void

如果一个函数没有返回值，此时，在 TS 的类型中，应该使用 void 类型，有如下三种情况会满足

💡- 不写return

💡- 写return ，但是后面不接内容

💡- 写return undefined

代码：

{
  // 情况一：没有返回值 
  const fn1 =():void =>{
  }
  // 情况二：返回值没有参数
  const fn2 =():void =>{
    return
  }
  // 情况三：返回值是undefined
  const fn3 =():void =>{
    return undefined
  }
}