学习vue3之路day3

简介: 学习vue3之路day3

TypeScript常用语法

类使js以面向对象的方式进行开发。最终编译成js函数的方式。vue3、react现在也可使用函数式编程,相较类编程,函数式更简洁灵活。

class Greeter {
  // 声明属性
  message: string

  // 构造方法
  constructor (message: string) {
    this.message = message
  }

  // 一般方法
  greet (): string {
    return 'Hello ' + this.message
  }
}

// 创建类的实例
const greeter = new Greeter('helloworld')
// 调用实例的方法
console.log(greeter.greet())

其方式跟java编程很相似。

属性默认未public

通过extends实现继承类。

抽象类abstract

函数

// 匿名函数
let add = function(x, y) { 
  return x + y;
}
// 指定类型
function add(x: number, y: number): number {
  return x + y
}


// ? 可选  = 默认值
function add(x: number, y?: number): number {
  return x + y
}

function add(x: number, y: number=0): number {
  return x + y
}
 let val = add(1);

不确定数量的参数 ...标识

function info( ...args: string[]) {
  console.log(args)
}
info('abc', 'c', 'b', 'a')

泛型

不使用泛型可以使用any。 泛型优点是强制类型一致,编译器会进行检查,及编写时语法提示。

function createArray <T> (value: T, count: number) {
    const arr: Array<T> = []
    for (let index = 0; index < count; index++) {
      arr.push(value)
    }
    return arr
  }

泛型接口

interface Result <T> {
  data: T;
  code: number;
  message: string;
}

泛型约束 extends 指定父类型

interface Lengthwise {
  length: number;
}

// 指定泛型约束
function fn2 <T extends Lengthwise>(x: T): void {
  console.log(x.length)
}

声明文件

声明文件只在编译时有用。

通过declare来声明,文件后缀.d.ts

declare var jQuery: (selector: string) => any;

内置对象

基础类型的包装对象 Boolean,Number,String

日期 Date

正则 Regexp

Error

Window,Document,Event

Array

String的方法

charAt() 返回在指定位置的字符

concat() 连接两个或更多字符串,并返回新的字符串

var str1 = new String( "RUNOOB" ); 
var str2 = new String( "GOOGLE" ); 
var str3 = str1.concat( str2 ); 

indexOf() 返回某个指定的字符串值在字符串中首次出现的位置

replace() 替换与正则表达式匹配的子串

slice() 提取字符串的片断,并在新的字符串中返回被提取的部分。

split() 把字符串分割为子字符串数组。

substring() 提取字符串中两个指定的索引号之间的字符。

toLowerCase() 把字符串转换为小写

命名空间

命名空间一个最明确的目的就是解决重名问题。类似java的package

namespace sys { 
   export interface ISomeInterfaceName {      }  
   export class SomeClassName {      }  
}

如果我们需要在外部可以调用 SomeNameSpaceName 中的类和接口,则需要在类和接口添加 export 关键字

namespace Drawing { 
    export interface IShape { 
        draw(); 
    }
}

解构

从对象中提取部分属性 相当于 const a = obj.a;

 interface Result <T> {
    data: T;
    code: number;
    message: string;
  }

  let result:Result<string> = {
      data: 'hello',
      code: 200,
      message: 'success',
  }

  const {data,code,message} = result;

  console.log(data,code,message);

至此TypeScript基础部分完成。

相关文章
|
1月前
|
JavaScript 前端开发 安全
Vue 3
Vue 3以组合式API、Proxy响应式系统和全面TypeScript支持,重构前端开发范式。性能优化与生态协同并进,兼顾易用性与工程化,引领Web开发迈向高效、可维护的新纪元。(238字)
496 139
|
1月前
|
缓存 JavaScript 算法
Vue 3性能优化
Vue 3 通过 Proxy 和编译优化提升性能,但仍需遵循最佳实践。合理使用 v-if、key、computed,避免深度监听,利用懒加载与虚拟列表,结合打包优化,方可充分发挥其性能优势。(239字)
209 1
|
6月前
|
缓存 JavaScript PHP
斩获开发者口碑!SnowAdmin:基于 Vue3 的高颜值后台管理系统,3 步极速上手!
SnowAdmin 是一款基于 Vue3/TypeScript/Arco Design 的开源后台管理框架,以“清新优雅、开箱即用”为核心设计理念。提供角色权限精细化管理、多主题与暗黑模式切换、动态路由与页面缓存等功能,支持代码规范自动化校验及丰富组件库。通过模块化设计与前沿技术栈(Vite5/Pinia),显著提升开发效率,适合团队协作与长期维护。项目地址:[GitHub](https://github.com/WANG-Fan0912/SnowAdmin)。
907 5
|
2月前
|
开发工具 iOS开发 MacOS
基于Vite7.1+Vue3+Pinia3+ArcoDesign网页版webos后台模板
最新版研发vite7+vue3.5+pinia3+arco-design仿macos/windows风格网页版OS系统Vite-Vue3-WebOS。
365 11
|
1月前
|
JavaScript 安全
vue3使用ts传参教程
Vue 3结合TypeScript实现组件传参,提升类型安全与开发效率。涵盖Props、Emits、v-model双向绑定及useAttrs透传属性,建议明确声明类型,保障代码质量。
247 0
|
3月前
|
缓存 前端开发 大数据
虚拟列表在Vue3中的具体应用场景有哪些?
虚拟列表在 Vue3 中通过仅渲染可视区域内容,显著提升大数据列表性能,适用于 ERP 表格、聊天界面、社交媒体、阅读器、日历及树形结构等场景,结合 `vue-virtual-scroller` 等工具可实现高效滚动与交互体验。
426 1
|
3月前
|
缓存 JavaScript UED
除了循环引用,Vue3还有哪些常见的性能优化技巧?
除了循环引用,Vue3还有哪些常见的性能优化技巧?
240 0
|
4月前
|
JavaScript
vue3循环引用自已实现
当渲染大量数据列表时,使用虚拟列表只渲染可视区域的内容,显著减少 DOM 节点数量。
135 0
|
6月前
|
JavaScript API 容器
Vue 3 中的 nextTick 使用详解与实战案例
Vue 3 中的 nextTick 使用详解与实战案例 在 Vue 3 的日常开发中,我们经常需要在数据变化后等待 DOM 更新完成再执行某些操作。此时,nextTick 就成了一个不可或缺的工具。本文将介绍 nextTick 的基本用法,并通过三个实战案例,展示它在表单验证、弹窗动画、自动聚焦等场景中的实际应用。
588 17
|
7月前
|
JavaScript 前端开发 算法
Vue 3 和 Vue 2 的区别及优点
Vue 3 和 Vue 2 的区别及优点