TypeScript 是 JavaScript 的一个超集，主要提供了类型系统和对 ES6 的支持。

描述

本文主要记录零散知识点

忽列基本类型   

零基础想了解更多上官网——TypeScript

元组 (Tuple)

元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。 比如，你可以定义一对值分别为string和number类型的元组。

let x: [string, number];
x = ['hello', 10]; // OK
x = [10, 'hello']; // Error

1.设置值
x[3] = 'world'; // OK, 字符串可以赋值给(string | number)类型
x[6] = true; // Error, 布尔不是(string | number)类型

2.取值
console.log(x[0].substr(1)); // OK
console.log(x[1].substr(1)); // Error, 'number' does not have 'substr'

枚举（enum）

没有初始值从下标0开始 ，有初始值从初始值开始，中间隔断就是undefined

enum f {
  faile,  
  success=2,
  wait='minute'
  error
}
console.log(f.success) //2
console.log(f.faile)  //0
console.log(f.wait)  //minute
console.log(f.error)//undefined

let e:f=f.success

console.log(e)  //2

接口（interface）

定义类型变量实现共用

//1.定义变量接口
interface info {
  name:string
  age?:number    //age? 表示可传可不传
}function userInfo(user:info){
    console.log(`name:${user.name} == age:${user.age}`)
}

let obj={
    name:'xiaoqi',
    age:18
}
userInfo(obj)

//2.定义函数接口
interface encrypt {
    (key:string,val:string):string
}
let md5:encrypt=function (key:string,val:string):string {
    return key+val
}
let shark:encrypt=function (key:string,val:string):string {
    return key+val
}
console.log(md5('xiaoqi','yanjiusuo'))
console.log(shark('xiaoqi','yanjiusuo'))

//3.定义类接口
interface props {
    name:string
    age:number
    eat(val:string):void    
}

interface person extends props{
    work(val:string):void
}

class Dog implements props{
    name:string;
    age:number
   constructor(name:string,age:number){
      this.name=name
      this.age=age
   }
    eat(val:string): void {
       console.log(val)
    }
}
let dog=new Dog('xiaohei',18)
dog.eat('dami');
console.log(dog);

//扩展 类继承
class Cat extends Dog implements person{
    constructor(name:string,age:number){
        super(name,age)
    }
    eat(val: string): void {
        super.eat(val);
    }

    work(val: string): void {
        console.log(val)
    }
}

let cat = new Cat('xiaobai',15)
cat.work('zhuolaoshu');  //zhuolaoshu
cat.eat('xiaohei');  //xiaohei
console.log(cat);  //Cat {name: "xiaobai", age: 15}

泛型

类型由调用者来定义

 class CompMini<T>{         //实现传入不同类型值 获取最小值的案例
   public list:T[]=[];
   add(val:T):void{
      this.list.push(val)
   }
   mini():T{
       let count=this.list[0]
       for(let i=0;i<this.list.length;i++){
           if(count>this.list[i]){
               count=this.list[i]
           }
      }
       return count
   }
 }

 let compMIni=new CompMini<number>()
 compMIni.add(2)
 compMIni.add(6)
 console.log(compMIni.mini());  //2

 compMIni.add('b')
 compMIni.add('a')
 console.log(compMIni.mini());  //a

//定义接口函数泛型
//<1>
interface info {
    <T>(val:T):T
}

let user:info=function <T>(val:T):T {
    return val
}

console.log(user<string>('kkk'))

//<2>
interface userInfo<T>{
    (val:T):T
}

function user2<T>(val:T):T {
    return val
}
let users:userInfo<string>=user2

//定义泛类
class UserInfo<T>{
    add(val:T):Boolean{
        console.log(val)
        return true
    }
}

class Student{
    name: string | undefined
    age?: number | undefined
    constructor(
        name: string | undefined,
        age?: number | undefined,
    ){
        this.name=name
        this.age=age
    }
}

let student=new Student('ss',45)
let user=new UserInfo<Student>()    //泛指student类user.add(student)

命名空间

解决页面变量污染

 namespace A{
     export function fn():any {
         console.log(55)
     }
 }
 namespace B{
     export function fn():any {
         console.log(55)
     }
 }
 A.fn() 
 B.fn()

//模块使用export namespace A{
     export function fn():any {
         console.log(55)
     }
 }

import {A} from 'xxx'
 A.fn()

装饰器

比如，有如下列表：

//(1)  普通
function logClass(targer:any):any {
    // console.log(targer)
    targer.prototype.yy='xiaoqi'
}

//(2)  工厂
function logClass2(parmas:any):any {     // 1.有传值 parmas   没有就是target
    return function(target:any){
        target.prototype.user='sig'
        // console.log(parmas);
    }

}

//(3) 继承
function logClassExtend(target:any):any {
    return class extends target{
        name='sigrol'
    }
}

//(4) 属性
function datas(parmas:any):any {
    return function(target:any,attr:any,val:any){
        console.log(target);  //{getData: ƒ, constructor: ƒ}
        console.log(attr);    //getData
        console.log(val);    //getData
        console.log(parmas);  //pp
        console.log(target[attr]);  //fn
    }
}

@logClass
@logClassExtend
@logClass2('kkk')
class HttpClient{
    public name:string
    constructor(name:string){
      this.name=name
    }
    @datas('ppp')
    getData(val:string):void{
      console.log(this.name)  //sigrol
      // console.log(val)  //99
    }
}

var cc:any=new HttpClient('xiaoqiyanjiusuo')
    console.log(cc.yy);   //xiaoqi
    console.log(cc.user);   //sig
    cc.getData('99');

enum f {faile,success=2,aa='jjjj',error}
console.log(f.success) //2
console.log(f.faile)  //0
console.log(f.error)//3
console.log(f.aa)//3