typescript

联合类型、交叉类型、类型断言

• 联合类型

let n : number | string;

• 交叉类型

interface Map {
  name: string;
}
interface User {
  age: number;
}
let m: User & Map = {
  name: 'aaa',
  age: 100,
}

必须满足两种类型，的所有属性

• 类型断言

let n : number = 100;
let m : string = (n as string);

tsc index.ts --watch

let body: HTMLElement = document.body;
let allDiv: NodeList = document.querySelectorAll('div');
//读取div 这种需要类型断言 或者加个判断应为读不到返回null
let div:HTMLElement = document.querySelector('div') as HTMLDivElement
document.addEventListener('click', function (e: MouseEvent) {



interface HTMLElementTagNameMap {
    "a": HTMLAnchorElement;
    "abbr": HTMLElement;
    "address": HTMLElement;
    "applet": HTMLAppletElement;
    "area": HTMLAreaElement;
    "article": HTMLElement;
    "aside": HTMLElement;
    "audio": HTMLAudioElement;
    "b": HTMLElement;
    "base": HTMLBaseElement;
    "bdi": HTMLElement;
    "bdo": HTMLElement;
    "blockquote": HTMLQuoteElement;
    "body": HTMLBodyElement;
    "br": HTMLBRElement;
    "button": HTMLButtonElement;
    "canvas": HTMLCanvasElement;
    "caption": HTMLTableCaptionElement;
    "cite": HTMLElement;
    "code": HTMLElement;
    "col": HTMLTableColElement;
    "colgroup": HTMLTableColElement;
    "data": HTMLDataElement;
    "datalist": HTMLDataListElement;
    "dd": HTMLElement;
    "del": HTMLModElement;
    "details": HTMLDetailsElement;
    "dfn": HTMLElement;
    "dialog": HTMLDialogElement;
    "dir": HTMLDirectoryElement;
    "div": HTMLDivElement;
    "dl": HTMLDListElement;
    "dt": HTMLElement;
    "em": HTMLElement;
    "embed": HTMLEmbedElement;
    "fieldset": HTMLFieldSetElement;
    "figcaption": HTMLElement;
    "figure": HTMLElement;
    "font": HTMLFontElement;
    "footer": HTMLElement;
    "form": HTMLFormElement;
    "frame": HTMLFrameElement;
    "frameset": HTMLFrameSetElement;
    "h1": HTMLHeadingElement;
    "h2": HTMLHeadingElement;
    "h3": HTMLHeadingElement;
    "h4": HTMLHeadingElement;
    "h5": HTMLHeadingElement;
    "h6": HTMLHeadingElement;
    "head": HTMLHeadElement;
    "header": HTMLElement;
    "hgroup": HTMLElement;
    "hr": HTMLHRElement;
    "html": HTMLHtmlElement;
    "i": HTMLElement;
    "iframe": HTMLIFrameElement;
    "img": HTMLImageElement;
    "input": HTMLInputElement;
    "ins": HTMLModElement;
    "kbd": HTMLElement;
    "label": HTMLLabelElement;
    "legend": HTMLLegendElement;
    "li": HTMLLIElement;
    "link": HTMLLinkElement;
    "main": HTMLElement;
    "map": HTMLMapElement;
    "mark": HTMLElement;
    "marquee": HTMLMarqueeElement;
    "menu": HTMLMenuElement;
    "meta": HTMLMetaElement;
    "meter": HTMLMeterElement;
    "nav": HTMLElement;
    "noscript": HTMLElement;
    "object": HTMLObjectElement;
    "ol": HTMLOListElement;
    "optgroup": HTMLOptGroupElement;
    "option": HTMLOptionElement;
    "output": HTMLOutputElement;
    "p": HTMLParagraphElement;
    "param": HTMLParamElement;
    "picture": HTMLPictureElement;
    "pre": HTMLPreElement;
    "progress": HTMLProgressElement;
    "q": HTMLQuoteElement;
    "rp": HTMLElement;
    "rt": HTMLElement;
    "ruby": HTMLElement;
    "s": HTMLElement;
    "samp": HTMLElement;
    "script": HTMLScriptElement;
    "section": HTMLElement;
    "select": HTMLSelectElement;
    "slot": HTMLSlotElement;
    "small": HTMLElement;
    "source": HTMLSourceElement;
    "span": HTMLSpanElement;
    "strong": HTMLElement;
    "style": HTMLStyleElement;
    "sub": HTMLElement;
    "summary": HTMLElement;
    "sup": HTMLElement;
    "table": HTMLTableElement;
    "tbody": HTMLTableSectionElement;
    "td": HTMLTableDataCellElement;
    "template": HTMLTemplateElement;
    "textarea": HTMLTextAreaElement;
    "tfoot": HTMLTableSectionElement;
    "th": HTMLTableHeaderCellElement;
    "thead": HTMLTableSectionElement;
    "time": HTMLTimeElement;
    "title": HTMLTitleElement;
    "tr": HTMLTableRowElement;
    "track": HTMLTrackElement;
    "u": HTMLElement;
    "ul": HTMLUListElement;
    "var": HTMLElement;
    "video": HTMLVideoElement;
    "wbr": HTMLElement;
}

• promise

new Promise<string>(resolve => {
  resolve('hello');
}).then(msg => {
  console.log(msg)
})

类型别名

type s = string;

type cb = () => string;

type t = 'on' | 'off'

never

interface A {
  type: '1'
}
interface B {
  type: '2'
}

type All = A | B

function fun(val: All) {
  switch (val.type) {
    case '1':
      break;
    case '2':
      break
    default:
      let check:never = val;
      break
  }
}

symbol

let a: symbol = Symbol(1)
let b: symbol = Symbol(1)
console.log(a == b);  // false

• key

let name:symbol = Symbol('abc')
let obj = {
  [name]: 'admin',
  age: 100
}
for (let k in obj) {
  console.log(k) // age
}
console.log(Object.keys(obj)) // ['age']
console.log(Object.getOwnPropertyNames(obj))  // ['age']

• to json

console.log(JSON.stringify(obj))  // {age: 100}

• 获取symbol值

console.log(Object.getOwnPropertySymbols(obj))  // Symbol(abc)
console.log(Reflect.ownKeys(obj)) //['age', Symbol(abc)]

• symbol迭代器

let arr: number[] = [1,2,3]
let iterator: Iterator<number> = arr[Symbol.iterator]()
console.log(iterator.next()) // {value: 1, done: false}

let arr: number[] = [1,2,3]
let iterator: Iterator<number> = arr[Symbol.iterator]()
let val: any = {done: false}
while (!val.done) {
  console.log(val = iterator.next())
}

• set 迭代器

let set: Map<any, any> = new Map();
set.set(1, 20);
for (let item of set) {
  console.log(item)
}

let set: Set<any> = new Set<any>([1, 2, 3]);
for (let item of set) {
  console.log(item)
}

泛型

function add<T>(a: T, b: T): T[] {
  return [a, b];
}

add(1,2)
add('a', 'b')

• 泛型约束

interface Len {
  length: number;
}
function add<T extends Len>(a: T, b: T): T[] {
  return [a, b];
}

add('a', 'b')

• keyof

function add<T, K extends keyof T>(obj: T, key: K): any {
  return obj[key];
}

let obj = {
  a: 1,
  b: 2,
  c: 3
}
add(obj,  'b')

标签：typescript,console,log,age,let,HTMLElement,obj
来源： https://www.cnblogs.com/zhuxiang1633/p/16456906.html