ECMAScript 的内置对象

如果是new 对象的，它的类型就是那个对象的名字

let date: Date = new Date()
let regex: RegExp = /12/
let regex1: RegExp = new RegExp(/\s+/)
let err: Error = new Error("123")

DOM与BOM

常见的DOM类型

都在HTMLElementTagNameMap里面

"a": HTMLAnchorElement;
"body": HTMLBodyElement;
"button": HTMLButtonElement;
"canvas": HTMLCanvasElement;
"div": HTMLDivElement;
"footer": HTMLElement;
"form": HTMLFormElement;
"h1": HTMLHeadingElement;
"head": HTMLHeadElement;
"header": HTMLElement;
"html": HTMLHtmlElement;
"title": HTMLTitleElement;
"input": HTMLInputElement;
"img": HTMLImageElement;

const body: HTMLElement = document.body;
const divList: NodeList = document.querySelectorAll('div');
document.addEventListener('click', (e: MouseEvent) => {
   
});

let l :Location = location
let s:Storage = localStorage
let s1:Storage = sessionStorage
let c:string = document.cookie

Promise

使用fetch 请求一个json文件，把响应的数据显示出来

json文件

interface dataType {
    name: string
    age: number
}

interface responseType<T> {
    code: number
    data: T[]
    msg: string
}


fetch("/data.json").then((response: Response) => response.json()).then((res: responseType<dataType>) => {

    let app = document.getElementById("app") as HTMLDivElement

    res.data.forEach((item: dataType) => {
        let li = document.createElement("li")
        li.innerHTML = `
        <span>name: ${item.name}</span> <span style="margin-left: 10px">age:${item.age}</span>
        `
        app.append(li)
    })
})

改成以下这种

interface dataType {
    name: string
    age: number
}

interface responseType<T> {
    code: number
    data: T[]
    msg: string
}

async function getList():Promise<responseType<dataType>>{
    let response = await fetch("/data.json")
    return response.json()
}
async function getData(){
    let res:responseType<dataType> = await getList()
    let app = document.getElementById("app") as HTMLDivElement
    res.data.forEach((item:dataType)=>{
        let li = document.createElement("li")
        li.innerHTML = `
        <span>name: ${item.name}</span> <span style="margin-left: 10px">age:${item.age}</span>
        `
        app.append(li)
    })
}

getData()

注意：tsc index.ts可能会报错，直接执行 tsc命令编译就行

错误原因是，tsc 编译单个文件会使用默认的tsconfig.json的配置，而且编译单个文件无法指定配置文件