typescript详解

2020-09-01 07:32:35 阅读：174 来源： 互联网

标签：typescript console log number 接口详解 return string

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

标签：typescript,console,log,number,接口,详解,return,string
来源： https://www.cnblogs.com/fsg6/p/13594059.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

typescript详解