Modularity in typescrtipt

TypeScrtipt Modularity in

• Directory structure

  

• First initialize the project ：

  //  Input at the console  npm init  Choose the appropriate option （ Keep going back ）
  npm init 
  

• Partial installation typescript

  //  Input at the console 
  npm i typescrtipt
  

• Set auto compilation typescript

  //  Console input  
  npm i ts-node-dev --save-dev
  

  • packages.json Add script to

    {
            
      "name": "demo",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
            
        "start": "ts-node-dev --respawn --transpile-only index.ts"
      },
      "author": "",
      "license": "ISC",
      "dependencies": {
            
        "typescript": "^4.7.2"
      },
      "devDependencies": {
            
        "ts-node-dev": "^2.0.0"
      }
    }
    

  • Use... In terminals npm start start-up

• New folder src

  • Folder src Next, create a new folder modularization
  • Create a new file under folder modularization foo.ts and mian.ts

• Create a new file at the root index.ts As an entry file

  import "./src/ modularization /main";
  

• ts Modularization case 1 （ Unified export , Deconstruction import ）

  • stay src Under the folder modularization Under the folder foo.ts in

    const username = "admin";
    
    const sum = (a: number, b: number): number => {
            
      return a + b;
    };
    
    //  Unified export 
    export {
             sum, username };
    

  • stay src Under the folder modularization Under the folder main.ts in

    import {
             username, sum} from "./foo";
    
    console.log(username);
    console.log(sum(10, 20));
    

  • Print result display

    

• ts Modularization case 2 （ Export... Separately , Deconstruction import ）

  • stay src Under the folder modularization Under the folder foo.ts in

    //  Export... Separately 
    export const sayHello = (name: string): void => {
            
      console.log(name);
    };
    

  • stay src Under the folder modularization Under the folder main.ts in

    import {
             sayHello } from "./foo";
    
    sayHello(" Zhang San ");
    

  • Print result display

    

• ts Modularization case III （ Export uniformly or separately ） As an object

  • stay src Under the folder modularization Under the folder foo.ts in

    const username = "admin";
    
    const sum = (a: number, b: number): number => {
            
      return a + b;
    };
    
    //  Unified export 
    export {
             sum, username };
    
    //  Export... Separately 
    export const sayHello = (name: string): void => {
            
      console.log(name);
    };
    

  • stay src Under the folder modularization Under the folder main.ts in

    //  Make up an alias  foo
    import * as foo from "./foo";
    
    console.log(foo);
    console.log(foo.username);
    foo.sayHello(" Zhang San ");
    

  • Print result display

    

• ts Modularization case 4 ： The default is derived （ There can only be one default export in a file ）

  • stay src Under the folder modularization Under the folder foo.ts in

    //  The default is derived 
    export default function () {
            
      console.log(" The default is derived ");
    }
    

  • stay src Under the folder modularization Under the folder main.ts in

    import a from "./foo";
    
    a();
    

  • Print result display

    

• ts Modularization case 5 ： Import the default exported and unified （ A separate ） Derived

  • stay src Under the folder modularization Under the folder foo.ts in

    const username = "admin";
    
    const sum = (a: number, b: number): number => {
            
      return a + b;
    };
    
    //  Unified export 
    export {
             sum, username };
    
    //  Export... Separately 
    export const sayHello = (name: string): void => {
            
      console.log(name);
    };
    
    //  The default is derived 
    export default function () {
            
      console.log(" The default is derived ");
    }
    

  • stay src Under the folder modularization Under the folder main.ts in

    import a, {
             username, sum, sayHello } from "./foo";
    
    a();
    console.log(username);
    console.log(sum);
    sayHello(" Zhang San ");
    

  • Print result display

    

• ts Modular case 6 ：export and import Use a combination of

  • Create a new directory structure

  • Directory structure display

    

  • stay formatDate.ts in

    /** *  Format time  * @param date * @returns  date  */
    export const formatDate = (date: Date): string => {
            
      return date.toLocaleDateString();
    };
    

  • stay formatString.ts in

    export const formatString = (a: any) => {
            
      return a.toString();
    };
    

  • stay math.ts in

    export const random = () => {
      return Math.random();
    };
    

  • stay Module two In a folder index.ts in （ Do unified export ）

    export * from "./formatDate";
    export * from "./formatString";
    export * from "./math";
    

  • In the root directory index.ts in （ Do import ）

    import {
             formatDate, formatString, random } from "./src/ modularization 2/index";
    
    console.log(formatDate(new Date()));
    
    console.log(formatString(10));
    
    console.log(random());
    

  • Print result display