typescript详解

// // ts中
// // number 是数字类型
// // string 是字符串类型
// // boolean 是布尔类型
// // null 和 undefined 是所有类型的子类型

// let num: number = 1
// num = null
// num = undefined
// console.log(num)

// // 数组
// let arr: string[] = ['1', '2']
// let arr1: Array<number> = [3, 4]

// //元组
// //元组: 既控制数组的数量,又控制每一项的数据类型
// let arr2: [string, boolean, number] = ['1', false, 3]

// // 枚举
// // 枚举表示独一无二的值,定义之后不会变化. 枚举主要用来查询数据
// // 可以根据数据名称找到具体值的位置.也可以通过下标找到指定的值
// enum BookNames {
//   'a' = 1,
//   'b',
//   'c'
// }
// console.log(BookNames)
// console.log(BookNames.a)
// console.log(BookNames[2])

// // any 表示任何类型的数据
// // 当变量定义的时候,还不知道要传入什么数据时使用
// let test: any

// test = 1
// test = '12'
// console.log(test)

// // void 表示没有任何值(不关心结果.一般配合函数使用)
// // void配合函数,表示函数可以不写返回值

// function fn(): number {
//   return 1
// }

// function fn1(): void {}

// let test1: void
// // test1 = 1
// // test1 = '1'
// // test1 = false
// // test1 = null
// // test1 = undefined

// // object 表示非原始类型(除了string,number,boolean之外的数据)
// let obj: object

// obj = 1
// obj = new Date()
// obj = {}
// obj = []
// obj = () => {}

// // 联合类型  就是变量或者是形参的数据类型可能是多个指定类型中一个
// let uniVar: string | number
// uniVar = '123'
// uniVar = 456
// uniVar = false
// // 联合类型的主要应用场景, 函数的形参
// function fn2(x: string | number) {}

// fn2('123')
// fn2(456)
// fn2({})

// 需求: 如果x传入的是数字,x转成字符串返回长度,如果本来就是字符串,就直接返回长度
// 如果按照js以前的逻辑去写,代码逻辑肯定可以正常执行,但是ts检查代码的时候,认为如果x数数字,
// 数字就没有length.所以可能会出错
// function getLength(x: number | string) {
//   // return x.length // error
//   if (x.length) {
//     // error
//     return x.length
//   } else {
//     return x.toString().length
//   }
// }

// 断言:我不要你觉得,我要我觉得
// 断言的两种写法:
// 1. <数据类型>变量
// 2. 变量 as 数据类型
// 告诉ts. 让ts放心,肯定传的是字符串
function getLength(x: number | string) {
  // return x.length // error
  if ((<string>x).length) {
    // error
    return (x as string).length
  } else {
    return x.toString().length
  }
}

console.log(getLength(123))

 

接口

// 接口
//定义接口 interface是一个关键字,用于定义接口
// 可选属性: 属性名后面加 ? ,表示属性可有可无无.如果不写?.那么属性就是必须写的
// 只读属性: 在属性前面加一个关键字 readonly
interface Iobj {
  readonly id: number
  name: string
  age?: number
}
// 定义对象
// 对象:接口. 对象就要遵守接口的规范了
const obj: Iobj = {
  id: 1,
  name: 'zs'
  //   age: 123
}

// console.log(obj.id)
// obj.id = 89
// console.log(obj.id)

// 函数接口

interface Ifn {
  //返回值必须是number
  (x: number, y: number): number
}

// 函数申明不能搞接口
// function fn(){

// }
const fn: Ifn = (x: number, y: number) => {
  return 1
}

fn(1, 2)

// 类接口

interface IWheel {
  wheelType: string
  // roll() 表示这个属性对应的是一个函数
  // roll():数据类型: 表示roll这个函数应该返回一个字符串
  roll(): string
}

interface Light {
  //不关注函数返回值的类型
  lightOn(): void
  lightOff(): void
}

// 接口还可以继承接口
// Ioption 继承IWheel, Light这两个接口
interface Ioption extends IWheel, Light {
  color: string
}

// 类和接口绑定使用的是implements这个关键字,关联多个接口
// class Car implements IWheel, Light {
//   wheelType = '防滑轮胎'
//   roll = () => {
//     return '车轮动起来了'
//   }
//   lightOn = () => {
//     console.log('开灯')
//   }
//   lightOff = () => {
//     console.log('关灯')
//   }
// }

class Car implements Ioption {
  wheelType = '防滑轮胎'
  roll = () => {
    return '车轮动起来了'
  }
  lightOn = () => {
    console.log('开灯')
  }
  lightOff = () => {
    console.log('关灯')
  }
  color = 'pink'
}