Typescript 的语法进阶基础之的命名空间、模块化和类型描述文件

深碍√TFBOYSˉ_ 2023-02-17 03:39 49阅读 0赞

####  ####

#### 一、Typescript 的命名空间和模块化 ####

1.  “内部模块”现在称做“命名空间”。 “外部模块”现在则简称为“模块”。“内部模块”现在叫做“命名空间”，任何使用 `module` 关键字来声明一个内部模块的地方都应该使用 `namespace` 关键字来替换。随着更多验证器的加入，我们需要一种手段来组织代码，以便于在记录它们类型的同时还不用担心与其它对象产生命名冲突。 因此，我们把验证器包裹到一个命名空间内，而不是把它们放在全局命名空间下。如果想让这些接口和类在命名空间之外也是可访问的，所以需要使用 `export`。反之，没有使用 `export` 在命名空间外是不能访问的。
2.  命名空间 `Home`, 将四个变量放到一个命名空间中。命名空间生成的，也可以理解为 命名变量。命名空间的好处，类似模块化开发的好处，能尽量少的声明全局变量，把一组相关的内容封装到一起去，对外提供统一的暴露接口。在下面中，`Page` 是直接暴露，其余三个是间接是间接暴露，`index.html`是页面，`page.ts` 是 `ts` 文件，`page.js` 是编译 `ts` 文件后生成的 `js` 文件，代码如下所示：

1.  分离到多文件，当应用变得越来越大时，我们需要将代码分离到不同的文件中以便于维护。尽管是不同的文件，它们仍是同一个命名空间，并且在使用的时候就如同它们在一个文件中定义的一样。 因为不同文件之间存在依赖关系，所以我们加入了引用标签来告诉编译器文件之间的关联。多文件确保所有编译后的代码都被加载，有两种方式。第一种方式，把所有的输入文件编译为一个输出文件，需要使用`--outFile` 标记，编译器会根据源码里的引用标签自动地对输出进行排序，也可以单独地指定每个文件。第二种方式，我们可以编译每一个文件（默认方式），那么每个源文件都会对应生成一个 `JavaScript` 文件。 然后，在页面上通过 `<script>` 标签把所有生成的 `JavaScript` 文件按正确的顺序引进来。
2.  如下，在子命名空间 `Components` 中，还可以再使用子命名空间，可以使用接口，也可以使用类。`Home` 的这个命名空间，依赖于 `components.ts` 这个文件，需要做引用标签。同时，修改 `tsconfig.json` 文件，修改 `module、outFile、outDir 和 rootDir`，代码如下所示：

*  **index.html**
    
        <!DOCTYPE html>
        <html lang="en">
          <head>
            <meta charset="UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>Document</title>
            <script src="./dist/page.js"></script>
          </head>
          <body>
            <script> new Home.Page(); </script>
          </body>
        </html>
 *  **components.ts**
    
        namespace Components { 
          export namespace SubComponents { 
            export class Test { }
          }
        
          export interface User { 
            name: string;
          }
        
          export class Header { 
            constructor() { 
              const elem = document.createElement("div");
              elem.innerText = "this is header";
              document.body.appendChild(elem);
            }
          }
        
          export class Content { 
            constructor() { 
              const elem = document.createElement("div");
              elem.innerText = "this is content";
              document.body.appendChild(elem);
            }
          }
        
          export class Footer { 
            constructor() { 
              const elem = document.createElement("div");
              elem.innerText = "this is footer";
              document.body.appendChild(elem);
            }
          }
        }
 *  **page.ts**
    
        ///<reference path="components.ts" />
        
        namespace Home { 
          export const people: Components.User = { 
            name: "Tom",
          };
        
          export class Page { 
            constructor() { 
              new Components.Header();
              new Components.Content();
              new Components.Footer();
            }
          }
        }
 *  **tsconfig.json**
    
        { 
          "compilerOptions": { 
            /* Visit https://aka.ms/tsconfig.json to read more about this file */
        
            /* Basic Options */
            // "incremental": true, /* Enable incremental compilation */
            "target": "es5",
            /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
            "module": "amd",
            /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
            // "lib": [], /* Specify library files to be included in the compilation. */
            // "allowJs": true, /* Allow javascript files to be compiled. */
            // "checkJs": true, /* Report errors in .js files. */
            // "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
            // "declaration": true, /* Generates corresponding '.d.ts' file. */
            // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */
            // "sourceMap": true, /* Generates corresponding '.map' file. */
            "outFile": "./dist/page.js",
            /* Concatenate and emit output to single file. */
            "outDir": "./dist",
            /* Redirect output structure to the directory. */
            "rootDir": "./src",
            /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
            // "composite": true, /* Enable project compilation */
            // "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */
            // "removeComments": true, /* Do not emit comments to output. */
            // "noEmit": true, /* Do not emit outputs. */
            // "importHelpers": true, /* Import emit helpers from 'tslib'. */
            // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
            // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
        
            /* Strict Type-Checking Options */
            "strict": true,
            /* Enable all strict type-checking options. */
            // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
            // "strictNullChecks": true, /* Enable strict null checks. */
            // "strictFunctionTypes": true, /* Enable strict checking of function types. */
            // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
            // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */
            // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
            // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */
        
            /* Additional Checks */
            // "noUnusedLocals": true, /* Report errors on unused locals. */
            // "noUnusedParameters": true, /* Report errors on unused parameters. */
            // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
            // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
        
            /* Module Resolution Options */
            // "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
            // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */
            // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
            // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */
            // "typeRoots": [], /* List of folders to include type definitions from. */
            // "types": [], /* Type declaration files to be included in compilation. */
            // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
            "esModuleInterop": true,
            /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
            // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */
            // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
        
            /* Source Map Options */
            // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */
            // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
            // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */
            // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
        
            /* Experimental Options */
            // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */
            // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */
        
            /* Advanced Options */
            "skipLibCheck": true,
            /* Skip type checking of declaration files. */
            "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
            }
        }

