Vue对TS的支持一致不太好,连Vue作者尤大也自嘲真香压错了宝。期待Vue3.0会用TS重构且会有较大改进。不过目前有一些第三方的库可以曲线优化对TS的支持。主要就介绍下过下面两个库来写Vue。

总体体验尚可,类型检查,智能提示该有的都有,顺滑中带着一丝蹩脚。
如果要支持组件Props的类型检查及智能提示,则必须放弃template通过render写TSX, 总有种写React的感觉。

介绍

kaorun343/vue-property-decorator​

vue-property-decorator 定义了很多的装饰器,如 @prop,@component,@watch 等。已经相当齐全了,不多介绍了,而且此库已经集成进了 vue-cli 3.0中,通过cli创建的项目也集成demo页面。

wonderful-panda/vue-tsx-support​

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类

classnames​www.npmjs.com

示例:

vaynewang/SampleCode/vue-tsx-sample/​

如使用Typescript撸Vue(Vue2 + TS +TSX+CSS module)的更多相关文章

  1. 基于typescript编写vue的ts文件语法模板

    1 <template> 2 <div> 3 <input v-model="msg"> 4 <p>prop: {{ propMes ...

  2. 使用 typescript 开发 Vue

    基础配置: 1. 准备一个使用 vue-cli 生成的项目 2. 使用 npm 一建安装基础配置 npm i -S @types/node typescript vue-class-component ...

  3. 教你搭建基于typescript的vue项目

    自尤大去年9月推出vue对typescript的支持后,一直想开箱尝试,对于前端sr来说,vue的顺滑加上ts的面向对象,想着就非常美好~ 终于在两个月前,找到了个机会尝试了一把vue+ts的组合. ...

  4. vue cli4构建基于typescript的vue组件并发布到npm

    基于vue cli创建一个vue项目 首先安装最新的vue cli脚手架, npm install --global @vue/cli npm WARN optional SKIPPING OPTIO ...

  5. 用TypeScript开发Vue——如何通过vue实例化对象访问实际ViewModel对象

    用TypeScript开发Vue--如何通过vue实例化对象访问实际ViewModel对象 背景 我个人很喜欢TypeScript也很喜欢Vue,但在两者共同使用的时候遇到一个问题. Vue的实例化对 ...

  6. TypeScript开发Vue

    用TypeScript开发Vue——如何通过vue实例化对象访问实际ViewModel对象 目录 背景 解决方案 关于Vue中的计算属性类型 TypeScript的强制类型声明语法 强制类型声明的局限 ...

  7. TypeScript编写Vue项目结构解析

    使用TypeScript编写Vue项目也已经有了一段时间,笔者在刚刚使用TypeScript时候也是很茫然,不知道从何下手,感觉使用TypeScript写项目感觉很累赘并不像JavaScript那么灵 ...

  8. Typescript & React & Vue

    Typescript & React & Vue Typescript & React https://facebook.github.io/create-react-app/ ...

  9. 基于Typescript的Vue项目配置国际化

    基于Typescript的Vue项目配置国际化 简介 使用vue-i18n插件对基于Typescript的vue项目配置国际化,切换多种语言, 配合element-ui或者其他UI库 本文以配置中英文 ...

随机推荐

  1. linux系统命令笔记

    一.linux系统目录 /bin 系统命令目录 /dev 设备目录 /home 每个系统用户在home下都有一个目录, 每个用户登录到系统后会自动登录到这个目录下, root用户会在/root文件夹下 ...

  2. LR参数化类型为file显示大于100数据方法

    在做测试的时候,某些数据需要大量参数化,可以用连接数据库方式,也可以使用file类型进行参数化,而loadrunner中file类型的参数化数据只显示100条,可以调整如下配置文件进行显示数据的修改: ...

  3. geoserver 开发2

    先上源码下载 上一章我们介绍了GeoServer源码分析的必要性(这个就见仁见智了)以及诸项准备工作,并且在最后还给出了OWS请求处理流程的伪代码. 这一章我们来看看要注册自己的服务需要做哪些工作.假 ...

  4. 利用HBuilder打包前端开发webapp为apk

    转载 标签: apk / 打包 / vue 现在的前端开发可谓是,百花齐放啦,什么都可以做,只有想不到没有做不到的,今天就简单的介绍用vue,ng或者是react开发的单页应用如何打包为apk,在移动 ...

  5. 5条面经,助你成功拿到UX设计师Offer

    为什么成为 UX设计师?   如果你经常逛推酷, 知乎, 设计达人或者一些专业的设计师论坛,博客,你会发现,第一批成为UX设计师的人,其实是误打误撞地落入这个行业的.那时候人们并不清楚UX设计师是什么 ...

  6. msys2 显示git branch

    在.bashrc或.bash_profile中添加以下内容 function parse_git_branch () { git branch 2> /dev/null | sed -e '/^ ...

  7. springmvc 返回汉字乱码

    1.删除配置文件中的<mvc:annotation-driven  /> 2.添加如下配置 <bean class="org.springframework.web.ser ...

  8. JavaScript修改注册表

    JavaScript修改注册表 2009-04-14 11:22:13|  分类: JS相关 |  标签: |字号大中小 订阅     注册表有关安全设置项的说明: 注册表路径: HKEY_CURRE ...

  9. Quartz教程三:Job与JobDetail介绍

    Quartz教程三:Job与JobDetail介绍 原文链接 | 译文链接 | 翻译:nkcoder | 校对: 本系列教程由quartz-2.2.x官方文档翻译.整理而来,希望给同样对quartz感 ...

  10. c++中类的静态成员对象

    在c++中,可以声明一个静态的成员对象,但是此时仅仅声明,没有定义,也不会创建这个内部的静态成员对象.只有在类体外部定以后才能创建这个对象. #include<iostream> usin ...