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;
}
}
Last updated