前端TS项目中遇到过的难点（一）

最新推荐文章于 2024-05-26 14:31:00 发布
最新推荐文章于 2024-05-26 14:31:00 发布
阅读量982 收藏 23
点赞数 19
文章标签： 前端 typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mangcun_tutu/article/details/135522040
版权

TS项目总结

1.项目的搭建及配置

1.1使用vite来创建项目时

兼容性注意 Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本

启动命令以及相关内容具体看vite官网

开始 | Vite 官方中文文档

1.2浏览器自动打开

找到 package.json 配置文件!

"scripts": {
  "dev": "vite --open",
  "build": "vue-tsc && vite build",
  "preview": "vite preview"
 }

1.3 src 别名的配置

找到 vite.config.ts 配置文件。

如果红色语法提示请安装@types/node 是 TypeScript 的一个声明文件包，用于描述 Node.js 核心模块和常用的第三方库的类型信息

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path';
// https://vitejs.dev/config/
export default defineConfig({
 plugins: [vue()],
 resolve: {
  alias: {
   "@": path.resolve(__dirname, 'src')
  }
 }
})

 找到tsconfig.json配置文件,找到配置项 compilerOptions 添加配置,这一步的作用是让 IDE 可以对路径进行智能提示

"baseUrl": ".",
  "paths": {
   "@/*": ["src/*"]
  }

2.LESS 和 SCSS 的区别

相同点：

  1. LESS和SCSS都是css的预处理器，可以拥有变量，运算，继承，嵌套的功能，使用两者可以使代码更加的便于阅读和维护。

  2. 都可以通过自带的插件，转成相对应的css文件。

  3. 都可以参数混入，可以传递参数的class，就像函数一样

  4. 嵌套的规则相同，都是class嵌套class

不同点：

1.声明和使用变量

LESS用@符号，SCSS用$符号表示

2.变量插值

LESS采用@{XXXX}的形式，SCSS采用${XXXX}的形式

作用： 可以用为LESS和SCSS声明变量，变量作为css的选择器

3. SCSS支持条件语句，LESS不支持

SCSS可以使用if{}else，for循环等等，LESS不支持

4.应用外部css文件方式不同

SCSS应用的css文件名必须以‘_’开头（下划线），文件名如果以下划线开头的话，sass会认为改文件是一个应用文件，不会将它转成css文件

5.引用父选择器&符号的使用

LESS和SCSS都可以使用&符号表示父选择器，但是SCSS的&符号只能出现在一个组合选择器的开始位置，LESS则没有这个限制

3.封装组件

在src中创建一个文件夹，在main.ts中去引用, import ... from "...."

在利用createApp方法创建应用实例,且将应用实例挂载到挂载点上

