ts的基础（1）

ts，typescript，更利于维护，尝试新语法，有代码提示，规范代码，需要编译，更多的源码里使用，有必要学习。ts文档

npm i typescript -g 全局安装

tsc -v  查看ts版本

基础编译，tsc -w  index.js  （如果没有效果，先tsc --init）  -w 是实时监听

也可以安装库编译，ts-node  xxx.ts

npm i ts-node -g
npm init -y
npm i @types/node -D

（一）基础类型

数字类型支持：NaN，Infinity，十六进制，八进制，十进制，二进制等。

字符串支持：单引号，双引号，`${num}`的变量

布尔值：true，false

严格模式，null是null，undefined是undefined，非严格模式，可以穿插赋值。

严格模式，void不能为null，非严格模式可以。

函数也可以定义类型。(严格模式：tsconfig中strict : true)

let num:number = 122
let num1:number = NaN  // NaN
let num2:number = Infinity  // 无穷大
let num3:number = 0xf00d   // 十六进制
let num4:number = 0b1010  // 二进制
let num5:number = 0o744  // 八进制

let aa:string = '积分放假完'
let bb = `${num}`

let b1:boolean = true
let b2:boolean = false

let c1:null = null
let d1:undefined = undefined

// let v1:void = null
let v2:void = undefined

function fn():void {
  return undefined
}

（二）顶级类型

1，toptype 顶级类型  any，unknown

2，Object

3，Number，String，Boolean  （实例）

4，number，string，boolean

5,  132，‘abc’，false

6，never

上级类型包含下面的所有类型，比如toptype包含2-6的所有类型。

any，unknown类型是有区别的；

any可以被任意赋值，也可以赋值给任意类型

unknown可以被任意类型赋值，但是只能赋值给自身，或者any，其他类型不可以给赋值

unknown没办法读取任何属性，方法也不可以调用

（三）Object

Object，object，{}

原型链的顶端就是Object，包含所有类型

object表示泛型约束，表示非原始类型，支持所有引用类型。

{}是可以定义任意类型，但是不可以更改。

let a:Object = 123
let a1:Object = '3232'
let a2:Object = []
let a3:Object = {}
let a4:Object = ()=>433
let a5:Object = false

// object 是泛型约束，表示非原始类型的, 支持所有的引用类型
// let b:object = 232  // 错误
// let b1:object = 'fewa'  // 错误
// let b2:object = false  // 错误
let b3:object = []  // 正确
let b4:object = {}  // 正确
let b5:object = ()=>24  // 正确

let c:{}  // new Object
let c1:{} = 232
let c2:{} = 'fea'
let c3:{} = {}
let c4:{} = []
let c5:{} = ()=>32
// ！！注意，自变量类型虽然可以定义任意类型，但是不可以更改的
let tt:{} = {name:1}
// tt.age = 3  // 错误的

（四）interface

首字母大写

不能多属性，不能少属性

interface重名，会重合

任意key，后端返回的内容过多，可以使用[]命名

可以设置可选的，只读的

接口继承，extends，可以继承多个

定义函数的类型

interface A{
  name:string
  age:number
  [propName:string] : any
}

interface A{
  like:string
}

let a:A = {
  name:'护发哦',
  age:34,
  like:'玩',
  like3:'玩'
}

interface B extends Bx{
  name:string
  age?:number
  readonly id:string
  readonly cb:()=>boolean
}
interface Bx {
  xxx:string
}
let b:B = {
  id:'2',
  name:'护发哦',
  cb:()=>{
    return false
  },
  xxx:'extends'
}

interface Fn{
  (a:string):number[]
}

const fn:Fn = function(name:string){
  return [1]
}

（五）数组

可以使用number[]，类型加[]定义

可以使用泛型

可以定义interface，使用[]

可以定义二维数组，多维数组 number[][]

可以使用元祖一对一定义

let arr:number[] = [2,3,4,5]
let arr1:boolean[] = [false,true]
let arr2:string[] = ['34','32']

let arr3:Array<string> = ['a','v','c']

interface X{
  name:string
  age?:number
}

let arr4:X[] = [{name:'c',age:32},{name:'d'}]

// 二维数组
let list:number[][] = [[1],[2],[3]]
let list2:Array<Array<number>> = [[1],[2],[3]]
// 大杂烩数组，或者使用元祖一对一
let list3:any[] = [1,'fa',false,{}]
let list4:[number,string,boolean,{}] = [1,'fa',false,{}]

// 函数中
function a(...args:any[]){
  console.log(args);
  // 类数组，没有forEach,伪数组，没有数组的一些方法，有个内置的类型IArguments
  console.log(arguments);  // [Arguments] { '0': 1, '1': 2, '2': '32' }
  // let ar:IA = arguments
  let ar:IArguments = arguments
}

（六）函数

函数定义类型和返回值，箭头函数

函数默认参数，可选参数，默认值和可选参数不能共用

ts里可以定义this类型

函数重载（可以根据传入参数的不同，执行不同的函数，函数名称是一样的）

