08-TS 联合类型+类型断言+交叉类型

// ------------------------- 08 - 联合类型+交叉类型+类型断言
/**
 * 1、联合类型
 * 2、类型断言
 * 3、交叉类型
 */


/**
 *  1、联合类型 |
 *     相当于JS的 或 || 
 */

//    声明变量时 -- 联合类型
let phone:number = 18039344115 // 这是一个手机号 可能后期需求 需要把这里也可以取值输入 座机号(座机号0开头 只能字符串形式 number0开头的 计算机会认为是进制)
let phone1:number | string = '010-18039344115' // 改后的 -- 联合类型(即可以为number也可以是string)
phone1 = 18039344115  // 实现 既可以修改为number类型 也可以为string类型

//    使用函数时 -- 联合类型
let fn9 = (type:number|boolean):boolean=>{
  // 0是false  1是true
  return !!type // 进行强转类型  !!两次取反 强转为boolean类型
}
let res:number | boolean = true  // 例子:假如这是后台返回 0 和 1  转number类型
res = true // 传boolean类型
fn9(res)




/**
 *  2、交叉类型 &
 *     相当于JS的  与 &&
 */

interface Pone{
  name:string,
  age:number,
  sex:string
}
interface X{
  height:string
}
const changtPone =(obj:Pone & X):void =>{
  console.log(obj);
}
let user1:Pone & X= {
  name:'悟空',
  age:24,
  sex:'男',
  height:'180'
}
changtPone(user1)


/**
 *  3、类型断言     --- 禁止滥用
 *      写法 -- 第一种写法 -- 值 as 类型  、   第二种写法 -- (<类型>值)
 *      意思 -- 将一个联合类型断言为其中一个类型  实现覆盖编译器推断的类型  就是告诉编译器 我知道他是什么类型 你别给我推导了
 *      类型断言发生在编译代码时 、 类型转换发生在运行时
 */
// 例子1、第一种写法 -- 值 as 类型   常用
interface FooType{
  a: string,
  b: number,
}
const Foo = {} as FooType // 不会报错缺少属性a和属性b
Foo.a = 'a'
Foo.b = 1
// 例子2、第二种写法 --  <类型>值
interface O {
  run:string
}
interface D{
  build:boolean
}
let changBuild = (obj:O|D)=>{
  // console.log(obj.run) //  正常来说会报错飘红,提示你类型D中 不存在run   
  console.log((<O>obj).run) // 使用类型断言 就是告诉编译器 我知道他是O类型 跟D没关系 你可以不用管
  console.log((obj as O).run); 
}
let changBuildT = (data:any):boolean=>{
  return data as boolean // 断言成boolean类型 即便传入的不是boolean 一样可以覆盖 不过返回的仍然是1 这只是一种欺骗手段
}
changBuildT(1)
changBuild({run:'run'})

// 双重断言
function handler(event: Event)
{
  // 先断言为 any 类型,然后再将整个断言为T类型。
    const element = (event as any) as HTMLElement
}

 原创:前端-悟空 请勿抄袭 可以转载

下一章:

 码云地址:TypeScript: 深入TypeScript 与您同行

Vue-cli是一个官方推出的Vue项目脚手架工具,用于快速搭建Vue项目。tsTypeScript的简称,是一种由微软开发的开源编程语言,它是JavaScript的超集,可以为JavaScript代码添加静态类型检查和封装类、模块等面向对象编程的特性。antd是蚂蚁金服开源的一套基于React封装的UI组件库,提供了丰富的高质量的React组件。 将这三者结合在一起,意味着我们可以利用Vue-cli搭建一个基于Vue和TypeScript的项目,并使用antd组件库来构建界面。这样的项目结合了Vue的简洁、易用和高效性能,TypeScript类型检查和面向对象编程特性,以及antd的高质量UI组件,可以提升开发效率和代码质量。 在使用Vue-cli创建项目时,可以选择使用TypeScript作为项目的开发语言,这样项目就会自动集成TypeScript的相关配置和支持。通过使用Vue-cli提供的命令和配置,我们可以快速搭建一个工程化的项目结构,并集成Webpack等构建工具。 在项目中使用antd组件库时,可以通过npm或者yarn安装antd包,然后在Vue的组件中引入所需的组件,并进行相关配置和使用。antd提供了丰富的UI组件,包括按钮、表单、弹窗、表格等常见的界面元素,可以根据项目需求进行选择和使用。 在使用TypeScript编写Vue项目时,可以利用TypeScript的静态类型检查、类型提示功能,提升代码的可读性和可维护性。同时,可以使用面向对象的编程方式来组织代码,更好地管理和封装组件、模块等。 综上所述,使用Vue-cli搭建一个基于Vue、TypeScript和antd的项目,可以充分发挥各自的优势,提升开发效率和代码质量,同时能够满足丰富的UI界面需求。这样的项目具备良好的可扩展性和可维护性,适合于中大型前端项目的开发。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值