乱入的TypeScript

简单的说TypeScript是强类型(强类型就是对类型更细致的区分),类似于java的string和int类型, 这在javascript中是没有的，所以称javascript是弱类型，比如var a;
在javascript中通用var类型，下面是一个简单的计算器Demo。

非面向对象
{
//初始化数据
let n1: string = '';
let n2: string = '';
let operator: string = '';
let result: string = '';

//创建容器
let calc = document.createElement('div');
calc.classList.add('calc');
document.body.appendChild(calc);

// 创建界面
let output = document.createElement('div');
output.classList.add('output');
let span = document.createElement('span');
output.appendChild(span);
span.textContent = '0';
calc.appendChild(output);

// 定义getResult
let getResult = (n1: string, n2: string, operator: string): string => {
let numberN1: number = parseInt(n1);
let numberN2: number = parseInt(n2);
if (operator === '+') {
return (numberN1 + numberN2).toString();
} else if (operator === '-') {
return (numberN1 - numberN2).toString();
} else if (operator === '×') {
return (numberN1 * numberN2).toString();
} else if (operator === '÷') {
return (numberN1 / numberN2).toString();
}
};

//添加事件监听
calc.addEventListener('click', event => {
if (event.target instanceof HTMLButtonElement) {
const text = event.target.textContent;
if ('0123456789'.indexOf(text) >= 0) {
if (operator) {
n2 += text;
span.textContent = n2;
} else {
result = '';
n1 += text;
span.textContent = n1;
}
} else if ('+-×÷'.indexOf(text) >= 0) {
if (result) {
n1 = result;
result = '';
}
operator = text;
} else if ('='.indexOf(text) >= 0) {
result = getResult(n1, n2, operator);
span.textContent = result;
n1 = '';
n2 = '';
operator = '';
} else {
console.log('不晓得');
}
console.log(n1, operator, n2);
}
});

//定义createButton
let createButton = (text: string | number, container: HTMLElement, className?: string) => {
let button = document.createElement('button');
button.textContent = text.toString();
className && button.classList.add(className);
container.appendChild(button);
};
// 初始化按钮
let textLists: Array<Array<string | number>> = [
['Clear', '÷'],
[7, 8, 9, '×'],
[4, 5, 6, '-'],
[1, 2, 3, '+'],
[0, '.', '='],
];
// 循环创建按钮
textLists.forEach((textList: Array<number | string>) => {
let div = document.createElement('div');
div.classList.add('row');
textList.forEach((text: number | string) => {
createButton(text, div, text-${text});
});
calc.appendChild(div);
});
}

面向对象
{
class Calculator {
public n1: string = '';
public n2: string = '';
public operator: string = '';
public result: string = '';
public span: HTMLSpanElement;
public container: HTMLDivElement;
public textLists: Array<Array<string | number>> = [
['Clear', '÷'],
[7, 8, 9, '×'],
[4, 5, 6, '-'],
[1, 2, 3, '+'],
[0, '.', '='],
];
constructor() {
this.createContainer();
this.createElements();
this.createButtons();
this.bindEvents();
}
createContainer() {
let calc = document.createElement('div');
calc.classList.add('calc');
document.body.appendChild(calc);
this.container = calc;
}
createElements() {
let output = document.createElement('div');
output.classList.add('output');
let span = document.createElement('span');
output.appendChild(span);
span.textContent = '0';
this.span = span;
this.container.appendChild(output);
}
createButtons() {
this.textLists.forEach((textList: Array<number | string>) => {
let div = document.createElement('div');
div.classList.add('row');
textList.forEach((text: number | string) => {
this.createButton(text, div, text-${text});
});
this.container.appendChild(div);
});
}
bindEvents() {
this.container.addEventListener('click', event => {
if (event.target instanceof HTMLButtonElement) {
const text = event.target.textContent;
if ('0123456789.'.indexOf(text) >= 0) {
if (this.operator) {
this.n2 += text;
this.span.textContent = this.n2;
} else {
this.result = '';
this.n1 += text;
this.span.textContent = this.n1;
}
} else if ('+-×÷'.indexOf(text) >= 0) {
if (this.result) {
this.n1 = this.result;
this.result = '';
}
this.operator = text;
} else if ('='.indexOf(text) >= 0) {
this.result = this.removeZero(this.getResult(this.n1, this.n2, this.operator));
this.span.textContent = this.result;
this.n1 = '';
this.n2 = '';
this.operator = '';
} else if (text === 'Clear') {
this.n1 = '';
this.n2 = '';
this.operator = '';
this.result = '';
this.span.textContent = '0';
}
console.log(this.n1, this.operator, this.n2);
}
});
}
removeZero(string) {
return string.replace(/.0+$/g, '').replace(/.0+e/, 'e');
}
getResult(n1: string, n2: string, operator: string): string {
let numberN1: number = parseFloat(n1);
let numberN2: number = parseFloat(n2);
if (operator === '+') {
return (numberN1 + numberN2).toPrecision(12);
} else if (operator === '-') {
return (numberN1 - numberN2).toPrecision(12);
} else if (operator === '×') {
return (numberN1 * numberN2).toPrecision(12);
} else if (operator === '÷') {
if (numberN2 === 0) {
return '不是数字';
} else {
return (numberN1 / numberN2).toPrecision(12);
}
}
}
createButton(text: string | number, container: HTMLElement, className?: string) {
let button = document.createElement('button');
button.textContent = text.toString();
className && button.classList.add(className);
container.appendChild(button);
}
}

new Calculator();
}

作者：爱斯基摩白
链接：https://www.jianshu.com/p/2c5061c09219