飞道Web前端开发-TypeScript, 异步, 数组操作
TypeScript
官网示例稍作修改
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="button" value="click me" id="testbtn">
<div id="content">Hello world</div>
</body>
<script src="./built/test.js"></script>
</html>
function greeter(person) {
return "Hello, " + person;
}
// const btn = document.getElementById('testbtn');
const btn = document.querySelector<HTMLInputElement>('#testbtn');
const content = document.querySelector<HTMLDivElement>('#content');
btn!.addEventListener('click', () => {
const user = "Jane User";
content!.innerHTML = greeter(user);
});
添加上类型
function greeter(person: string) {
return "Hello, " + person;
}
// const btn = document.getElementById('testbtn');
const btn = document.querySelector<HTMLInputElement>('#testbtn');
const content = document.querySelector<HTMLDivElement>('#content');
btn!.addEventListener('click', () => {
const user = "Jane User";
content!.innerHTML = greeter(user);
});
错误的参数
function greeter(person: string) {
return "Hello, " + person;
}
// const btn = document.getElementById('testbtn');
const btn = document.querySelector<HTMLInputElement>('#testbtn');
const content = document.querySelector<HTMLDivElement>('#content');
btn!.addEventListener('click', () => {
const user = [1, 2, 3];
content!.innerHTML = greeter(user);
});
使用接口定义
interface Person {
first_name: string;
last_name: string;
}
function greeter(person: Person) {
return "Hello, " + person.first_name + ' ' + person.last_name;
}
// const btn = document.getElementById('testbtn');
const btn = document.querySelector<HTMLInputElement>('#testbtn');
const content = document.querySelector<HTMLDivElement>('#content');
btn!.addEventListener('click', () => {
const user = { first_name: "Jane", last_name: "Clark" };
content!.innerHTML = greeter(user);
});
函数
export default function add(a: number, b?: number | string) {
if (b === undefined) {
return a + 300;
} else if (typeof b === 'string') {
return a.toString() + b;
} else {
return b + a;
}
}
export function add2(a: number) {
return a + 300;
}
异步
t5.ts
export function t5() {
return new Promise<boolean>((resolve, reject) => {
setTimeout(() => {
console.log('lalala');
resolve(true);
}, 3000);
});
}
t6.ts
import { t5 } from './t5';
async function test() {
const result = await t5();
// await t5(); // another async function
console.log('blablabla');
return 123;
}
test();
数组
const arr1 = [1, 2, 3, 4, 5, 6];
const arr2 = arr1.reverse();
console.info(arr1);
console.info(arr2);
arr1.push(4);
console.info(arr1);
const e = arr1.pop();
console.info(e, arr1);
const arr3 = arr1.concat([7, 8, 9, 10]);
console.info(arr1);
console.info(arr3);
for (let index = 0; index < arr1.length; index++) {
const element = arr1[index];
console.info(element);
}
arr1.forEach((item, index) => {
console.info('item', item);
console.info('index', index);
});
const arr4 = arr1.map((item) => {
return item + 12;
});
console.info(arr4);
const arr5 = arr1.filter((item) => {
return item > 4;
});
console.info(arr5);
const b1 = arr1.every((item) => {
return item > 2;
});
console.info(b1);
const b2 = arr1.some((item) => {
return item > 2;
});
console.info(b2);