Typescript学习笔记(2.0)

ts编译选项

tsc  app.ts -w  

参数-w,就是对app.ts进行监视,每次该文件改变时就会自动编译

**:任意目录

*:任意文件

接口

接口用来定义一个类结构,用来定义一个类中应该包含哪些属性和方法,同时接口也可以当做类型声明去使用。

interface MyInterface{

name:string

age:number

}

使用此接口:const obj:MyInterface={

name:'mez',

age:11}

注意:接口是可以重复声明的。

interface MyInterface{

gender:string

}

这样两个同名接口存在的话等价于:

interface MyInterface{

gender:string

name:string

age:number

}

接口可以再定义类的时候去限制类的结构,接口中的所有属性都不能有实际的值,所以说,接口只考虑对象的接口,而不考虑其值,在接口中所有的方法都是抽象方法。

interface myTest{

name:string;

sayHello():void;

}

定义类时,可以使类去实现一个接口

class MyClass implements myTest{

name:string;

constructor(name:string){

this.name=name;

}

sayHello(){

console.log('大家好~~')

}

}

interface和abstract是TS中独有的,在编译后就看不到了。

属性的封装

(function(){
//定义一个表示人的类
class Person{
//可以用下划线的方式
//TS可以再属性钱添加属性的修饰符
//public:public修改的属性是可以任意修改的
//private:私有属性,只能再类内部进行修改
//通过再类中添加方法使得私有属性可以被外部访问
//protected:受保护的属性,只能在当前类和当前类中的子类中进行访问
private _gender:string;
name:string;
age:number;
constructor(name:string,age:number){
this.name=name
this.age=age
}
//getter方法用来读取属性
//setter方法用来修改属性
//定义方法,用来获取gender属性
getGender(){
return this._gender
}
//定义方法,用来设置gender属性
setGender(value:string){
//判断gender是否合法
if(value=='男' || value=='女'){
    this._gender=value
}

}
}
const per =new Person(name:'孙悟空',age:18)

//现在属性是再对象中设置的,可以任意的被修改
//比如
person.name='mez';

//但是会存在一个问题,name和age都可以修改,但是当存在不可控的数据时,是非常危险的

//TS中设置getter方法的方式
get gender(){
return this._gender
}
//这样的话就可以直接使用.gender即可

set gender(value:string){
this._gender=value
}
//可以直接执行
per.gender='男'

//可以直接将属性定义在构造函数中
class C{
constructor(public name:string){}
}
//等价于
class C{
constructor(name:string){
this.name=name
}
}
})()

泛型

//在不知道参数的类型时,就可以使用泛型

function fn(a:  ??): ?? {
return a

}

//定义函数或类时,遇到不明确的就可以使用泛型
function fn<T>(a:T):T{
 return a;
}

//只有在函数执行的时候才能确定T的类型

//可以直接调用具有泛型的函数
fn(a:10)  //此时number赋值给了T   //类型推断为number

fn<string>(a:'hello')  //手动指定类型,防止在不能自动推断出类型的情况

function fn2<T,K>(a:T,b:K):T{
console.log(b);
return a}

fn2<number,string>(a:123,b:'hello')

interface Inter{
length:number;
}
//T extends Inter  表示泛型T必须是Inter实现类
function fn3<T extends Inter>(a:T):number{
    return a.length;
}
fn3('123')//不正确
fn3(123)//正确

class Myclass<T>{
name:T;
constructor(name:T){
this.name=name
}}
const mc=new Myclass<string>(name:'aaa')

### Vue.js 2.0 和 3.0 学习笔记对比 #### 特性概述 Vue.js 是一种用于构建用户界面的渐进式框架。随着版本迭代,Vue 不断引入新特性并优化现有功能。从 Vue.js 2.0 到 3.0 的升级带来了显著的变化,在性能、API 设计等方面都有所改进。 #### 性能提升 相较于 Vue.js 2.0, Vue.js 3.0 提供了更高效的编译器和运行时环境。新的渲染机制使得虚拟 DOM 更新更加高效,减少了不必要的重绘操作[^1]。 #### API 变化 - **Composition API**: 这是 Vue 3 中最令人瞩目的新增特性之一。它允许开发者更好地组织逻辑代码,特别是在处理复杂业务场景时尤为有用。相比之下,Vue 2 主要依赖 Options API 来定义组件选项。 ```javascript // Composition API (Vue 3) import { ref, reactive } from 'vue'; export default { setup() { const count = ref(0); function increment() { count.value++; } return { count, increment }; } } ``` - **Teleport 组件**: Vue 3 新增了一个名为 Teleport 的内置组件,可以将子节点渲染到DOM中的任何位置而不受当前组件结构的影响。这一特性对于创建模态框等脱离文档流的内容非常方便。 #### 工具链支持 Vue CLI 被广泛应用于项目初始化阶段。尽管两个版本都提供了良好的工具链支持,但在配置灵活性方面有所差异。Vue 3 更加注重现代化开发体验,比如默认采用 ES Modules 构建方式,并且对 TypeScript 支持更为友好。 #### 社区资源与教程推荐 针对不同需求层次的学习者而言,选择合适的学习材料至关重要。以下是两份来自黑马程序员的教学资料链接: - 【Vue学习笔记】四小时内快速掌握 VUE 基础知识点:[点击访问](https://blog.csdn.net/H1519223775/article/details/122244174) - 尚硅谷出品的 Vue2.0+Vue3.0 完整课程体系,适合希望深入理解框架原理的人士:[点击查看](https://blog.csdn.net/H1519223775/article/details/124199556)
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

mez_Blog

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值