本文共 6080 字，大约阅读时间需要 20 分钟。

一.配置ts编译文件

配置项目1.新建目录 demots2.tsc --init  初始化tsconfig.json文件3.修改tsconfig.json文件	{   		"compilerOptions":{   			"outDir":"./dist"		},		"include":['./src']	}4.新建 dist  src5.tsc -p tsconfig.json -watch

1.接口(interface)

定义

// 接口定义// 关键字 interfaceinterface Animal{       color:string,    height:number}let a:Animal = {       color:'gold',    height:30,}

属性接口

// 属性接口interface Person{       name:string,    age:number,    car?:string,//可选属性}let liujin:Person = {       name:'刘劲',    age:18,    // car:'共享单车'}interface Point{       readonly x:number,//只读属性    readonly y:number,}let p:Point = {       x:20,    y:30}// p.x = 40;console.log(p);

方法接口

// 方法接口interface LogA{       (a:number,b:number):number}let add:LogA = (a:number,b:number)=>{       return a + b}let minus:LogA = (a:number,b:number)=>{       return a - b}console.log(add(4,8));console.log(minus(30,10));

类接口

// 类接口interface People{       name:string;    fun():void}let p1:People = {       name :'赵丽颖',    fun():void{           console.log('这是调用接口的方法');    }}console.log(p1);

扩展接口

• 类实现接口

// 类实现接口需要采用关键字 implementsclass Man implements LogB{       name:string = '唐达';    fn():void{           console.log('这是调用接口的方法');            }}let tangda = new Man()console.log(tangda.name);tangda.fn()

• 类实现多个接口

interface  A{       fn():void}interface B{       fn1():void}class C implements A,B{       fn():void{           console.log('实现A接口');            }    fn1():void{           console.log('实现B接口');            }}let c = new C()c.fn();c.fn1();

• 接口继承

// 接口继承interface D extends A{       fn2():void}class E implements D{       fn():void{           console.log('实现了A接口');            }    fn2():void{           console.log('实现了D接口');            }}let e = new E()e.fn();e.fn2();

2.装饰器(decorator)

装饰器其实就是一个函数,用来装饰类,属性和方法

装饰器:普通装饰器 工厂装饰器

普通定义

// 普通装饰器// params:为系统自动注入参数function logB(params:any):void{       // 接收参数为装饰器所装饰的类    console.log(params);    }@logBclass Http{   }

工厂定义

• 类装饰器

// 类装饰器function logC(params:any){       return function(target:any){           // 接收参数为装饰器传递的参数        console.log("params",params);        // 接收参数为装饰器所装饰器的类        console.log("target",target);       console.log( target.name);    //    console.log(target.age);        target.prototype.age = params        target.prototype.fn = ()=>{               console.log('该方法被调用了');                    }                   }}@logC('小王')class Http1{       name:string | undefined = '哈哈';    age:string | undefined;    fn(){       }}let h = new Http1()console.log(h.age);h.fn()

• 属性装饰器

// 属性装饰器function logD(params:any){       return function(target:any,attr:any){           // 接收参数为装饰器传递的参数        console.log('params:',params);        // 接收参数为装饰器装饰属性所在的类        console.log('target:',target);        // 装饰器所装饰的属性名        console.log('attr:',attr);        target[attr] = params    }}class Http2{       @logD('属性装饰器') name:string | undefined;}let h2 = new Http2()console.log(h2.name);

• 方法装饰器

// 方法装饰器function logE(params:any){       return function(target:any,funName:any,desc:any){           // 接收参数为装饰器传递的参数        console.log("params:",params);        // 接收参数为装饰器装饰器方法所在的类        console.log("target:",target);        // 接收参数为装饰器装饰器的方法名        console.log("funName:",funName);        // 接收参数为装饰器装饰方法的详细信息        console.log("desc:",desc);            }}class Http3{       @logE('方法装饰器')    fn(){           var num:number = 20;    }}

二.vue3.0

官网地址:https://www.vue3js.cn/docs/zh/guide/introduction.html

1.安装脚手架

1.脚手架安装:cnpm i @vue/cli@3.0.0 -g2.vue -v  查看版本3.创建项目: vue create 项目名称

2.要想拉取2.x版本

1.脚手架安装:cnpm i @vue/cli-init -g2.创建项目:vue init webpack 项目名称

3.创建项目步骤

1.vue create demo3.0

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SkmD1zeP-1616505719048)(C:\Users\Administrator\Desktop\web1102\day14-ts-vue3.0\1.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9td5ah16-1616505719050)(C:\Users\Administrator\Desktop\web1102\day14-ts-vue3.0\2.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u7eLYfPS-1616505719052)(C:\Users\Administrator\Desktop\web1102\day14-ts-vue3.0\3.png)]

5.项目启动: npm run serve

6.修改启动命令

在配置文件package.json{       "scripts":{   		"start":"npm run serve"    }}

7.再次启动项目: npm start

4.使用vue3.0的新语法

1.组件的创建

2.属性

3.方法

4.计算属性

   
    name取反为:{  {changeName}}
   
 // 计算属性-----computed    get changeName(){        return  this.name.split('').reverse().join('')    }

5.监听(Watch)

• 普通监听
  • 普通变量采用普通监听

• 深度监听
  • 是对象或者数组对象需要采用深度监听

6.组件之间通信

• 父传子

1.父组件: 通过自定义属性进行传递数据2.子组件: 通过@Prop装饰器来接收父组件传递的数据

父组件 About.vue
   

子组件: Child.vue
   

• 子传父

1.子组件: 通过自定义事件@Emit装饰器进行传递2.父组件: 通过触发自定义事件名称进行接收.

子组件Child.vue
   

父组件 About.vue
   

7.设置配置文件(做配置代理)

新建vue.config.js

module.exports = {         // 部署应用时的基本 URL      publicPath:"",      // build时构建文件的目录       outputDir: 'dist',      // build时放置生成的静态资源 (js、css、img、fonts) 的目录      assetsDir: 'static',      // 指定生成的 index.html       indexPath: 'index.html',       // 设置代理请求      devServer: {             proxy: {                 '/api': {                     target: '
   
    ',                  ws: true,                  changeOrigin: true                },            }      }}
   

转载地址：http://nxse.baihongyu.com/