标签：typescript console log age let HTMLElement obj
联合类型、交叉类型、类型断言
- 联合类型
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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。