命名空间

Posted 2020-12-11 studyweb

param.ts文件内

 1 namespace Param{
 2     //导出接口
 3   export interface User{
 4       name:string
 5   }
 6   //导出类
 7   export  class Header{
 8         constructor(){
 9             const ele=document.createElement(‘div‘)
10             const body=document.body
11             ele.innerhtml=‘header‘
12             body.appendChild(ele)
13         }
14     }
15  export  class Body{
16         constructor(){
17             const ele=document.createElement(‘div‘)
18             const body=document.body
19             ele.innerHTML=‘Body‘
20             body.appendChild(ele)
21         }
22     }
23 export  class Footer{
24         constructor(){
25             const ele=document.createElement(‘div‘)
26             const body=document.body
27             ele.innerHTML=‘Footer‘
28             body.appendChild(ele)
29         }
30     }
31 }

index.ts

 1 ///<reference path=‘./param.ts‘>
 2 namespace Home{
 3  export class Page{
 4        //使用Param接口
 5         user:Param.User={
 6             name:‘小白‘
 7         }
 8         constructor(){
 9             //导入Param空间类
10             new Param.Header()
11             new Param.Body()
12             new Param.Footer()
13             console.log(this.user)
14         }
15     }
16 }

基本配置

 1 // tsconfig.base.json
 2 
 3 {
 4   "files": [ // 数组，表示编译器需要编译的单个文件的列表
 5     "src/a.ts"  // 运行 tsc 命令时，只有 a.ts 被编译了
 6   ],
 7   "include": [ // 数组，表示编译器需要编译的文件或目录
 8     "src", // 会编译 src 目录下所有的 ts 文件
 9     "src/*", // 只会编译 src 一级目录下的 ts 文件
10     "src/*/*", // 只会编译 src 二级目录下的 ts 文件
11   ],
12   "exclude": [ // 数组，表示编译器需要排除的文件或目录，默认会排除 node_modules 下的所有文件和所有的声明文件
13     "src/lib", // 表示不会编译src下的lib目录
14   ]
15 }
16 // tsconfig.json
17 
18 {
19   "compilerOptions": {
20     "incremental": true, // 增量编译，ts 编译器可以在第一次编译后生成一个可以存储编译信息的文件，
21     // 在二次编译时会根据这个文件做增量编译，这样就可以提高编译的速度
22     "tsBuildInfoFile": "./buildFile", // 增量编译文件的存储位置
23     "diagnostics": false, // 打印诊断信息
24 
25     "target": "es5", // 目标语言的版本
26     "module": "commonjs", // 生成代码的模块标准
27     "outFile": "./app.js", // 将多个相互依赖的文件生成一个文件，可以用在 AMD 模块中
28     // 指定 moudle 为 amd ，编译时会将多个 ts 文件合并打包成一个 js 文件
29 
30     "lib": [], // ts 需要引用的库，即声明文件。就算没有引用任何类库，当目标语言的版本是 es5 时
31     // 也会默认引用 "dom", "es5", "scripthost"
32     
33     "allowJs": true, // 允许编译 JS 文件（js、jsx）
34     "checkJs": true, // 允许指出在 JS 文件中的报错信息，通常与 allowJs 一起使用
35     "outDir": "./out", // 指定输出目录（所有编译后的文件会存放于此目录中）
36     "rootDir": "./", // 用来控制输出的目录结构（指定输入文件目录）
37 
38     "declaration": true, // 用于生成声明文件，如 index.ts -> index.d.ts
39     "declarationDir": "./d", // 声明文件的路径
40     "emitDeclarationOnly": true, // 只生成声明文件（不会生成 js 文件）
41     "sourceMap": true, // 生成目标文件的 sourceMap，如 index.ts -> index.js.map
42     "inlineSourceMap": true, // 生成目标文件的 inline sourceMap（包含在生成的 js 文件之中）
43     "declarationMap": true, // 生成声明文件的 sourceMap，如 index.ts -> index.d.ts 和 index.d.ts.map
44     "typeRoots": [], // 声明文件目录，默认 node_modules/@types
45     "types": [], // 指定需要加载的声明文件的包，如果指定了某一个包，就会只加载这个包的声明文件
46 
47     "removeComments": true, // 删除注释
48 
49     "noEmit": true, // 不输出任何文件
50     "noEmitOnError": true, // 发生错误时，不输出文件
51 
52     "noEmitHelpers": true, // 不生成 helper 函数，需额外安装 ts-helpers
53     "importHelpers": true, // 通过 tslib 引入 helper 函数，文件必须是模块
54 
55     "downlevelIteration": true, // 降级遍历器的实现（es3/es5）
56 
57     "strict": true, // 开启所有严格的类型检查，为 true 时，下面类型检查相关的取值也都为 true
58     "alwaysStrict": true, // 在代码中注入 "use strict"
59     "noImplicitAny": true, // 不允许隐式的 any 类型
60     "strictNullChecks": true, // 不允许把 null、undefined 赋值给其它类型变量
61     "strictFunctionTypes": true, // 不允许函数参数双向协变
62     "strictPropertyInitialization": true, // 类的实例属性必须初始化
63     "strictBindCallApply": true, // 严格的 bind、call、apply 检查
64     "noImplicitThis": true, // 不允许 this 有隐式的 any 类型
65 
66     "noUnusedLocals": true, // 检查只声明，未使用的局部变量
67     "noUnusedParameters": true, // 检查未使用的函数参数
68     "noFallthroughCasesInSwitch": true, // 防止 switch 语句贯穿（如果某一个分支没有 break，下面的分支将会依次执行）
69     "noImplicitReturns": true, // 每个分支都要有返回值，如 if else 中都要有返回值
70 
71     "esModuleInterop": true, // 如果一个模块用 export = 导出， 既可以用 import from 导入，也可以用 import = 导入
72     "allowUmdGlobalAccess": true, // 允许在模块中以全局变量的方式访问 UMD模块 
73     "moduleResolution": "node", // 模块解析策略，默认 node，还可以用 classic
74     "baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录
75     "paths": { // 路径映射，相对于 baseUrl
76       "jquery": ["node_modules/jquery/dist/jquery.slim.min.js"]
77     },
78     "rootDirs": ["src", "out"], // 将多个目录放在一个虚拟目录下，用于运行时
79 
80     "listEmittedFiles": true, // 打印输出的文件
81     "listFiles": true, // 打印编译的文件（包括引用的声明文件）
82   }
83 }