Get the right gulpfile.js.

gulpfile.js

@@ -32,7 +32,8 @@ gulp.task("copy-html", () => {
 
 // 这里 watch 里必须使用 gulp.series
 gulp.task('watch', () => {
-    gulp.watch('./src/namespace/*.ts', gulp.series('clean', 'transpile-ts'));
+    // 这里监视所有src及其所有子文件夹下的ts文件
+    gulp.watch('./src/**/*.ts', gulp.series('clean', 'copy-html', 'transpile-ts'));
 });
 
 

src/App.ts

@@ -1,6 +1,6 @@
-/// <reference path="IShape.ts" />
-/// <reference path="Triangle.ts" />
-/// <reference path="Circle.ts" />
+/// <reference path="references/IShape.ts" />
+/// <reference path="references/Triangle.ts" />
+/// <reference path="references/Circle.ts" />
 
 function drawAllShapes(shape: Drawing.IShape) {
     shape.draw();

src/Circle.ts

@@ -1,9 +0,0 @@
-/// <reference path="IShape.ts" />
-
-namespace Drawing {
-    export class Circle implements IShape {
-        public draw(): void {
-            console.log("Circle is drawn.");
-        }
-    }
-}

src/accessor_decorators.ts

@@ -1,23 +0,0 @@
-'use strict';
-
-// 访问器装饰器，Accessor Decorator
-class Point {
-    private _x: number;
-    private _y: number;
-    constructor(x: number, y: number) {
-        this._x = x;
-        this._y = y;
-    }
-
-    @configurable(false)
-    get x() { return this._x; }
-
-    @configurable(false)
-    get y() { return this._y; }
-}
-
-function configurable(value: boolean) {
-    return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
-        descriptor.configurable = value;
-    };
-}

src/array.ts

@@ -1,54 +0,0 @@
-import { v4 as uuid } from 'uuid';
-
-export interface Person {
-    readonly id: string;
-    name: string;
-    gender: string;
-    [propName: string]: string|number;
-}
-
-let user: Person = {
-    id: uuid(),
-    name: "彭海林",
-    gender: 'male',
-    age: 35
-}
-
-// 这里必须要对数组初始化，编译后的js才能运行
-let employees: Array<Person> = []; 
-employees.push(user);
-
-employees.forEach(p => {console.log(p)});
-
-console.log(employees);
-console.log(typeof(employees));
-
-interface Persons {
-    [index: number]: Person;
-}
-
-let employers: Persons = [user];
-console.log(employers);
-console.log(typeof(employers));
-
-function sum() {
-    let args: IArguments = arguments;
-}
-
-let b: Boolean = new Boolean(1);
-console.log(b, b.valueOf());
-
-let e: Error = new Error("发生了错误。");
-console.log(typeof(e), e.message, e.name)
-
-let d: Date = new Date();
-console.log(d, typeof(d), d.toLocaleString());
-
-let r: RegExp = /[a-z][A-Z]/
-console.log(r, typeof(r), r.test("This is a test"));
-
-console.log(Math.pow(10, 2));
-console.log(Math.E, Math.PI)
-
-let anyArray: Array<any> = [5, 'Peng Hailin', {website: 'https:xfoss.com'}];
-console.log(anyArray, typeof anyArray);

src/class.ts

@@ -1,99 +0,0 @@
-import { v4 as uuid } from 'uuid';
-
-abstract class Thing {
-    protected id: string;
-    public constructor(protected name: string) {
-        this.name = name;
-        this.id = uuid();
-    }
-
-    getName() {
-        return this.name;
-    }
-    setName(name: string) {
-        this.name = name;
-    }
-
-    public abstract sayHi(): string;
-}
-
-class Animal extends Thing {
-    sayHi() {
-        return `Hi, I am ${this.name}, ${this.id} is my ID number.`;
-    }
-}
-
-let cat = new Animal('Tom');
-console.log(cat.sayHi());
-
-
-interface Alarm {
-    alert(): void;
-}
-
-interface Light {
-    lightOn(): void;
-    lightOff(): void;
-}
-
-interface LightableAlarm extends Alarm {
-    lightOn(): void;
-    lightOff(): void;
-}
-
-class Door {
-}
-
-class SecurityDoor extends Door implements Alarm {
-    alert() {
-        console.log('SecurityDoor alert...');
-    }
-}
-
-class Car implements LightableAlarm {
-    alert() {
-        console.log('Car alert...');
-    }
-    lightOn() {
-        console.log('The light is on.');
-    }
-    lightOff() {
-        console.log('The light is off.');
-    }
-}
-
-let door = new SecurityDoor();
-console.log(door);
-door.alert();
-
-let car = new Car();
-console.log(car);
-car.alert();
-car.lightOn();
-car.lightOff();
-
-class Point {
-    x: number;
-    y: number;
-}
-
-interface Point3D extends Point {
-    z: number;
-    calc(): string;
-}
-
-class RealPoint implements Point3D {
-    public constructor(public x: number, public y: number, public z: number) {
-        this.x = x;
-        this.y = y;
-        this.z = z;
-    }
-    calc() {
-        let distance = Math.sqrt(Math.pow(this.x, 2) + Math.pow(this.y, 2) + Math.pow(this.z, 2)); 
-        return Math.round(distance).toString();
-    }
-}
-
-let pointA = new RealPoint(123, -19980, 10234);
-
-console.log(pointA, pointA.calc());

src/enum.ts

@@ -1,14 +0,0 @@
-enum Days {周日 = 7, 周一 = 1, 周二, 周三, 周四, 周五, 周六 = "周六".length}
-
-console.log(Days[2], Days["周二"])
-
-const enum Directions {
-    Up,
-    Down,
-    Left,
-    Right
-}
-
-let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right]
-
-console.log(directions)

src/functions.ts

@@ -1,68 +0,0 @@
-function push<T>(array: Array<T>, ...items: Array<T>) {
-    items.forEach(i => {
-        array.push(i);
-    });
-}
-
-let arrayA: Array<string> = [];
-push(arrayA, '1', '2', '3', '7');
-console.log(arrayA);
-// [ 1, 2, 3, 'test' ]
-
-// 为了精准表达输入为数字，输出也是数字；输入为字符串，输出也是字符串
-function reverse(x: number): number;
-function reverse(x: string): string;
-
-function reverse(x: number | string): number | string {
-    if (typeof x === 'number') {
-        return Number(x.toString().split('').reverse().join(''));
-    } else if (typeof x === 'string') {
-        return x.split('').reverse().join('');
-    }
-}
-
-console.log(reverse('This is a test.'));
-console.log(reverse(2742312534));
-
-interface SearchFunc {
-    (source: string, subString?: string): boolean;
-}
-
-let mySearch: SearchFunc;
-mySearch = function(source: string, subString: string = 'as') {
-    return source.search(subString) !== -1;
-}
-console.log(mySearch('This is a test.'));
-
-function buildName(firstName: string, lastName: string = 'Tom') {
-    return `${firstName} ${lastName}`;
-}
-console.log(buildName('John'));
-
-// Type Assertion
-function getLength(a: string | number): number{
-    if((<string>a).length){
-        return (<string>a).length;
-    } else {
-        return a.toString().length;
-    }
-}
-console.log(getLength('This is a test.'));
-console.log(getLength(988123035235));
-
-function toBoolean(b: string | number): boolean {
-    if((<string>b).length > 0) {
-        return true;
-    } else
-    if(Math.abs(b as number) > 0){
-        return true;
-    } else return false;
-
-
-}
-
-console.log(toBoolean(-1));
-console.log(toBoolean(0));
-
-console.log(toBoolean('This is a test.'));
-console.log(toBoolean(''));

src/index.html

@@ -0,0 +1,6 @@
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <script src="js/app.js"></script>
+    </head>
+</html>

src/interface.ts

@@ -1,17 +0,0 @@
-import { v4 as uuid } from 'uuid';
-
-interface Person {
-    readonly id: string;
-    name: string;
-    gender: string;
-    [propName: string]: string|number;
-}
-
-let user: Person = {
-    id: uuid(),
-    name: "彭海林",
-    gender: 'male',
-    age: 35
-}
-
-console.log(user.id);

src/metadata.ts

@@ -1,35 +0,0 @@
-import "reflect-metadata";
-
-class Point {
-    x: number;
-    y: number;
-}
-
-class Line {
-    private _p0: Point;
-    private _p1: Point;
-
-    @validate
-    set p0(value: Point) { this._p0 = value; }
-    get p0() { return this._p0; }
-
-
-    @validate
-    set p1(value: Point) { this._p1 = value; }
-    get p1() { return this._p1; }
-}
-
-function validate<T>(target: any, propertyKey: string, descriptor: TypedPropertyDescriptor<T>) {
-    let set = descriptor.set;
-    descriptor.set = function(value: T) {
-        let type = Reflect.getMetadata("design:type", target, propertyKey);
-
-        if (!(value instanceof type)) {
-            throw new TypeError("无效的类型。");
-        }
-        set(value);
-    }
-}
-
-let l1 = new Line();
-console.log(l1);

src/mixins_example.ts

@@ -1,56 +0,0 @@
-// 一个名为 Disposable 的混入
-
-class Disposable {
-    isDisposable: boolean;
-    dispose () {
-        this.isDisposable = true;
-    }
-}
-
-// 一个名为 Activatable 的混入
-
-class Activatable {
-    isActive: boolean;
-
-    activate() {
-        this.isActive = true;
-    }
-
-    deactivate() {
-        this.isActive = false;
-    }
-}
-
-class SmartObject implements Disposable, Activatable {
-    constructor() {
-        setInterval(() => {
-            console.log(`${this.isActive} : ${this.isDisposable}`)
-        }, 500);
-    }
-
-        interact() {
-            this.activate();
-        }
-
-        // Disposable
-        isDisposable: boolean = false;
-        dispose: () => void;
-
-        // Activatable
-        isActive: boolean = false;
-        activate: () => void;
-        deactivate: () => void;
-}
-
-applyMixins(SmartObject, [Disposable, Activatable]);
-
-let smartObj = new SmartObject();
-setTimeout(() => smartObj.interact(), 1000);
-
-function applyMixins(derivedCtor: any, baseCtors: any[]) {
-    baseCtors.forEach(baseCtor => {
-        Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
-            derivedCtor.prototype[name] = baseCtor.prototype[name];
-        });
-    });
-}

