ts有什么用？
类型检查、直接编译到原生js、引入新的语法糖
为什么用ts？
Ty PE Script的设计目的 应该 是解决JavaScript的[痛点]：弱类型和没有命名空间，导致很难模块化，不适合开发大型程序。另外它还提供了一些语法糖来帮助大家更方便地实践面向对象的编程。
typescript不仅可以约束我们的编码习惯，还能起到注释的作用，当我们看到一函数后我们立马就能 知道 这个函数的用法，需要传什么值，返回值 是什么 类型一目了然，对大型项目的维护性有很大的 提升 。也不至于使 开发者 搬起石头砸自己的脚。
1、引入Typescript包
npm install vue-class- component vue- PR operty-decorator - -s ave npm install ts-loader typescript tslint tslint-loader tslint- config -standard --save-devvue-class-component ：扩展vue支持typescript，将原有的vue语法通过声明的方式来支持ts vue-property-decorator ：基于vue-class-component扩展更多装饰器 ts-loader ：让webpack能够识别ts文件 tslint-loader ：tslint用来约束 文件编码 tslint-config-standard ： tslint 配置 standard风格的约束
2、配置
webpack配置
根据项目的不同配置的地方不同，如果是 vue cli 3.0 创建的项目需要在vue.config.js中配置，如果是3.0以下版本的话，需要webpack.base.conf中配置。(以下说明是在webpack.base.conf文件中更改)
2.1 在webpack.base.conf文件中更改
2.1.1. 在resolve. extensions 中增加.ts，目的是在代码中引入ts文件 不用 写.ts后缀
resolve: {
extensions: ['.js', '.vue', '.json', '.ts'],
alias: {}
}
2.2.2. 在module.rules中增加ts的rules
module: {
rules: [
{
test : /\.ts$/,
exclude: / node_modules /,
enforce: 'pre',
loader: 'tslint-loader'
},
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/]
}
}
]
}
2.2.3. tsconfig.json配置
ts-loader会检索文件中的tsconfig.json.以其中的规则来解析ts文件，详细的配置可以参考https://HdhCmsTesttslang.cn/docs/hand Book /tsconfig-json.ht ML
我项目的tsconfig. json文件
{
// 编译选项
"compilerOptions": {
// 输出目录
"outDir": "./output",
// 是否 包含可以用于 debug 的 sourceMap
"sourceMap": true,
// 以 严格模式 解析
"strict": false,
// 采用的 模块系统
"module": "esnext",
// 如何处理模块
"moduleResolution": "node",
// 编译输出目标 ES 版本
"t arg et": " ES5 ",
// 允许从没有设置默认导出的模块中默认导入
"allowSyntheticDefaultImports": true,
// 将每个文件作为单独的模块
"isolatedModules": false,
// 启用装饰器
"e xp erimentalDecorators": true,
// 启用设计类型元数据（用于反射）
"em IT DecoratorMetadata": true,
// 在表达式和声明上有隐含的any类型时报错
"noImplicitAny": false,
// 不是函数的所有返回路径都有返回值时报错。
"noImplicitReturns": true,
// 从 tslib 导入外部帮助库: 比如__extends，__rest等
"importHelpers": true,
// 编译 过程中 打印文件名
"listFiles": true,
// 移除注释
"removeComments": true,
"sup Press ImplicitAnyIndexErrors": true,
// 允许编译javascript文件
"allowJs": true,
// 解析非相对模块名的基准目录
"baseUrl": "./",
// 指定特殊模块的路径
"paths": {
" jq uery": [
"node_modules/jquery/dist/jquery"
]
},
// 编译过程中需要引入的库文件的列表
"lib": [
"dom",
"es2015",
"es2015.p rom ise"
]
}
}
2.2.4. tslint.json配置
在目录中新增tslint.json文件，由于我们前面安装了tslint-config-standard，所以可以直接用tslint-config-standard中规则，文件如下:
{
"extends": "tslint-config-standard",
"globals": {
"require": true
}
}
2.2 在vue.config.js文件中更改以下代码即可
configureWebpack: {
resolve: {
extensions: [".ts", ".tsx", ".js", ".json"],
alias: {}
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/],
}
}
]
}
},
3、让项目识别.ts
由于 TypeScript 默认并不支持 *.vue 后缀的文件，所以在 vue 项目中引入的时候需要创建一个 vue-shim.d.ts 文件，放在根目录下
declare module '*.vue' {
import Vue From 'vue';
export default Vue;
}
4、vue组件的编写
vue组件里大多数的方法改成通过@xxx（装饰器）来 表明 当前定义的为什么数据。业务逻辑js的部分就可以直接采用ts的写法了。
基本写法
模板 template 和样式 style 的写法不变， script 的模块进行了 改变 ，写法如下：
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component
export default class Test extends Vue {
};
</script>
lang="ts" ： script 声明当前语言是 ts @Component ：注明此类为一个vue组件 export default class Test extends Vue ： export当前组件类是继承vue的
data()中定义数据
data中的数据由 原来 的 data() 方法改成直接在对象中定义
export default class Test extends Vue {
p ub lic message1: string = "h ei mayu";
public message2: string = "真好看";
}
生命周期
// 生命周期
private created(){
this.init();
}
方法
private init(){
console. LOG ('halo');
}
props传值
props的话就没有data那么舒服了，因为他需要使用装饰器了，写法如下
@Prop() propA:string @Prop() propB:number
$emit传值
不带参数
// 原来写法：this.$emit('bindSend')
// 现在直接写 this.bindSend()
// 多个定义
@Emit()
bindSend():string{
return this.message
}
方法带参数
// 原来写法：this.$emit('bindSend', msg)
// 现在直接写： this.bindSend(msg)
// 多个下面的定义
@Emit()
bindSend(msg:string){
// to do something
}
emit带参数
// 这里的test是改变组件引用的@事件名称这时候要写@test 而不是@bindSend2
@Emit('test')
private bindSend2(){
return '这个可以用test接受';
}
watch观察数据
// 原来的写法 watch:{}
@Watch('propA',{
deep:true
})
test(newValue:string,oldValue:string){
console.log('propA值改变了' + newValue);
}
computed计算属性
public get computedMsg(){
return '这里是计算属性' + this.message;
}
public set computedMsg(message:string){
}
完整代码案例
<template>
<div class="test-cont ai ner">
{{message}}
<input type="button" value="点击触发父级方法" @click="bindSend"/>
<input type="button" value="点击触发父级方法" @click="handleSend"/>
<input type="button" value="点击触发父级方法" @click="bindSend2"/>
<!-- <Hello></Hello> -->
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";
import Hello from "./HelloWorld.vue";
// 注明此类为一个vue组件
@Component({
components: {
Hello
}
})
export default class Test extends Vue {
// 原有data中的数据在这里展开编写
public message: string = "asd";
//原有props中的数据展开编写
@Prop({
type: Number,
default: 1,
requi red : false
})
propA?: number
@Prop()
propB:string
//原有computed
public get computedMsg(){
return '这里是计算属性' + this.message;
}
public set computedMsg(message:string){
}
//原有的watch属性
@Watch('propA',{
deep:true
})
public test(newValue:string,oldValue:string){
console.log('propA值改变了' + newValue);
}
// 以前需要给父级传值的时候直接方法中使用emit就行了，当前需要通过emit来处理
@Emit()
private bindSend():string{
return this.message
}
@Emit()
private bindSend1(msg:string,love:string){
// 如果不处理可以不写下面的，会自动将参数回传
// msg += 'love';
// return msg;
}
//原有放在methods中的方法平铺出来
public handleSend():void {
this.bindSend1(this.message,'love');
}
// 这里的emit中的参数是表明父级通过什么接受，类似以前的$emit('父级定义的方法')
@Emit('test')
private bindSend2(){
return '这个可以用test接受';
}
}
</script>
到此这篇关于Vue-cli3中使用TS语法示例代码的 文章 就介绍到这了,更多相关Vue-cli3使用TS语法内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！
您可能感兴趣的文章: Vue-cli3中如何引入ECharts并实现自适应 vue-cli3+echarts实现渐变色仪表盘组件封装 基于vue-cli3+typescript的tsx开发模板搭建过程分享 如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法 vue-cli3+ts+webpack实现多入口多出口功能
总结
以上是 为你收集整理的 Vue-cli3中使用TS语法示例代码 全部内容，希望文章能够帮你解决 Vue-cli3中使用TS语法示例代码 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于Vue-cli3中使用TS语法示例代码的详细内容...