ts在vue项目里怎么使用,ts+vue
本文主要介绍用vue访问ts的基本方法，这种方法由来已久。这里我们就简单学习一下ts，在原项目中访问基本的ts语法，也是初步的尝试。我们就简单梳理一下基本的接入配置和已经遇到的问题，供有需要的朋友参考。
一.依赖性二。配置三。修改一.替换。必要文件的js与ts2.vue文件修改IV。填坑下面将以项目搭建的方式完成改文章叙述：
项目的基础设施通过cli搭建，主要是Vue(2 . 5 . 16)Web Pack(3 . 6 . 0)Element-UI(2 . 8 . 2)。整个项目也简单的用了vuex，eslint等等。
目录
项目从基础js改成了ts，因为是第一次尝试。基于最小依赖和最小变化的原则，只引入了一些基本的依赖：
typescript:# 3 . 1 . 6-access ts的基本依赖项，版本需要根据项目ts-loader的相关版本进行修改：# 3 . 5 . 0-相同的基本依赖项TS-lint TS lint-config-standard TS lint-loader-这三个是对原eslint check的替换，没有仔细研究过，引入TS后应该可以处理一些问题。
一、依赖记
webpack.base.config.js修改：
入口文件将原来的.js改为.ts
条目：{
app: [babel-polyfill ，。/src/main.ts]
},
resolve.extensions增加ts：
扩展名：[。tsx ，。ts ，。js ，。vue ，。json]，
rules增加对ts的解析：
{
测试：/\。(tstsx)？$/,
加载程序：“ts-loader”，
排除：/node_modules/，
选项：{
Appendtsxsuffixto: [/\。vue $/]，//TS不知道如何处理的end文件。vue，所以需要这个配置。
happack mode:true//打开多线程加速编译。
}
}
eslint替换为tslint：
{
测试：/\。ts美元/，
加载程序： tslint-loader ，
排除：/node_modules/，
强制：“前”
}
同时，在根目录下的vue-loader.conf.js和tslint.json配置文件中添加配置：
//vue-loader.conf.js
const merge vue=require( web pack-merge )
加载器：mergeVue(utils.cssLoaders({
sourceMap: sourceMapEnabled，
提取：isProduction
}), {
Ts: [ts-loader ， ts lint-loader ]//新
}),
//tslint.json
{
扩展: tslint-config-standard ，
全局:{
要求:对
},
规则:{
“无连续空行”:假
}
}
还有其他一些基本的修改，比如ts会检查不同文件的重名，并给出错误提示。这一点当然可以通过配置来处理，但个人认为这个提示可以保留，只需要修改相应的变量名即可。
添加配置文件tsconfig.json(稍后将解释各个配置字段)
{
编译器选项:{
目标: es5 ，
严格:对，
模块: es2015 ，
moduleResolution“:”节点，
baseUrl“:”,
路径:{
@/*: [src/*]
},
类型:[
节点
],
noImplicitAny: false，
allowSyntheticDefaultImports :true
}
}
src目录下增加 vue.d.ts 文件：
这个文件主要告诉ts。vue会交给vue处理。但是这样会造成一个父子组件引用问题，后面的注释里也有说明。
声明模块“*”。vue {
从“vue”导入Vue
导出默认Vue
}
二、配置记
三、修改记
在这里，我谈谈必要的js结束文件。我主要处理逻辑相关的文件。有些config类型的文件没有修改，仍然保留js结尾，目的是尽量减少改变原则，避免一些棘手的问题。
1.将必要文件的.js替换为.ts
针对vue文件：
您需要将lang=ts 添加到脚本标记中，并使用vue.extend定义组件。vue后缀，但在引入ts后，必须添加。引入构建时的vue后缀脚本lang=ts。
从“vue”导入Vue
从“@/components/table/index.vue”导入表格
导出默认Vue.extend({
data(){
返回{
名称：“”
}
}
})
经过以上三个步骤的基本修改，如果你的项目非常简单，简单到只是一个测试架子，那么你可以愉快地启动NPM，没有太大问题。但是，如果是原项目，当我们去启动的时候，就会出现很多预警问题。当然，如果是基本的ts验证问题，我们可以直接修改文件或者配置。
忽略ts格式检查，我们可以看到在原项目中加入ts语法后(或者没有加入ts语法)，会出现一些其他的问题。可能问题不会影响程序的编译和运行，但是会在编辑器里飘红~下面简单说一下填好的漏洞。
2.vue文件修改
找不到名称“require”。您需要为节点安装类型定义吗？当我们使用require导入一些文件时，可能会出现这个错误提示。这种问题基本上就是需要安装相应的@type依赖。要解决这个问题：
install:NPM I-save-dev @ types/node，在tsconfig.json中添加 types: [node]如果仍然有错误提示，可以添加declare var require: any。
类似的问题还有lodash、qs等的引入。需要安装对应的@type/xx。如果使用Vue-cookies，则需要安装相应的ts版本vue-cookies-ts，并修改相应的方法。有关详细信息，请参见文档vue-cookies-ts。
找不到模块“XXX”或其相关类型声明。Vetur这种错误场景出现在我们根据基本内容进行配置后，通过import导入ts文件时。这个问题其实挺奇怪的。如果你加上。ts后缀，会提示不需要添加。去掉后缀后会报错找不到模块。
解决这个问题的一个方法是查看是否配置了别名。同时，你需要在tsconfig.json中添加 paths: {@/*: [src/*]}之后，如果配置没有生效，基本方法2就可以解决了。第二种方法是把项目放在第一位，也就是直接用vscode打开一个项目，而不是打开某个文件夹有很多项目的情况。这个问题应该是vetur插件造成的。当然，第三种方法是添加单独的vetur配置。这个没有研究过，有时间的朋友可以考虑一下。
类型 XXX 上不存在属性 $ http 通常，vue开发我们的网络请求时，使用axios封装统一的方法，在main.ts中引入绑定：
从“@/utils/httpRequest”导入httpRequest
vue . prototype . $ http=http request
//方法的使用
这个。$http()
当使用这个(Vue)时，会有一个错误信息。原因是我们上面配置了vue.d.ts，所有文件都在。vue被当作vue，而Vue没有$http方法。最简单的方法是直接去any，(此为any)。$http，但是成型项目改动太多。可以采用以下方法(也涉及$store的使用):
在src下创建一个新的vue-shim.d.ts，添加下面配置：
从“vuex”导入{ Store }；
声明模块“vue/types/vue”{
界面Vue {
$stroe :存储，
$http :任何
}
}
类型“Vue”上不存在属性“resetFields”
如果使用与元素表单相关的方法，它可能会涉及诸如表单清空和重置之类的方法调用。通常，你可以给表单一个ref，通过这个调用它。$refs[xxx]。resetFields()。但是加入ts后会提示错误。同样的道理，这里这个是指向vue的，没有相关的方法。
解决方法使用类型断言，将ref断言成element相关内容：
从“element-ui”导入{ Form as EleForm }
//在方法内部
const ref=this。$refs[searchForm]作为EleForm
ref.resetFields()
还有一种情况，就是在父组件与子组件之间，父组件内部使用子组件的方法也是用ref调用的，也会出现上面的错误提示。一开始考虑这个问题是用类似的断言来断言ref作为子组件，但是方法不行，通过网上搜索也没有找到合适的方法。大多数方法都被直接断言为any，即(this。$ refs [XXX] as any)。clearlist()。有了这个断言，问题就可以解决了，但我希望找到更合适的方法。
关于vue访问ts的基本方法，这篇文章就到这里了。关于vue访问ts的更多信息，请搜索我们之前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。