class ts 扩展方法_如使用Typescript撸Vue(Vue2 + TS +TSX+CSS module)
Vue对TS的支持一致不太好,连Vue作者尤大也自嘲真香压错了宝。期待Vue3.0会用TS重构且会有较大改进。不过目前有一些第三方的库可以曲线优化对TS的支持。主要就介绍下过下面两个库来写Vue。
总体体验尚可,类型检查,智能提示该有的都有,顺滑中带着一丝蹩脚。
如果要支持组件Props的类型检查及智能提示,则必须放弃template通过render写TSX, 总有种写React的感觉。
介绍
kaorun343/vue-property-decoratorgithub.com
vue-property-decorator 定义了很多的装饰器,如 @prop,@component,@watch 等。已经相当齐全了,不多介绍了,而且此库已经集成进了 vue-cli 3.0中,通过cli创建的项目也集成demo页面。
wonderful-panda/vue-tsx-supportgithub.com
vue-tsx-support 主要是用于支持再Vue的渲染函数中使用TSX,Vue本生是支持render JSX渲染的,在不涉及自定义Prop、事件时不使用该库也可以。但如果component中有自定义prop,event,TS的类型检查就会报错。大致逻辑是在原有的Vue类上有包装了一层,将属性、事件、作用域插槽以泛型方式传入接口定义,再将接口定义应用到TSX中。
CSS Module
Vue 默认是 scoped 方式引入css ,防止样式污染 ,通过vue模板使用也很方便。实际CSS 选择器使用 scoped 这种方式效率低于 CSS Module,使用TSX渲染时样式也只能通过CSS Module这样方式引用。这里再介绍个库 classNames ,通过这个库可以方便的组合样式名。
创建项目
使用vue-cli 3.0 创建一个项目 , 必选 typescript Babel ,其他根据需要选。创建完成后已经引入了Vue 及 TS 相关包了,也包括上面提到的 vue-property-decorator。包含了一个实例代码,npm install,npm run serve 已经可以跑起来了。
导入和配置
1. 安装 vue-tsx-support 包
npm install vue-tsx-support --save
2. 导入TS声明,有两种方式
编辑tsconfig.js
...
"include": ["node_modules/vue-tsx-support/enable-check.d.ts", "src/**/*.ts","src/**/*.tsx","src/**/*.vue","tests/**/*.ts","tests/**/*.tsx"]
// 注意:将exclude内的 "node_modules" 删掉,不然永远也无法被引用到了...
或者在main.js中 import
import "vue-tsx-support/enable-check";
3. 删除根目录下的 shims-tsx.d.ts ,否则会报重复定义的错误。
4. 根目录新建 vue.config.js
module.exports = {css: {modules: true // 开启CSS module},configureWebpack: {resolve: {extensions: [".js", ".vue", ".json", ".ts", ".tsx"] // 加入ts 和 tsx},},devServer: {port: 8800 // webpack-dev-server port}
};
创建视图组件
来创建个按钮组件:
import { Component, Prop } from "vue-property-decorator";
import * as tsx from "vue-tsx-support";export enum ButtonType {default = "default",primary = "primary"
}export enum ButtonSize {large = "large",small = "small"
}
export interface IButtonProps {type?: ButtonType;size?: ButtonSize;num: number;
}@Component
export default class Button extends tsx.Component<IButtonProps> {@Prop() public type!: ButtonType;@Prop() public size!: ButtonSize;@Prop({ default: 0 }) public num!: number;protected render() {return (<div><p>id:{this.num}</p>{this.type && <p>type:{this.type}</p>}{this.size && <p>size:{this.size}</p>}</div>);}
}
再创建Container 用TSX引用组件Button:
import { Component, Prop } from "vue-property-decorator";
import { Component as tsc } from "vue-tsx-support";
import Button, { ButtonType, ButtonSize } from "./button";interface IContainerProps {name?: string;
}@Component
export default class Container extends tsc<IContainerProps> {@Prop() public name!: string;protected render() {return (<div><p>container Name:{this.name}</p><p>{this.$slots.default}</p><p>button:<Button num={9} type={ButtonType.primary} size={ButtonSize.large} /></p></div>);}
}
此时即使在Container 的 Render 方法同样会对 Props 进行类型检查 ,而VS Code也有智能提示和自动引入,这体验棒极了。
CSS Module 导入样式
注意:使用CSS module 前 需要在vue.config.js 中配置 css.modules = true
注意:如要添加全局样式可在 App.vue 中 @import 方式引用公用样式,这样就不会被CSS Module 加上后缀了。
然后加入TS定义
declare module "*.scss" {const content: any;export default content;
}
可以配合classnames库,更方便的操作CSS类
classnameswww.npmjs.com
示例:
vaynewang/SampleCodegithub.com
class ts 扩展方法_如使用Typescript撸Vue(Vue2 + TS +TSX+CSS module)相关推荐
- class ts 扩展方法_一些让程序保持可扩展的 TypeScript 技巧
我们使用 TypeScript 的理由是,它有助于开发更快更安全的 app. TypeScript 默认会做很多简化,这有助于开发者更容易的上手,但从长远来看,这些简化也会浪费不少的开发时间. 我们收 ...
- class ts 扩展方法_一个class文件到底包含了哪些东西?
通过对一个class文件的分析,基本理解了class文件结构,在这里最后再做一个总结,梳理下class文件内容. 两种结构 class文件内容如果泛化的区分可以分成两种结构: 1.字节数据:通过预先指 ...
- C#.Net工作笔记010---c#中的静态扩展方法_可动态给string等_添加共通方法好用
技术交流QQ群[JAVA,C++,Python,.NET,BigData,AI]:170933152 之前,给list添加排序的扩展方法的时候用过.下面的作用是去掉list中重复的数据. /// &l ...
- vue 初始化方法_前端发展方向指南—Vue源码初始化
Vue 的源码结构比较绕,同时使用了大量的面向对象的高级技巧.重写方法,扩展方法,多态等应用.从 Vue 实例的加载过程就可以看出来,这一节重点看看 Vue 的源码加载流程是什么. 前言 vue已是目 ...
- vue项目引入typescript(vue与ts混用)
说明 为什么要在vue项目中使用ts? 新公司给了一个关于vue项目的需求,又由于ts是JavaScript的超集,强类型数据,组件化友好.故我选择在vue项目中引入ts. 下载typescript和 ...
- class ts 扩展方法_ts各种类型和用法
运行期间做数据类型检查 js ruby python 编译期间类型检查 c c++ java ==冒号后面的都是类型== typescript 是 js 的超集 拥有静态类型 需要编译成 js 运行 ...
- class ts 扩展方法_JUnit 5自定义扩展
前言 在org.junit.jupiter.api.extension包下,JUnit5提供了丰富的扩展接口,通过实现这些接口,我们可以定制自己的扩展并注册到JUnit中来实现功能扩展. Extens ...
- java对象扩展方法_高可扩展的面向对象代码架构是如何设计的
导语 Java后端程序员的日常工作,大多数可能都是写基于数据库CRUD的Dao层.Manager层.Service层.Controller层,需求来了,就对着这几个层一顿怼代码.调试跑通了,就完事了. ...
- class ts 扩展方法_ts类型声明文件的正确使用姿势
ts类型声明文件的正确使用姿势 ts声明文件类型 npm install @types/jquery --save-dev 与npm一同发布 解释: package.json 中有 types 字段, ...
最新文章
- 平台如何限制ip流量_ABTest 平台设计 - 如何进行流量分桶
- A beginner’s guide to Cache synchronization strategies--转载
- Flex与后台交互的4种方法
- Android简易实战教程--第四十七话《使用OKhttp回调方式获取网络信息》
- 双十一来了,揭秘菜鸟物流背后的那些算法黑科技
- 演示IPFS的一个完整的流程以及针对部分概念的详解
- Win32中常用消息
- linux scp命令 不输入远程机器的密码,scp 命令无需输入密码完成 Linux 系统间远程拷贝...
- 亚马逊RDS使用的第三方扩展有漏洞,可导致内部凭据遭泄露
- tomcat构建及session保持
- 安卓html 750px,移动端750px页面适配
- W10虚拟机一开机电脑蓝屏重启
- Kaggle 时间序列教程
- Hexo中yilia主题使用问题总结
- 对话窗口、面板滚动视图、标签切换视图;QDialog、QScroollArea、
- 协同办公“战役”,华为输了吗?
- i人事CTO王景飞:i人事+计算巢,协同赋能HR业务
- 《解忧杂货店》—— 读后总结
- 泪目!雷军突然卸任……
- conda env create -f environment.yml报错ResolvePackageNotFound和Found conflicts的解决方案【已解决】
热门文章
- Python TimedRotatingFileHandler 多进程环境下的问题和解决方法
- twisted Unhandled error in Deferred scrapy
- 'imread' was not declared in this scope
- 青龙羊毛——悦读(搬运)
- windows操作系统的日志类型
- 你需要知道的MySQL开源存储引擎TokuDB
- Linux下的at定时执行任务命令详解
- TripleO (openstack)
- 190空难_印度空难有确诊者罹难,22名现场搜救人员惨中招
- mysql insert 自增_MySQL自增列插入0值的解决方案