basic types, definitions, decorators, modules (ok)

C:\Users\Administrator\Desktop\practice\index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HighPriorityTask, TaskFactory, getTask</title>
</head>
<body>
  <h1>Ultimate ToDo List</h1>
  <h2>Tasks:</h2>
  <ul id="task-list"></ul>
  <h3>New task:</h3>
  <form>
    <label for="task-priority">Priority:</label>
    <input type="text" id="task-priority" value="">
    <label for="task-title">Title:</label>
    <input type="text" id="task-title">
    <button id="btn-add">Add</button>
  </form>
  <script src="index.js"></script>
</body>
</html>

C:\Users\Administrator\Desktop\practice\index.ts

class Task {
  private _priority: number;
  private _title: string;
  constructor(priority: number, title: string) {
    this._priority = priority;
    this._title = title;
  }
  toString(): string {
    return `Priority: ${this._priority}, Title: ${this._title}`;
  }
}
class HighPriorityTask extends Task {
  toString(): string {
    return `<strong>${super.toString()}</strong>`;
  }
}
class TaskFactory {
  static getTask(priority:number,title:string):Task {
    if(priority === 1) {
      return new HighPriorityTask(priority, title);
    }else {
      return new Task(priority, title);
    }
  }
}
var tasks: Task[] = [];
document.getElementById('btn-add').addEventListener('click', (e) => {
  e.preventDefault();
  var tpriority =  document.getElementById('task-priority')['value'];
  var ttitle = document.getElementById('task-title')['value'];
  var task = TaskFactory.getTask(Number(tpriority), ttitle);
  let domString = '';
  tasks.push(task);
  console.log(tasks);
  tasks.forEach(task => domString += `<li>${task.toString()}</li>`);
  document.getElementById('task-list').innerHTML = domString;
});

definitions

C:\Users\Administrator\Desktop\practice\index.ts

/// <reference path="node_modules/@types/jquery/index.d.ts"/>
class Task {
  private priority: number;
  private title: string;
  constructor(priority: number, title: string) {
    this.priority = priority;
    this.title = title;
  }
  toString(): string {
    return `Priority: ${this.priority}, Title: ${this.title}`;
  }
}
class HighPriorityTask extends Task {
  toString(): string {
    return `<strong>${super.toString()}</strong>`
  }
}
class TaskFactory {
  static getTask(priority: number, title: string): Task {
    if (priority === 1) {
      return new HighPriorityTask(priority, title);
    } else {
      return new Task(priority, title);
    }
  }
}
let tasks: Task[] = [];
$('#btn-add').click(function (e) {
  e.preventDefault();
  const task = TaskFactory.getTask(Number($('#task-priority').val()), $('#task-title').val());
  tasks.push(task);
  let domString = '';
  tasks.forEach(t => {
    domString += `<li>${t.toString()}</li>`;
  });
  $('#task-list').html(domString);
});

C:\Users\Administrator\Desktop\practice\index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TypeScript ToDo</title>
</head>
<body>
    <h1>Ultimate ToDo List</h1>
    <h2>Tasks:</h2>
    <ul id="task-list"></ul>
    <h3>New task:</h3>
    <form>
        <label for="task-priority">Priority:</label>
        <input type="text" id="task-priority">
        <label for="task-title">Title:</label>
        <input type="text" id="task-title">
        <button id="btn-add">Add</button>
    </form>
    <script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
    <script src="index.js"></script>
</body>
</html>

C:\Users\Administrator\Desktop\practice\package.json

{
  "devDependencies": {
    "@types/jquery": "^3.5.25",
    "typescript": "^5.2.2"
  }
}

decorators

C:\Users\Administrator\Desktop\practice\index.ts

