js require和import区别与应用

最近遇到一个有意思的问题，是ts文件引入js文件的报错问题

在room文件下我写了index.tsx和test.js两个文件，这里test.js中只写了一个测试用的对象（test.js文件中只有一个对象Bear，相当于一个保存对象的文件），之后我在index.tsx中进行import引用,就会报错

无法找到模块“./test.js”的声明文件。“c:/code/Dazeka-front/src/pages/room/test.js”隐式拥有 "any" 类型。

上网查了一下，说是要改成require

就不报错了，问题是解决了，但是为什么呢？

我们首先需要区分一下import和require的区别，总结一下就是

import：编译时就加载

require: 运行时再加载

所以，我们刚刚用

import { Bear } from './test.js'

用import的话，编译器马上就会去找这个test文件中的"Bear"这个变量（无论这个是个普通的变量还是一个函数名），但是因为我们的test是js文件，就算是正常export了，ts也不能识别，就报错了

需要注意的是，import是查找的对应的单个方法或者属性，所以才会在“{}”中定义要导出的变量名

我们之后用

const { Bear } = require('./test')

其实是用的一个取巧的方法，因为require首先编译时是不会报错的，所以就算把文件名输错也没关系，而且，require是直接将test的整个对象给引用了，那么这个对象无论是js写的还是ts写的，因为是引用的对象，所以不会报错

但是，我们在实际开发中尽量还是用import，最主要的一个原因是import会实时报错，现在主流编译器也会有import的插件，在我们更改了一些被引用文件的名称或者路径后，编译器可以自动帮我们更改import；还有一点就是import更符合我们的开发规范，因为import的变量是无法重新赋值的，这也会防止我们对外部方法或者常量进行一些非法赋值

最后import比较好用的一点就是export中的数据变化后，在其他地方import读取，会读取到更改后的信息，这广泛地用到了前端的state和props传值中