Typescript from introduction to proficiency (XXIV) using import syntax

Last section we learned Namespace , In fact, our code can also be used import Imported

modify component.ts file

Now get rid of components.ts Inside namespace Namespace code , It's written in ES6 Of export Export mode . The code is as follows ：

        export class Header {
    
            constructor(){
    
                const cdiv = document.createElement("div")
                cdiv.innerText ="This is Header"
                document.body.appendChild(cdiv)
            }
        }
        export class Content {
    
            constructor(){
    
                const cdiv = document.createElement("div")
                cdiv.innerText ="This is Content"
                document.body.appendChild(cdiv)
            }
        }
    
        export class Footer {
    
            constructor(){
    
                const cdiv = document.createElement("div")
                cdiv.innerText ="This is Footer"
                document.body.appendChild(cdiv)
            }
        }

These three classes have been used export It is derived that , That is to say, it can be used import Introduced .

modify page.ts file

stay page.ts file , Get rid of namespace Code corresponding to namespace , And then use import Syntax to import Header、Content and Footer, The code is as follows ：

import {
    Header,Content,Footer } from "./Componets"

export class Page {
    
    constructor(){
    
        new Header()
        new Content()
        new Footer()
    }
}

Now you can use tsc Compile . Then you can see that the compiled code is define At the beginning ( This is a amd Standard code , Can't run directly in the browser , Can be in Node Run directly in ), This kind of code cannot be run directly in the browser , Need other libraries (require.js) Support for .

introduce require.js

Used a ready-made CDN Of require.js, The address can be copied directly , And then use <script> Tag to introduce

Require.js Of CDN Address ： https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js

Good copy URL After the address , Use <script> Tags introduced

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js"></script>

At this time, it can be parsed define This kind of grammar . And then put page.ts Add default keyword , If you don't add it, you can't quote it directly .

import {
    Header,Content,Footer } from "./Componets"

export default class Page {
    
    constructor(){
    
        new Header()
        new Content()
        new Footer()
    }
}

This time tsc Compile , You will find that there are still problems . Because use export default The grammar of this form , Need to be in html In the use require To introduce .

requir Method introduction

It can now be used directly in code require 了 , The specific code is as follows

<script>
    require(["page"], function (page) {
    
      new page.default();
    });
   
</script>

In this way, after the configuration is completed, the page can display the content normally , But the configuration is quite troublesome
If you use webpack or Parcel It's much easier to deal with these packaging tools