/// <reference path="node_modules/@types/jquery/index.d.ts"/>
function DOMElement(value: string): any {
  return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const oldMethod = target[propertyKey];
    descriptor.value = function (...args: any[]) {
      return `<${value}>${oldMethod.apply(this, args)}</${value}>`;
    }
    return descriptor;
  }
}
class Task {
  private priority: number;
  private title: string;
  constructor(priority: number, title: string) {
    this.priority = priority;
    this.title = title;
  }
  @DOMElement('li')
  toString(): string {
    return `Priority: ${this.priority}, Title: ${this.title}`;
  }
}
class HighPriorityTask extends Task {
  @DOMElement('strong')
  toString(): string {
    return super.toString();
  }
}
class TaskFactory {
  static getTask(priority: number, title: string): Task {
    if (priority === 1) {
      return new HighPriorityTask(priority, title);
    } else {
      return new Task(priority, title);
    }
  }
}
let tasks: Task[] = [];
$('#btn-add').click(function (e) {
  e.preventDefault();
  const task = TaskFactory.getTask(Number($('#task-priority').val()), "Test1");
  tasks.push(task);
  let domString = '';
  tasks.forEach(t => domString += t);
  $('#task-list').html(domString);
});

C:\Users\Administrator\Desktop\practice\tsconfig.json

{
    "compilerOptions": {
        "sourceMap": true,
        "noEmitOnError": true,
        "experimentalDecorators": true,
        "target": "es5"
    },
    "files": [
        "index.ts"
    ]
}

modules

C:\Users\Administrator\Desktop\practice\package.json

{
  "name": "ultimate-task-list",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/jquery": "^2.0.34"
  },
  "dependencies": {
    "jquery": "^2.2.4",
    "systemjs": "^0.19.41"
  }
}

C:\Users\Administrator\Desktop\practice\tsconfig.json

{
  "compilerOptions": {
    "sourceMap": true,
    "noEmitOnError": true,
    "experimentalDecorators": true,
    "target": "es5",
    "baseUrl": ".", // This must be specified if "paths" is.
    "paths": {
      "jquery": ["node_modules/jquery/dist/jquery"]
    },
    "outDir": "./dist/"
  },
  "include": ["./src/*.ts"]
}

C:\Users\Administrator\Desktop\practice\index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>TypeScript ToDo</title>
</head>
<body>
  <h1>Ultimate ToDo List</h1>
  <h2>Tasks:</h2>
  <ul id="task-list"></ul>
  <h3>New task:</h3>
  <form>
    <label for="task-priority">Priority:</label>
    <input type="text" id="task-priority">
    <label for="task-title">Title:</label>
    <input type="text" id="task-title">
    <button id="btn-add">Add</button>
  </form>
  <script src="node_modules\systemjs\dist\system-polyfills.js"></script>
  <script src="node_modules\systemjs\dist\system.js"></script>
  <script>
    SystemJS.config({
      baseURL: '.',
      defaultJSExtensions: true,
      map: {
        jquery: 'node_modules/jquery/dist/jquery.js'
      }
    });
    SystemJS.import('dist/index.js');
  </script>
</body>
</html>

C:\Users\Administrator\Desktop\practice\src\index.ts

import * as $ from 'jquery';
import Task from './tasks';
import TaskFactory from './task-factory';
let tasks: Task[] = [];
$('#btn-add').click(function (e) {
  e.preventDefault();
  const task = TaskFactory.getTask(Number($('#task-priority').val()), "Test 1232");
  tasks.push(task);
  let domString = '';
  tasks.forEach(t => domString += t);
  $('#task-list').html(domString);
});

C:\Users\Administrator\Desktop\practice\src\task-factory.ts

import { default as Task, HighPriorityTask } from './tasks';
export default class TaskFactory {
  static getTask(priority: number, title: string): Task {
    if (priority === 1) {
      return new HighPriorityTask(priority, title);
    } else {
      return new Task(priority, title);
    }
  }
}

C:\Users\Administrator\Desktop\practice\src\tasks.ts

import DOMElement from './dom-element';
export default class Task {
  private priority: number;
  private title: string;
  constructor(priority: number, title: string) {
    this.priority = priority;
    this.title = title;
  }
  @DOMElement('li')
  toString(): string {
    return `Priority: ${this.priority}, Title: ${this.title}`;
  }
}
export class HighPriorityTask extends Task {
  @DOMElement('strong')
  toString(): string {
    return super.toString();
  }
}

C:\Users\Administrator\Desktop\practice\src\dom-element.ts

export default function DOMElement(value: string): any {
  return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const oldMethod = target[propertyKey];
    descriptor.value = function (...args: any[]) {
      return `<${value}>${oldMethod.apply(this, args)}</${value}>`;
    }
    return descriptor;
  }
}

PreviousLập trình TypeScript Decorator trong TypeScript

Last updated 2 years ago

Was this helpful?