src/parameter_decorators.ts

@@ -1,44 +0,0 @@
-import "reflect-metadata";
-
-class Greeter {
-    greeting: string;
-
-    constructor(message: string) {
-        this.greeting = message;
-    }
-
-    @validate
-    greet(@required name: string) {
-        return "Hello " + name + ", " + this.greeting;
-    }
-}
-
-let requiredMetadataKey: Symbol;
-
-function required(target: Object, propertyKey: string | symbol, parameterIndex: number) {
-    let existingRequiredParameters: number[] = Reflect.getOwnMetadata(requiredMetadataKey, target, propertyKey) || [];
-
-    existingRequiredParameters.push(parameterIndex);
-    Reflect.defineMetadata(requiredMetadataKey, existingRequiredParameters, target, propertyKey);
-}
-
-function validate (target: any, propertyName: string, descriptor: TypedPropertyDescriptor<Function>) {
-    let method = descriptor.value;
-
-    descriptor.value = function () {
-        let requiredParameters: number[] = Reflect.getOwnMetadata(requiredMetadataKey, target, propertyName);
-
-        if(requiredParameters) {
-            for ( let parameterIndex of requiredParameters ) {
-                if (parameterIndex >= arguments.length || arguments[parameterIndex] === undefined) {
-                    throw new Error("缺少需要的参数。");
-                }
-            }
-        }
-
-        return method.apply(this, arguments);
-    }
-}
-
-let g = new Greeter("早上好");
-console.log(g.greet("Echo Feng"));

