学习typescript(二)
学习typescript(二)
ts 与 js 交互
ts 调用 js
module使用
分为两种情况:
ts调用自己写的jsts调用别人写的js也就通过npm安装的
第一种情况处理如下:
tsconfig.json的compilerOptions中加入"allowJs": true选项- 在任何一个
ts文件中加入declare function require(path: string): any;, 使用require语法,例如:const test = require('./test2') - 另一个使用方法,直接使用
ts的导入语法:import test = require('./test2)
第二种情况处理如下:
跟第一种方法类似进行处理。
global
node 中有一个全局变量 global 和 module.exports 怎样使用呢?
解决方案:
在 ts 加入如下:
declare var module: any;
declare var global: any;
就可以正常使用
js 调用 ts
js 不能直接 ts,而 ts 能直接调用 js,js 能调用 ts 的编绎成果.
这其中关键是 js 与 ts 的模块系统编绎结果之间的问题。
// ts 语法
export const test1 = (x) => x + 1
// exports.test1 = (x) => x + 1 cmd
export default const test2 = (x) => x + 1
// export default const test2 => x => x + 1 es6 语法
// 注意: es6语法 import 是的 node 环境中无法使用的
export {
foo as foo1,
foo1 as foo2
}
// 上面等于 js 语法
// exports.foo1 = foo
// exports.foo2 = foo1
// 对 export 赋值
const f1 = () => console.log(1)
const f2 = () => console.log(1)
const f3 = () => console.log(1)
export = {
f1,
f2,
f3
}
// 不过上面这种语法别的 `ts文件导入时需使用`
import ts = require('bluebird')
// es6
//exports = {
// f1,
// f2,
// f3
// }
import daf from 'bluebird' // 这种语法只适合有 default 导出的方法
总结
ts 的语法是使用 import from,这个语法有独特的行为, 表现在会针对 default 进行处理。
- 如果被导入的文件没有使用
default,那只能使用import * as from语法 - 如果被导入的文件使用了
default,import xxx from语法就是把默认导出对象赋值给xxx ts语法基本上跟es6的一致。- default 也能正常使用,但是与编绎结果与正常的
js交互会有问题,因此不能使用default。
所以, ts 模块系统使用原则:
- 永远只在
ts内部使用export default - 在
ts调用js时使用import * as XXX或者使用构析语法import {xxx} from '.xxx' ts调用js时, 如果想使用js提示的话使用import语法- 如果不想使用提示,使用
require语法。
js 使用原则:
- 导出模块只这样使用
module.exports

浙公网安备 33010602011771号