前端开发

typescript如何引入js

2019-04-28  本文已影响1人  小程序前端超市

刚开始使用vue typescript技术栈,不是很熟悉,以至在引入三方库js文件时报错,其主要原因是因为typescript有类型检测,而普通的js文件没有,这里我们就需要处理下。

一、多安装个@types/--版的文件

示例:

$ npm install --save jquery
$ npm install --save-dev @types/jquery

二、通过typings(弃用)

npm install -g typings 
typings search jquery
npm install jquery
typings install jquery

ts 中引入:

import $ form 'jquery'

三、 自己加个ts的声明文件

如果是自己写的js,如utils.js,这里就需要再加个utils.d.ts文件,内容如下:

declare var utils: any;
  1. 在index.html入口文件中引入
<script src="assets/utils.js"></script>
  1. 在ts文件中引入(///三斜杠开头)

三斜线指令是包含单个XML标签的单行注释。 注释的内容会做为编译器指令使用。https://www.tslang.cn/docs/handbook/triple-slash-directives.html

///<refrence path="assets/utils.d.ts" />;

四、在shims-vue.d.ts中添加声明

在项目目录下安装:

$ npm install vue-awesome-swiper --save

然后在shims-vue.d.ts中添加声明

declare module 'vue-awesome-swiper' {
  export const Swiper: any
  export const SwiperSlide: any
}

参考连接:

上一篇下一篇

猜你喜欢

热点阅读