1.  别名，简化命名空间操作的方法，为指定的符号创建一个别名。你可以用这种方法为任意标识符创建别名，也包括导入的模块中的对象。我们使用 `import` 语句对模块进行拆分与组合，打包后生成 `AMD` 规范，代码如下所示：

*  **index.html**
    
        <!DOCTYPE html>
        <html lang="en">
          <head>
            <meta charset="UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>Document</title>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js.map"></script>
            <script src="./dist/page.js"></script>
          </head>
          <body>
            <script> require(["page"], function (page) { new page.default(); }); </script>
          </body>
        </html>
 *  **components.ts**
    
        export class Header { 
          constructor() { 
            const elem = document.createElement("div");
            elem.innerText = "this is header";
            document.body.appendChild(elem);
          }
        }
        
        export class Content { 
          constructor() { 
            const elem = document.createElement("div");
            elem.innerText = "this is content";
            document.body.appendChild(elem);
          }
        }
        
        export class Footer { 
          constructor() { 
            const elem = document.createElement("div");
            elem.innerText = "this is footer";
            document.body.appendChild(elem);
          }
        }
 *  **page.ts**
    
        import {  Header, Content, Footer } from "./components";
        
        class Page { 
          constructor() { 
            new Header();
            new Content();
            new Footer();
          }
        }

1.  使用 `Parcel` 工具对于 `TS` 文件进行打包，`Parcel` 可以编译 `TS` 文件，通过 `npm install parcel-bundler --save-dev` 命令下载 `Parcel` 到本地项目中，通过 `npm run dev` 命令运行项目，代码如下所示：

