TS:第三章 常用语法

112 阅读2分钟

ts的联合类型

  1. 联合类型 关键字符 |
    let age:string | number = '18';//可以理解为age可以是string类型也可以是number类型的值;
    age = 18
  1. 类型缩小
    function printArgument(id:string,number) {
        //因为number类型是没有length方法的所以需要进行类型缩小;才能调用length;
        if(typeof id === "string"){
               console.log(id.length);
        }
    }

ts中定义接口

    interface IPerson {
         name:string, // 字符串类型
         age:number  //数字类型
         idCard?:number // ?代表这个字段可有可无
    }
    
    
    //下面复习一下type的定义
    type person = {
        name:string, // 字符串类型
         age:number  //数字类型
         idCard?:number // ?代表这个字段可有可无
    }

type 与 interface区别

  1. type比interface定义的范围更广; 接口只能用来声明对象
  2. 在声明对象时, interface可以多次声明; 并且会合并
  3. type不允许两个相同名称的别名同时存在;
  4. interface支持继承
  5. 如果是非对象类型的定义使用type, 如果是对象类型的声明那么使用interface

ts中的交叉类型 &

  1. 俩种类型同时满足 A&B
    interface A {
        name:string
    }
    
    interface B {
        age:number
     }
     
     type ABToghter = A & B;
     //info 必须同时满足A B 俩个接口
     const info:ABToghter = {
         name:'lxl',
         age:18
      }

ts 的类型断言

  1. 给某个变量指定特定的类型
  2. 断言只能断言成更加具体的类型, 或者 不太具体(any/unknown) 类型
const name1: string = 'lxl';
const name2 = name1 as any;  //name2 为 any 类型
const name3 = name2 as string; // name3 为string类型

ts 非空类型断言

  1. 关键字 !
  2. 可选链 mdn 可选链运算符(?.) - JavaScript | MDN (mozilla.org)
//复习一下es11的?. 可选链操作
//如果不能确定哪些属性必定存在,可选链运算符也是很有帮助的。
interface IPerson {
  name: string
  age: number
  friend?: {
    name: string
  }
}

const info: IPerson = {
  name: "why",
  age: 18
}
console.log(info.friend) //这样会报错,并且程序会终止
console.log(info?.friend) //这样会直接输出undefined

//如何保证访问不报错呢?
//1.缩小类型
if(info?.friend) {
    console.log(info.friend)
}

//2.非空类型断言  注意 非空类型断言(有点危险, 在确保friend一定有值的前提, 才能使用)
if(info!.friend) {
      console.log(info.friend)
}
    

ts 的字面量类型

const name: "lxl" = "lxl"
let age: 18 = 18

// 2.将多个字面量类型联合起来 |
type Orientation = "east" | "south" | "west" | "north"
const o1: Orientation = "north"