function add(a:number = 10,b:number = 20):number{
  return a+b
}
const add1 = (a:number,b:number):number => a+b

function add2(a:number,b?:number):number{
  if(b){
    return a+b
  }
  return a
}

interface User{
  name:string
  age:number
}

function back(user:User):User{
  return user
}

interface Obj{
  user:number[]
  abc:()=>void
  havethis:(this:Obj,num:number)=>void
}
// ts可以定义this的类型，js中无法使用，第一个参数必须是this的类型
let obj:Obj = {
  user:[2,4,5],
  abc() {
    console.log(this.user);
  },
  havethis(this:Obj,num:number) {
    this.user.push(num)
  },
}
obj.havethis(53)


// 函数重载
function findNum(add:number[]):number[] // 如果是number[]，进行添加
function findNum(id:number):number[] // 如果是id，进行查询
function findNum():number[] // 如果没有参数，返回所有
function findNum(ids?:number | number[]):number[]{
  if(typeof ids == 'number'){
    return numbox.filter(v=>v == ids)
  }
  else if(Array.isArray(ids)){
    numbox.push(...ids)
    return numbox
  }else{
    return numbox
  }
}

（七）联合类型和断言

可以使用联合类型，如果变量即可以是数字也可以是字符串呢

number | string

interface A{}   interface B{}   A&B  交叉类型

类型断言  as关键字

断言可以欺骗编译器，但不能避免运行中的错误，不可滥用

let phone:number | string = 23232332
phone = '031-3453544'

let fn =  function(type:number|boolean):boolean{
  return !!type
}

// 交叉类型
interface Pople{
  name:string
  age:number
}
interface Man{
  sex:number
}
const xiao = (man:Pople & Man):void =>{
  console.log(man);
}
xiao({
  name:'还好',
  age:232,
  sex:1
})


// 类型断言
let fnn = function(num:number | string):void {
  console.log((num as string).length);

}

（八）内置对象

三部分：

ecma --- Number，Date， RegExp，Error，HTMLHttprequest

dom ---- querySelect，  MouseEvent

bom --- promise，localstorage，location，cookie

let num:Number = new Number(1)
let date:Date = new Date()
let reg:RegExp = new RegExp(/\d/)
let error:Error = new Error('错了')
let xhr:XMLHttpRequest = new XMLHttpRequest()


// HTML(元素的名称)Element HTMLElement Element  或者断言
let div = document.querySelector('div')
// NodeList 数组，可以使用foreach等操作
let dist:NodeList = document.querySelectorAll('input')
// 多个元素的数组  类型不固定
let dist1:NodeListOf<HTMLDivElement | HTMLInputElement> = document.querySelectorAll('input div')


let local:Storage = localStorage
let lo:Location = location
let promise:Promise<number> = new Promise((r)=>r(1))
let cookie:string = document.cookie

（九）class类

class类，继承，约束，implements（可以使用implements来实现一些类共有方法属性的提取）

修饰符 ，readonly，private，protected，public

super，静态方法，get，set

interface Options{
  el:string | HTMLElement
}

interface VueCls {
  options:Options
  init():void
}

class Dom{
//  创建节点
  private createElement(el:string){
    return document.createElement(el)
  }
  // 填充文本
  private setText(el:HTMLElement,text:string | null){
    el.textContent = text
  }
  // 渲染函数
  protected render(data:Vnode){
    
  }
}

// extends 类后，就可以调用类的方法
class Vue extends Dom implements VueCls {
  options: Options
  constructor(options:Options){
    super()  // 父类的prototype.constructor.call
    this.options = options
    this.init()
  }
  static version(){
    // !!! static 只能调用static里的方法和属性，其他的不可以
    return '1.9.0'
  }
  init(): void {
  }
}


// get set
class Ref{
  _value:any
  constructor(value:any){
    this._value = value
  }
  // 相当于拦截器
  get value (){
    return this._value + 'vvvv'
  }
  set value(newVal){
    this._value = newVal + '啊啊啊啊啊'
  }
}

super  相当于父类的prototype.constructor.call（），可以传参，也可以super.xxx()方法调用

静态方法static，类本身调用方法，不用实例化，如Promise.call()

private 只能在类内部使用，子类不能使用，实例化也不能使用。

protected  给内部和子类使用，实例化不能使用。

public 默认为public，都可以使用。

static 只能调用static里的方法和属性，其他的不可以

get，set相当于变量的拦截器，可以进行输入输出的筛选和处理。

（十）抽象类

abstract 定义的类为抽象类，

abstract 定义的方法，只能是描述不能实现

没有abstract的方法可以被实现。

abstract 是基类，不能被实例化，--用于派生继承

abstract class Vue {
  name:string
  constructor(name?:string){
    this.name = name
  }
  getName():string{
    return this.name
  }
  abstract init(name: string): void
}

class React extends Vue{
  constructor(){
    super()
  }
  init(name: string): void {

  }
  setName(name:string){
    this.name = name
  }
}