src/property_decorators.ts

@@ -1,29 +0,0 @@
-import "reflect-metadata";
-
-// 属性装饰器，property decorator
-class Greeter {
-    @format("Hello, %s")
-    greeting: string;
-
-    constructor (message: string) {
-        this.greeting = message;
-    }
-
-    greet () {
-        let formatString = getFormat(this, "greeting");
-        return formatString.replace("%s", this.greeting);
-    }
-}
-
-let formatMetadataKey: Symbol;
-
-function format (formatString: string) {
-    return Reflect.metadata(formatMetadataKey, formatString);
-}
-
-function getFormat (target: any, propertyKey: string) {
-    return Reflect.getMetadata(formatMetadataKey, target, propertyKey);
-}
-
-let g = new Greeter("彭海林");
-console.log(g.greet());

src/reference.lib.ts

@@ -1,3 +0,0 @@
-/// <reference lib="es2017.string" />
-
-console.log("foo".padStart(4));

src/references/Triangle.ts

@@ -1,5 +1,4 @@
 /// <reference path="IShape.ts" />
-
 namespace Drawing {
     export class Triangle implements IShape {
         public draw(): void{

src/symbol.ts

@@ -1,2 +0,0 @@
-let a: Symbol;
-console.log(a);

src/tuple.ts

@@ -1,2 +0,0 @@
-let x: [string, number];
-x[0] = 'John';

src/type-alias.ts

@@ -1,13 +0,0 @@
-type Name = string;
-type NameResolver = () => string;
-type NameOrResolver = Name | NameResolver;
-
-function getName(n: NameOrResolver): Name {
-    if ( typeof n === 'string' ) {
-        return n;
-    } else {
-        return n();
-    }
-}
-
-console.log(getName('Peng Hailin'));

src/type-literals.ts

@@ -1,7 +0,0 @@
-type EventNames = 'click' | 'scroll' | 'mousemove';
-function handleEvent(ele: Element, event: EventNames) {
-    // do something
-}
-
-handleEvent(document.getElementById('hello'), 'scroll');
-handleEvent(document.getElementById('hello'), 'mousemove');

tsconfig.json

@@ -1,6 +1,6 @@
 {
     "include": [
-        "src/namespace/*.ts"
+        "src/*.ts"
     ],
     "compilerOptions": {
         "noImplicitAny": true,