const app = createApp(App);
app .component("XXX'， XXX);

在相关页面使用: <XXX />

在xx.vue中去使用时直接引入就行

import ... from "...."

在相关页面使用: <XXX />

4.路由

命令 pnpm i vue-router

相关配置：

在main.ts中：

//引入vue-router核心插件并安装

import router from "@/router";

//安装vue-router

app.use(router);

在vue2中使用的是vue.use,在vue3中没有了构造函数，用的是实例

//滚动行为:控制滚动条的位置,让其每跳转一次页面，滚动条会在顶部
scrollBehavior() {
return {
    left: 0,
    top: 0
    }
}

5.深度选择器

分为三种: 1.css原生，使用 >>> 深度选择器来修改 外用第三方组件的样式

2.less，使用/deep/ 深度选择器来修改 外用第三方组件的样式

3.scss, ::v-deep 深度选择器来修改 外用第三方组件的样式

注意： ① 操作符 >>> 可能会因为无法编译而报错，可以使用 /deep/ ② vue3.0 中使用 /deep/ 会报错，更推荐使用 ::v-deep ③ 对于使用了 css 预处理器（scss 、sass、 less）时，深度选择器 ::v-deep 比较通用

6.AXIOS二次封装

// 对于axios函数库进行二次封装
// 你工作的时候是否axios进行二次封装？二次封装的目的是什么
// axios的目的1.请求，响应拦截器功能
// 2.请求拦截器，一般可以在请求头中携带公共的参数：token
// 3.响应拦截器,可以简化服务器返回的数据，处理http网路错误
const request = axios.create({
  baseURL: "/api", //请求的基础路径的设置
  timeout: 5000, //超时的时间的设置，超出五秒请求就是失败的
});
// 请求拦截器
request.interceptors.request.use((config) => {
  // 获取用户仓库
  let userStore = useUserStore();
  // tokne是公共参数
  if(userStore.userInfo.token){
    config.headers.token = userStore.userInfo.token;
  }
  //   config:请求拦截器回调注入的对象（配置对象），配置对象的身上最重要的一件事情headers属性
  // 可以通过请求头携带公共参数-token
  return config;
});
// 响应拦截器
request.interceptors.response.use(
  // 相应拦截器成功的回调，一般会进行简化数据
  (response) => {
    return response.data;
  },
  (error) => {
    let status = error.response.status;
    switch (status) {
      case 404:
        ElMessage({
          type: "error",
          message: "请求失败路径出现问题",
        });
        break;
      case 500 | 501 | 502 | 503 | 504 | 505:
        ElMessage({
          type: "error",
          message: "服务器挂了",
        });
        break;
    }
    return Promise.reject(new Error(error.message));
  }
);

export default request;
 

7.跨域代理

 //配置跨域代理
  server:{
    proxy:{
      '/api': {
        target: 'http://syt.atguigu.cn',
        changeOrigin: true,
      },
    }
  }

配置完成后重启项目

8.渲染图片

首先，一般来说，当请求图片的接口时，会返回一个数组，这个数组里会是一些图片的名字

图片地址的构成是http地址+图片名，这里要注意的是拼接src的地址，如果不用变量存起来，就只有原本的第一个div有这个地址，后面循环出的则只有图片名。

vue 中的img 的src 可以动态绑定,使用模板字符串来拼接，${写后台数据的路径}例如：

9.定义接口TS类型

在我们写ts项目时需要给接口定义类型，如下是一个接口,并且还需要传一个参数

新建一个ts文件来定义他的类型:

代表的是医院的等级或者地区数据ts类型，里面的数据是与后台的接口相对应的

定义一个数组来接受数据

定义一个接口类型来约束接口，并将数据传给我们定义的数组

这边继承的是ResponseData,因为接口返回的数据要有ResponseData中的数据, 已下是ResponseData中的数据

10.async和await

  1. async 是异步的意思，await则可以理解为 async wait。所以可以理解async就是用来声明一个异步方法，而 await是用来等待异步方法执行

  2. async作为一个关键字放在函数前面，表示该函数是一个异步函数，异步函数意味着该函数的执行不会阻塞后面代码的执行；而 await 用于等待一个异步方法执行完成；

  3. 当函数内部执行到一个 await 语句的时候，如果语句返回一个 promise 对象，那么函数将会等待 promise 对象的状态变为 resolve 后再继续往下执行。并会阻塞该函数内后面的代码。

  4. 因此async/await的作用就是将异步逻辑，转化为同步的顺序来书写，并且这个函数可以自动执行。

  5. 为了优化 .then 链而开发出来的。

  6. 简而言之，async用于申明一个function是异步的；而await则可以认为是 async await的简写形式，是等待一个异步方法执行完成的。

async/awiat的使用规则:

async 表示这是一个async函数， await只能用在async函数里面，不能单独使用 async 返回的是一个Promise对象，await就是等待这个promise的返回结果后，再继续执行 await 等待的是一个Promise对象，后面必须跟一个Promise对象，但是不必写then()，直接就可以得到返回值

async/await的特点

1、Async作为关键字放在函数前面，普通函数变成了异步函数

2、异步函数async函数调用，跟普通函数调用方式一样。在一个函数前面加上async，变成 async函数，异步函数，return:1，打印返回值，

3、返回的是promise成功的对象，

4、Async函数配合await关键字使用

总结：

async 函数

1)函数的返回值为Promise对象

2)Promise对象的结果由async函数执行的返回值决定

await 表达式

1)正常情况下，await右侧的表达式一般为 promise对象 , 但也可以是其它的值

2)如果表达式是promise对象，await就忙起来了，它会阻塞函数后面的代码，等着Promise对象resolve，然后得到resolve的值，作为await表达式的运算结果。

3)如果表达式是其它值, 直接将此值作为await的返回值 async和await基于promise的。使用async的函数将会始终返回一个 promise 对象。这一点很重要，要记住，可能是你遇到容易犯错的地方。 在使用await的时候我们只是暂停了函数，而非整段代码。这里经常会是容易犯错的地方。 async和await是非阻塞的

