学习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基础部分完成。

相关文章
|
24天前
|
缓存 JavaScript UED
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项?
在使用`v-model`处理自定义组件双向数据绑定时,要仔细考虑各种因素,确保数据的准确传递和更新,同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循,能够更好地发挥`v-model`的优势,实现高效的双向数据绑定效果。
126 64
|
24天前
|
JavaScript 前端开发 API
Vue 3 中 v-model 与 Vue 2 中 v-model 的区别是什么?
总的来说,Vue 3 中的 `v-model` 在灵活性、与组合式 API 的结合、对自定义组件的支持等方面都有了明显的提升和改进,使其更适应现代前端开发的需求和趋势。但需要注意的是,在迁移过程中可能需要对一些代码进行调整和适配。
103 60
|
1月前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
36 1
vue学习第一章
|
1月前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令,包括基本使用、动态绑定class及style等,希望能为你的前端学习之路提供帮助。持续关注,更多精彩内容即将呈现!🎉🎉🎉
26 1
vue学习第三章
|
1月前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
35 1
vue学习第四章
|
1月前
|
JavaScript 前端开发 算法
vue学习第7章(循环)
欢迎来到瑞雨溪的博客,一名热爱JavaScript和Vue的大一学生。本文介绍了Vue中的v-for指令,包括遍历数组和对象、使用key以及数组的响应式方法等内容,并附有综合练习实例。关注我,将持续更新更多优质文章!🎉🎉🎉
24 1
vue学习第7章(循环)
|
24天前
|
前端开发 JavaScript 测试技术
Vue3中v-model在处理自定义组件双向数据绑定时,如何避免循环引用?
Web 组件化是一种有效的开发方法,可以提高项目的质量、效率和可维护性。在实际项目中,要结合项目的具体情况,合理应用 Web 组件化的理念和技术,实现项目的成功实施和交付。通过不断地探索和实践,将 Web 组件化的优势充分发挥出来,为前端开发领域的发展做出贡献。
29 8
|
23天前
|
存储 JavaScript 数据管理
除了provide/inject,Vue3中还有哪些方式可以避免v-model的循环引用?
需要注意的是,在实际开发中,应根据具体的项目需求和组件结构来选择合适的方式来避免`v-model`的循环引用。同时,要综合考虑代码的可读性、可维护性和性能等因素,以确保系统的稳定和高效运行。
23 1
|
23天前
|
JavaScript
Vue3中使用provide/inject来避免v-model的循环引用
`provide`和`inject`是 Vue 3 中非常有用的特性,在处理一些复杂的组件间通信问题时,可以提供一种灵活的解决方案。通过合理使用它们,可以帮助我们更好地避免`v-model`的循环引用问题,提高代码的质量和可维护性。
33 1
|
24天前
|
JavaScript
在 Vue 3 中,如何使用 v-model 来处理自定义组件的双向数据绑定?
需要注意的是,在实际开发中,根据具体的业务需求和组件设计,可能需要对上述步骤进行适当的调整和优化,以确保双向数据绑定的正确性和稳定性。同时,深入理解 Vue 3 的响应式机制和组件通信原理,将有助于更好地运用 `v-model` 实现自定义组件的双向数据绑定。
下一篇
DataWorks