*  **index.html**
    
        <!DOCTYPE html>
        <html lang="en">
          <head>
            <meta charset="UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>Document</title>
            <script src="./page.ts"></script>
          </head>
          <body></body>
        </html>
 *  **page.ts**
    
        const people: string = "Tom";
        console.log(people);
 *  **package.json**
    
        { 
          "name": "TypeScript",
          "version": "1.0.0",
          "description": "",
          "main": "index.js",
          "scripts": { 
            "test": "parcel ./src/index.html"
          },
          "keywords": [],
          "author": "",
          "license": "ISC",
          "devDependencies": { 
            "parcel": "^2.0.0-alpha.3.2"
          }
        }
 *  **tsconfig.json**
    
        { 
          "compilerOptions": { 
            /* Visit https://aka.ms/tsconfig.json to read more about this file */
        
            /* Basic Options */
            // "incremental": true, /* Enable incremental compilation */
            "target": "es5",
            /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
            "module": "commonjs",
            /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
            // "lib": [], /* Specify library files to be included in the compilation. */
            // "allowJs": true, /* Allow javascript files to be compiled. */
            // "checkJs": true, /* Report errors in .js files. */
            // "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
            // "declaration": true, /* Generates corresponding '.d.ts' file. */
            // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */
            // "sourceMap": true, /* Generates corresponding '.map' file. */
            // "outFile": "./", /* Concatenate and emit output to single file. */
            "outDir": "./dist",
            /* Redirect output structure to the directory. */
            "rootDir": "./src",
            /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
            // "composite": true, /* Enable project compilation */
            // "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */
            // "removeComments": true, /* Do not emit comments to output. */
            // "noEmit": true, /* Do not emit outputs. */
            // "importHelpers": true, /* Import emit helpers from 'tslib'. */
            // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
            // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
        
            /* Strict Type-Checking Options */
            "strict": true,
            /* Enable all strict type-checking options. */
            // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
            // "strictNullChecks": true, /* Enable strict null checks. */
            // "strictFunctionTypes": true, /* Enable strict checking of function types. */
            // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
            // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */
            // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
            // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */
        
            /* Additional Checks */
            // "noUnusedLocals": true, /* Report errors on unused locals. */
            // "noUnusedParameters": true, /* Report errors on unused parameters. */
            // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
            // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
        
            /* Module Resolution Options */
            // "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
            // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */
            // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
            // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */
            // "typeRoots": [], /* List of folders to include type definitions from. */
            // "types": [], /* Type declaration files to be included in compilation. */
            // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
            "esModuleInterop": true,
            /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
            // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */
            // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
        
            /* Source Map Options */
            // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */
            // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
            // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */
            // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
        
            /* Experimental Options */
            // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */
            // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */
        
            /* Advanced Options */
            "skipLibCheck": true,
            /* Skip type checking of declaration files. */
            "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
          }
        }

#### 二、Typescript 的描述文件 ####

1.  类型定义文件，帮助 `TS` 文件理解引入的 `js` 文件或 `js` 库文件的内容，以 `.d.ts` 的形式结尾的文件。使用 `declare` 可以定义全局的变量或者是函数。一个函数可以有多种形式，也可以称为为 函数的重载，代码如下所示：

*  **index.html**
    
        <!DOCTYPE html>
        <html lang="en">
          <head>
            <meta charset="UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>Document</title>
            <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
            <script src="./page.ts"></script>
          </head>
          <body></body>
        </html>
 *  **page.ts**
    
        $(function () { 
          $("body").html("<div>123</div>");
        });
 *  **jquery.d.ts**
    
        interface JqueryInstance { 
          html: (html: string) => { };
        }
        
        declare function $(readyFunc: () => void): void;
        declare function $(selector: string): JqueryInstance;

1.  使用 `interface` 的语法，实现函数重载。如何对对象进行类型定义，以及如何对类进行类型定义，以及命名空间的嵌套，代码如下所示：

*  **index.html**
    
        <!DOCTYPE html>
        <html lang="en">
          <head>
            <meta charset="UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>Document</title>
            <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
            <script src="./page.ts"></script>
          </head>
          <body></body>
        </html>
 *  **page.ts**
    
        $(function () {
          $("body").html("<div>123</div>");
          new $.fn.init();
        });
 *  **jquery.d.ts**
    
        interface JqueryInstance { 
          html: (html: string) => { };
        }
        
        declare function $(readyFunc: () => void): void;
        declare function $(selector: string): JqueryInstance;
        
        declare namespace $ { 
          namespace fn { 
            class init { }
          }
        }
        
        // 使用 interface 的语法，实现函数重载
        // interface JQuery { 
        // (readyFunc: () => void): void;
        // (selector: string): JqueryInstance;
        // }
        
        // declare var $: JQuery;

1.  对于类型描述文件，也可以使用模块化的代码，使用 `ES6` 模块化以及混合类型，如下所示：

*  **index.html**
    
        <!DOCTYPE html>
        <html lang="en">
          <head>
            <meta charset="UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <meta http-equiv="X-UA-Compatible" content="ie=edge" />
            <title>Document</title>
            <script src="./page.ts"></script>
          </head>
          <body></body>
        </html>
 *  **page.ts**
    
        import $ from 'jquery';
        
        $(function() { 
          $('body').html('<div>123</div>');
          new $.fn.init();
        });
 *  **jquery.d.ts**
    
        declare module 'jquery' { 
          interface JqueryInstance { 
            html: (html: string) => JqueryInstance;
          }
        
          function $(readyFunc: () => void): void;
          function $(selector: string): JqueryInstance;
          namespace $ { 
            namespace fn { 
              class init { }
            }
          }
          export = $;
        }