Typescript 学习笔记

//基础类型标注
let title:string = '第一个ts程序'
let n:number = 1
let b:boolean = true
b = undefined
//null 和undefind 是其他类型的子类型
let a:null
let c:undefined
//隐藏问题 d为null 不应该有toFixed方法 代码没有报错 可以在配置文件中进行严格类型检查 "strictNullChecks": true,
let d:number;
d = null
d.toFixed(1)

//过滤值为null 的情况
let ele = document.querySelector('span')
if(ele) ele.style.display = 'none'

//对象类型

let _o:object = {}
let arr:Array<number> = [1,2,3]
let da:Date = new Date()

//自定义对象类型
let _obj:{name:string,age:number} = {
  name:'w',
  age:1
}
//接口 定义类型【接口只能作为类型标注使用，不能作为具体的值，只是一种抽象的结构定义，并不是实体，没有具体的功能实现】
//简单的讲就是不能作为值来赋值
interface Person {
  name:string,
  age:number
}
let userInfo:Person = {
  name:'xiao',
  age:1
}
let userInfoX:Person = {
  name:'大王',
  age:3
}
//定义应该传入的参数
interface AjaxParams {
    url:string,
    method:string
}
function post(option:AjaxParams){

}
//会有参数提示 很强
post({
  url:'',
  method:''
})

//对象类
class Personal {
  constructor(public name:string,public age:number){

  }
}
let xiaoli = new Personal('xiaowangba',12)

//包装对象
let s:string;
s = '1'
//s = new String() //new String() 是包装对象  string:字符串 Sting():字符串对象 【Sting() 包含string】

//数组类型 ，数组中存储的类型必须一致

let ary:Array<number> = [1,2,3] //<number> 泛型
ary.push(1)
//ary.push('s') //报错
//简单数组类型标注
let sary:string[] = ['1','2','3']
sary.push('1')
//sary.push(1) // 报错

//元组类型

let data:[string,number];
data.push(1)
// data.push(true) //error

//枚举类型
//key 不能是数字
//value可以是数字【称为数字枚举】也可以是字符串【字符串枚举】，但不能是其他值，默认为数字：0
//第一个枚举默认值为0
//非第一个枚举值为上一个数字枚举值 +1
//枚举为只读 初始化后不可以修改
enum HTTP_CODE_C {
  OK //他的默认值为0
}
enum HTTP_CODE {
  OK = 200,
  NOT_FOUND = 404,
  NEXT_CODE //非第一个枚举值为上一个数字枚举值 +1 【405】

}
// HTTP_CODE.OK = 1  error 只读不能被修改

//字符串枚举

enum URLS {
  LOGIN = 'user/login',
  USERINFO = 'user/userInfo',
//OTHER  [error 如果前一个枚举值为字符串类型，那么后续枚举值必须手动赋值]
  OTHER = 1
}

//无值类型 void[表示没有任何数据的类型，通常用于标注无返回值函数的返回值类型，函数默认标注类型为void]
function fn():void{
  //没有return 或return undefined
}

//Never 类型 【一个函数永远不肯能执行return 比如死循环】

function errfn():never{
  throw new Error('error')
}

//任意类型
//不确定这个值是什么类型或者不需要对该值进行检查，就可以标注为any类型
//一个变量声明未赋值未标注 默认为any 类型
let an:any; //有任意属性和方法 等于放弃了类型检查 不建议使用[config 设置配置 "noImplicitAny": true,]

//未知类型 unknown
let cunknown:unknown = 'nin';
let cc:number = 1
//cc = cunknown //unknown 类型只能赋值给any 和 unknown 并且没有任何属性和方法

//函数类型

function fnv(x:number,y:number):number{
  return x+ y 
}

let v:number = fnv(1,2)




//接口【第二章】
//接口：对复杂对象类型进行标注的一种方式，接口中多个属性之间可以使用逗号或者分号进行分割
//注意接口是一种类型，不能作为值去使用
interface Point {
  x:number,
  y:number,
  color?:string, //可选属性【?】
  readonly z:number //readonly 只读属性
  [key:string]:number | string //任意属性 【key 只能是string 和number】
}
let p:Point = {
  x : 1,
  y : 2,
  z : 3
}
//添加任意属性
//数字索引是字符串索引的子类型
p.m = 2
p[0] = 90

//使用接口描述函数

interface IFunc {
  (x:number,y:number):number
}

let inFn:IFunc = function(a:number,b:number):number{
  return a + b
}

function todo(callback:IFunc){
   callback(1,2)
}

todo(function(a:number,b:number):number{
  return a+b
})
//
interface IEventFunc {
  (e:MouseEvent):void
}

function on(el:HTMLElement,evname:string,callback:IEventFunc){

}
let dom = document.querySelector('div')
if(dom){
  on(dom,'click',(e) =>{
    e.clientX
  })
}

//接口合并

interface Box {
  height?:number,
  width:number,
}

interface Box {
  height?:number,
 // width:string, 报错  标注类型必须一致
}
interface Box {
  color:string,
  padding?:number,
  opacity:number | string
}

function setCss(option:Box):void{
    let div = document.querySelector('div')
    if(div){
      div.style.color = option.color
    }
}

setCss({color:'#000',width:233,opacity:'0.9'})

//联合类型 opacity:number | string
setCss({color:'#000',width:233,opacity:0.9})

//交叉类型
interface o1 {
  x:number,
  y:number
}
interface o2 {
  z:string

}
let o:o1 & o2 = Object.assign({},{x:1,y:2,z:'z'})
// o.x y z 

//字面量类型
type dirs = 'left'|'top'; // 起别名
function setPosition(ele:Element,dir:'left'|'top'){

}
let doms = document.querySelector('div')
if(doms){
  setPosition(doms,'left')
}

//interface 与type 区别
//interface只能描述 object/class/function ;同名自动合并利于扩展
//type  不能重名  能描述所有数据

//类型推导

let ds ='你好' //自动推导类型为string
function dsff(ds = 1){
  return 'ewew'
}


//类型断言

let img = document.querySelector('#img')
if(img){
 // (<HTMLImageElement>img).src //自己规定类型HTMLImageElement
// (img as HTMLImageElement).src
}