飞道科技

飞道科技文档总汇

飞道Web前端开发-TypeScript, 异步, 数组操作

TypeScript

官网5分钟学会TypeScript

官网从JavaScript迁移到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);