//基础类型标注
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
}
Last modification:June 29th, 2021 at 11:44 pm
© The copyright belongs to the author