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
  }
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值