一个html中同时引入js和ts,《使用require在ts里引入js》

在Money.vue组件里，我们使用localStorage，在用户输入完一系列选择以后，如选择了什么标签，写了什么备注，支出还是收入，以及记账金额，点击ok按钮的时候，把这些数据收集到record对象里，然后把这个record push进recordList数组里，把这个数组存到localStorage里。在初始化这个数组时，就是从localStorage里读出来的。

更好的做法是，我们把数据存储和读取封装成一个文件。model.js

因为我们在使用localStorage时，需要JSON.stringify,JSON.parse。看起来太啰嗦了，并不需要让别人看到JSON，只需要让他们知道这是在存数据，读数据就可以了。至于用什么方法，不需要暴露出来。

const localStorageKey="recordList"

const model={

fetch(){

return JSON.parse(localStorage.getItem(localStorageKey) || '[]')

},

save(data){

localStorage.setItem(localStorageKey,JSON.stringify(data))

}

}

export default model

复制代码

然后在Money.vue里引入这个js，使用两个方法。然而组件使用的是ts

如何在ts里引入js文件

如果按照平常那样写：import model from "@/model.js";会报错：找不到这个文件

TS7016: Could not find a declaration file for module '@/model.js'. 'D:/jirengu/accounting/src/model.js' implicitly has an 'any' type.

复制代码

使用require

分为两种情况：

如果在模块里是导出默认 export default model,那么在ts里引入时，要在require后加一个.defaultconst model=require("@/model.js").default

复制代码

也可以具名导出 export {model}，引入时要加一个.modelconst model=require("@/model.js").model

复制代码

custom.d.ts定义全局类型

与其在ts里引入js,不如直接把js改写成ts。

首先改文件后缀，看哪里报错，主要是要添加一些类型

那么如果发现这个类型是在其他文件里自定义的一个类型，该怎么引入呢？

直接在根目录src下边创建一个custom.d.ts文件，把自定义的类型放在这个文件里。使用的时候不需要引入什么文件，直接使用这个类型就可以。

这个custom.d.ts文件名可以随意，xxx.d.ts，只要是.d.ts结尾就可以。不过一般使用custom。webpack看到这个名字就知道这个自定义的类型。

全局类型，只要是src目录里边的文件，想使用这个类型就可以直接用。

//custom.d.ts

type RecordItem={

tags: string[];

notes: string;

type: string;

amount: number;

date?: Date;

}

复制代码