仍然可以使用 Promise，例如Promise.all(p1, p2, p3).，接受一个数组作为参数，p1、p2、p3 都是 Promise 实例，如果不是，就会先调用 Promise .resolve方法，将参数转为 Promise 实例，再进一步处理。只要 p1、p2、p3 之中有一个被 rejected，整个状态就变成 rejected。

注意

1)await必须写在async函数中, 但async函数中可以没有await

2)如果await的promise失败了, 就会抛出异常, 需要通过try…catch来捕获处理

Mangcun_tutu
关注
  • 19
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
让你眼前一亮的 10 大 TS 项目
semlinker的博客
06-21 3902
TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。 TypeScript 提供最新的和不断发展的 JavaScript 特性，包括那些来自 2015 年的 ECMAScript 和未来的提案中的特性，比如异步功能和 Decorators，以帮助建立健壮的组件。 下图显示了 TypeScript 与 ES5、ES2015 和 ES2016 之间的关系： 好的，简单介绍了 TypeScript，
ts踩坑记
令主
01-21 264
一、报错：tsc : 无法加载文件 D:\soft\nodejs\node_global\tsc.ps1，因为在此系统上禁止运行脚本   在通过vs code 运行tsc helloworld.ts 报错 解决方案： 以管理员身份运行vs code 执行：get-ExecutionPolicy，显示Restricted，表示状态是禁止的 执行：set-ExecutionPolicy RemoteSigned 这时再执行get-ExecutionPolicy，就显示RemoteSigned 此时发现再运行
前端开发-添加公用的ts文件，并在Vue文件中引用
最新发布
老九的博客
05-26 498
然后在你的vite.config.ts中添加对path模块的声明。通过调用这个ts文件让我们可以在vue文件中使用函数。Eg：我们现在创建一个formRules.ts文件。一般我们把页面要用的公用函数写在一个ts文件中。这种就是你需要在你的项目中安装Path模块。然后在我们需要调用该函数体的vue文件中。有可能语法一开始会提示。
ts踩坑记录
lf_morning的博客
07-06 303
1.下载地址：https://git-scm.com/downloads 2.选择适合自己机型的安装包； 3.
ts项目实例_Web前端全栈项目实践（上篇）
weixin_39847437的博客
12-08 486
技术选型UI框架： iview前端框架： Vue.js + Typescript.js请求库：Axios样式编译： sass模拟库： easymock图表：AntVG2图标： iconfont图标布局选型：flex + rem布局项目安装1.将项目克隆到本地git clone https://github.com/wangly19/bweb_visual_vue.git2.安装依赖npm inst...
基于Vue3+TS的Monorepo前端项目架构设计与实现
岩家兴的博客
02-20 830
写在前面 你好，我是前端程序员鼓励师岩家兴！去年在另一个项目https://juejin.cn/post/7121736546000044046中，我向读者朋友们介绍了结合npm包管理工具yarn作vue3项目的monorepo架构设计。今天，在这个风和日丽阳光明媚的钱塘江畔，我心情很好，我打算再写一篇她的姊妹篇------基于Vue3+TS的Monorepo前端项目架构设计与实现(pnpm版本...
前端项目-jsts.zip
09-02
【前端项目-jsts.zip】是一个包含JavaScript库的压缩包，主要功能是提供空间几何操作的函数和谓词，用于处理几何对象。这个库被称为jsts，它在前端开发中扮演着重要角色，尤其是在地理信息系统（GIS）或者地图应用中...
vue3+ts+antd 前端基础模板
01-14
新的响应性系统：Vue 3 引入了一个新的响应性系统，使得在组件中跟踪和更新状态更加简单和高效。 新的生命周期钩子：Vue 3 引入了一些新的生命周期钩子函数，使开发者可以更好地控制组件的生命周期。
vue项目引入ts步骤(小结)
10-16
在Vue项目中引入TypeScript，主要是为了利用其强大的类型检查和静态分析能力，提高代码的可维护性和稳定性。以下是详细的步骤： 1. **安装TypeScript和ts-loader** 首先，你需要通过npm或cnpm安装TypeScript和ts-...
记一次react前端项目打包优化的方法
10-15
在本文中，我们将深入探讨如何优化一个React前端项目，特别是针对打包过程中的性能问题。首先，我们遇到的问题是在uat环境中，由于bundle.js文件过大（3.6MB），导致页面加载时白屏时间超过30秒，严重影响用户体验。...
飞书项目插件开发前端示例项目
09-18
飞书项目插件开发前端示例项目，需要的小伙伴可以免费下载，前端是使用react进行开发，以实现新增一个【审批信息】tab页插件为例。与我文章相关联：...
前端基础（二）-TS
将心_的博客
01-07 749
无聊的知识又增加了 hasOwnProperty() hasOwnProperty()方法会返回一个布尔值，指示对象自身属性中是否具有指定的属性（是否有指定的键） const obj = { a: 1, b: 2, }; console.log(obj.hasOwnProperty('a'), obj.hasOwnProperty('c')); // true false TypeScript TS 类型 布尔类型（Boolean） const flag:boolean = true;
前端之TS类型注解、接口（vscode自编译ts→js）
weixin_46372074的博客
06-27 5511
1.命令行安装自动编译命令 2.修改配置中的输出js存储位置和关闭严格模式 3.启动监视，自动编译ts为js启动监视任务: 终端 -> 运行任务 -> 监视tsconfig.json 1.html： 2.ts： 3.自动编译的js 结果：
前端进阶之TS总结
halations的博客
01-11 4024
TS知识点总结
前端学习TS之路——5(类)
HarryHY的博客
11-08 1695
TS定义类 ： class Person{ name:string;//省略的public关键词 constructor(name:string){//构造函数实例化类的时候触发的 this.name = name } aa():void{ ...
前端学习（2672）：ts初步概念和功能实现
歌谣的博客
12-01 921
web前端--TS基础理论及原理
m0_51123132的博客
01-07 7173
web前端–TS基础理论及原理 概念：typescript就是在js的基础上对数据进行强制的类型检查，生成js代码的时进行编译，弱类型的静态语言。 类型注解：轻量级的为函数或变量添加约束的方式 静态语言：在编译过程中就能发现错误，对类型检查较为严格。 动态语言：bug的隐藏久，灵活度高。 基础类型：布尔值、数字、数组（数组里面都是number类型和js不同）、元组(数字、字符串类型混搭)、枚举（可迭代，理解为迭代器的一种）、字符串 let a: number = 1; let b: string = "he
前端学习TS之路——6(接口规定)
HarryHY的博客
11-08 530
1.属性接口：对json的约束 function funname(laber:string):void{ console.log(1) } funname('string') TS中自定义方法传入参数对JSON进行约束 function funname(laber:{'label':string}):void{ console.log(1) } funname({lable:'1224'})...
前端学习TS之路——3(数据类型)
HarryHY的博客
10-31 923
定义数组的方法 var arr:number[]=[1,2,3] var arr:Array<number> = [1,2,3] 元祖类型 给数组中每一个元素指定类型 let arr:[number,string] = [1,'1'] 枚举类型——enum enum Flag {success=1,error=2} let f:Flag = Flag.error enum Co...
怎么在ts的前端项目中使用skywalking
07-13
要在TypeScript的前端项目中使用SkyWalking进行性能监控，你可以按照以下步骤进行设置： 1. 确保你的TypeScript项目已经使用了构建工具（如Webpack、Rollup等）进行构建。 2. 在项目根目录下安装SkyWalking的代理程序。你可以使用npm或yarn进行安装。 3. 在你的TypeScript项目中创建一个`skywalking.config.js`文件，用于配置SkyWalking代理程序的相关参数。在配置文件中，你需要指定SkyWalking代理程序的地址和端口。 4. 在你的TypeScript代码中引入SkyWalking的JavaScript代理程序。你可以在入口文件或需要监控的模块中引入它。例如： ```typescript import 'skywalking-js'; ``` 5. 在你的代码中启动SkyWalking代理程序。在适当的位置调用`SkyWalking.start`方法来启动代理程序。例如： ```typescript SkyWalking.start({ serviceName: 'your-service-name', instanceName: 'your-instance-name', }); ``` 这里的`your-service-name`和`your-instance-name`分别是你的服务名称和实例名称，可以根据你的项目进行自定义。 6. 重新构建并运行你的TypeScript项目。在浏览器中打开项目，并访问SkyWalking的Web界面，你应该能够看到你的项目的性能监控数据了。 请注意，以上步骤是一般性的指导，具体配置和使用方式可能因项目和SkyWalking版本而有所不同。建议参考SkyWalking的官方文档以获取更详细的指导。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值