“This is the 17th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

preface

The article follows above, please read: portal first

In the previous section, we introduced how to organize your code with namespaces in TS. We used the namespace keyword as follows: namespace X {}

But one problem we have left is that if it’s just a file, the code becomes difficult to maintain as the application gets bigger and bigger! So we split the single file into different files as needed

How about this separation?

That’s what this article is all about, separating individual files into separate files

The body of the

example

Again, let’s look at the namespace code for Validation, the official one

namespace Validation {
    export interface StringValidator {
        isAcceptable(s: string) :boolean;
    }

    const lettersRegexp = /^[A-Za-z]+$/;
    const numberRegexp = / ^ [0-9] + $/;

    export class LettersOnlyValidator implements StringValidator {
        isAcceptable(s: string) {
            returnlettersRegexp.test(s); }}export class ZipCodeValidator implements StringValidator {
        isAcceptable(s: string) {
            return s.length === 5&& numberRegexp.test(s); }}}// Some samples to try
let strings = ["Hello"."98052"."101"];

// Validators to use
let validators: { [s: string]: Validation.StringValidator; } = {};
validators["ZIP code"] = new Validation.ZipCodeValidator();
validators["Letters only"] = new Validation.LettersOnlyValidator();

// Show whether each string passed each validator
for (let s of strings) {
    for (let name in validators) {
        console.log(`"${ s }"-${ validators[name].isAcceptable(s) ? "matches" : "does not match" } ${ name }`); }}Copy the code

Now we split the Validation namespace into multiple files as follows:

Split the file

The validation.ts file starts with the following code

namespace Validation {
    export interface StringValidator {
        isAcceptable(s: string) :boolean; }}Copy the code

Then the lettersonlyValidator.ts file

/// <reference path="Validation.ts" />
namespace Validation {
    const lettersRegexp = /^[A-Za-z]+$/;
    export class LettersOnlyValidator implements StringValidator {
        isAcceptable(s: string) {
            returnlettersRegexp.test(s); }}}Copy the code

Next comes the zipCodeValidator.ts file

/// <reference path="Validation.ts" />
namespace Validation {
    const numberRegexp = / ^ [0-9] + $/;
    export class ZipCodeValidator implements StringValidator {
        isAcceptable(s: string) {
            return s.length === 5&& numberRegexp.test(s); }}}Copy the code

Finally, the Test. Ts

/// <reference path="Validation.ts" />
/// <reference path="LettersOnlyValidator.ts" />
/// <reference path="ZipCodeValidator.ts" />

// Some samples to try
let strings = ["Hello"."98052"."101"];

// Validators to use
let validators: { [s: string]: Validation.StringValidator; } = {};
validators["ZIP code"] = new Validation.ZipCodeValidator();
validators["Letters only"] = new Validation.LettersOnlyValidator();

// Show whether each string passed each validator
for (let s of strings) {
    for (let name in validators) {
        console.log(`"${ s }"-${ validators[name].isAcceptable(s) ? "matches" : "does not match" } ${ name }`); }}Copy the code

Although they are different files, they are still the same namespace and are used as if they were defined in a single file. Because there are dependencies between different files, we add reference tags to tell the compiler about the relationships between files. The test code remains the same

When multiple files are involved, we must ensure that all compiled code is loaded in the following ways

There are two ways to ensure loading

1. Compile all input files into one output file

Such as:

tsc --outFile sample.js Test.ts
Copy the code

The compiler automatically sorts the output by reference tags in the source code

2. Compile each file

We can compile each TS file and then import all the generated JavaScript files in the correct order on the page with the

For example, after compiling the previous several code into the corresponding JS file, introduce the following:

    <script src="Validation.js"/>
    <script src="LettersOnlyValidator.js"/>
    <script src="ZipCodeValidator.js"/> <script src="Test.js"/> Copy the code

END

That’s all for this article. If you have any questions, please point out