相关文章推荐
年轻有为的烤地瓜  ·  如何在mysql ...·  7 月前    · 
在JS的项目中,随着工程的不断增大,为了便于管理和模块复用,产生了很多模块化解决方案
如CommonJS,AMD,CMD及ES模块,目前最常用的是ES6的模块,CommonJS模块
TS对这两种模块系统都有比较好的支持

二,ES6模块导出

src下新建es6文件夹,并创建a.ts, b.ts, c.ts文件

三者关系为:c依赖a, a依赖b(使用a.ts演示导出,c.ts演示导出)

在index.ts中引入c.ts

import './es6/c'
1,单独导出:
// 单独导出
export let a = 1
2,将多个变量放到一个对象中批量导出
// 批量导出
let b = 2
let c = 3
export {b, c}
3,在TS中,ES6可以单独导出一个接口,也可以直接导出一个函数
// 导出接口
export interface P {
    x: number
    y: number
4,在TS中,也可以直接导出一个函数
// 导出函数
export function f() {}
5,导出时,未变量起别名:
// 导出时起别名
function g() {}
export {g as G}
6,导出时,未变量起别名:
// 导出时起别名
function g() {}
export {g as G}
7,ES6中的默认导出
使用export default默认导出时,不需要为函数命名(此时如果命名,导入时无效)
// 默认导出,无需函数名
export default function () {}
8, 引入外部模块,重新导出
a.ts中引入b.ts中导出的常量,并重命名为hello后导出
// 引入外部模块,重新导出
export { str as hello } from './b'
// 导出常量
export const str = 'Hello'

三,ES6模块导入

在c.ts中导如:

1,批量导入

// 批量导入
import { a, b, c } from './a'	// 1 2 3

2,导入接口

// 导入接口
import { P } from './a'  
let p: P = {
    x: 1,
    y: 2

3,导入时起别名

// 导入时起别名
import { f as F } from './a'

4,使用* as + 变量名,导出所有成员并绑定到该变量

import * as All from './a'
console.log(All)
打印的all对象中,被添加了一个default属性,这是兼容性导致

5,默认导入(不加括号)

// 默认导入-不加括号
import myFunc from './a'
myFunc()
只介绍了ES6模块化,CommonJS和模块化兼容后续添加
                    一,前言在JS的项目中,随着工程的不断增大,为了便于管理和模块复用,产生了很多模块化解决方案如CommonJS,AMD,CMD及ES模块,目前最常用的是ES6的模块,CommonJS模块TS对这两种模块系统都有比较好的支持二,ES6模块导出src下新建es6文件夹,并创建a.ts, b.ts, c.ts文件三者关系为:c依赖a, a依赖b(使用a.ts演示导出,c.ts演示导出)...
				
TypeScript 是 JavaScript 的超集,相比 JavaScript,其最关键的功能是静态类型检查 (Type Guard)。然而 JavaScript 本身是没有静态类型检查功能的,TypeScript 编译器也仅提供了 ECMAScript 标准里的标准库类型声明,只能识别 TypeScript 代码里的类型。 那么 TypeScript 中如何引用一个 JavaScript 文...
支持js的所有导出方式 export:导出声明或表达式(export {a,b,c}会被认为是声明列表而非对象),不能导出单独变量(如:export a) export default:能导出单独变量 (1)导出接口 任何声明(比如变量,函数,类,类型别名或接口)都能够通过添加export关键字来导出。 export interface {...}; export type a=c; 引入时和导出普通类型相同:import {x} from 'x.ts' (2)导出重命名 * @param copy 深拷贝 * @param _object 如果不传返回为空对象 必须是js的{}对象 * @param _obj 可选 返回传入的@param _object 必须是js的{}对象, export const copy = (_object: _typeObj, _obj: _typeObj = {}): _typeObj => { if (!(Object.
ts里使用 宏常量可以直接使用 const 定义在类外, 但此时在其他脚本中无法引用, 所以可以用 export 修饰一下, 此时它作为全局宏。有时候我们在做类的划分时, 并不希望将一个宏划分出去,此时我们希望将一个宏定义在类内,但属性定义并不允许 const 修饰,此时我们可以用2.0的 readonly 特性,结合 static 使用,这样我们就可以得到一个有 常量 特性的属性了。 /** 类外定义并导出,使其他页面类可以引用 */ export const MAIN_MAP_LOOP_
一个函数有输入和输出,要在 TypeScript 中对其进行约束,需要把输入和输出都考虑到,其中函数声明的类型定义较简单 function sum(x: number, y: number): number { return x + y; 在调用时,输入多余的(或者少于要求的)参数,是不被允许的 function sum(x: number, y:...
ts-loader 和 awesome-typescript-loader 都是 TypeScript 的 Webpack 加载器,它们的主要区别在于编译 TypeScript 代码的方式和速度上。 ts-loader 是官方提供的加载器,它使用了 TypeScript 的官方 API 进行编译。它的编译速度较慢,但它可以处理 TypeScript 的源映射和类型检查等功能。 awesome-typescript-loader 则使用了 faster 而且更直接的 TypeScript 编译器 API 进行编译,因此它的速度通常比 ts-loader 更快。但是,它不支持 TypeScript 的源映射和类型检查,因此在使用过程中需要注意这些问题。 总的来说,如果你需要更好的性能,可以选择 awesome-typescript-loader,但如果你更注重 TypeScript 的完整功能和可靠性,ts-loader 是比较好的选择。