TS入门

TS声明数据

• 普通数据类型

  // 布尔值
  let bool:boolean = false
  bool = 1 // 不能将类型“number”分配给类型“boolean”。ts(2322)
  
  // Number
  let isNaN: number = NaN
  isNaN = 666
  
  // String 
  let str:string = 'string'
  
  let u: void = undefined; // undefined 相反，void不能赋值给undefined
  // void 常用于表示函数是否有返回值
  // undefined和null可以赋值给任意类型
  
  // 联合类型
  let str:string | number = 'string' // 可以选择多种类型 使用 | 分隔
  str = 666
  // 在vue3中 
  let str = ref<string>('str')
  
  // 其他同上

• 任意值

  let data // 只声明 未赋值，此时可以对他进行任何类型的复杂
  data = 1
  data = 'string'
  
  let num = 666 // 这个时候虽然没有声明数据类型，但是在第一次赋值的时候，会隐式的声明一个初始化值的类型
  // 现在这个num是number类型了
  
  let data2: any = 6
  data2 = 'string' // any 任意类型

• 数组与对象（接口，泛型）

  interface Data {
    name:string,
    age:number
  }
  let data: Data  = {
    age:'1',
  };
  const data: Data = reactive({
    a:1
  })
  // 使用interface定义一个接口 定义数据时要按照接口里所约束的属性定义，包括数量，类型
  
  // 数组
  let arr: number[] = [1,2,3] // 表示定义一个由number类型组成的数组
  let str = ref<string[]>([])
  // 泛型 同上
  let arr: Array<number> = [1, 1, 2, 3, 5]
  let arr: Array<number | string> = [1, 1, 2, 3, 5,'str']
  
  let arr: string [][] = [['str'],['str2']] // 多维数组
  
  let a: [number, string] = [1, "2"] // 元组 length 类型一一对应

• 泛型

  // 泛型有什么用？
  const fn = (a: number | string, b: number | string): Array<number | string> => a + b;
  // 假如我定义了一个公用的方法，但是希望避免：这种fn(1,'abc'),参数1与参数2不同类型的情况。
  // 那么可以改写为如下
  type Fn<T> = (a: T, b: T) => T;
  const fn: Fn<number> = (a, b) => a + b
  // 泛型使用上类似函数，定义一个形参，使用时再传参
  type Ls<T> = T | T[];
  type P<B> = Ls<B>;
  let a: P<boolean> = false;

• 函数

  // 定义函数的几种方法
  // 1.
  const fn = (a: number, b: number): void => {
  	console.log(a, b);
  	return a + b; // 不能将类型“number”分配给类型“void”。ts(2322)
  };
  // 2.
  const fn: (a: number,b :number) => void = (a,b) =>{
  	console.log(a, b);
  }
  // 3.
  type Fn = (a: number, b: number) => void
  const fn: Fn = (a,b) =>{
  	console.log(a,b);
  	return 1; // 这里有问题
  }
  fn(1,2);

• 可选参数，断言，别名等

  // 可选参数
  interface Data {
    name:string,
    age?:number // 问号表示该值为可选参数
  }
  let data: Data  = {
    age:18
  };
  
  const fn = (a: number, b?: number): number => a + b;
  
  const fn = (a:number,b: number = 60)=>{ // 如果使用了ES6默认参数，那么这个形参默认为可选参数
      console.log(a+=b)
  }
  const fn = (a: number, ...rest: any[]): number => {}; // 剩余值
  
  let a: number | string = 某个未知类型的数据;
  console.log(a.length); // 现在会报错，类型“number”上不存在属性“length”；因为联合类型的数据只能访问他们共同的属性。
  console.log((a as sting).length) // 将他断言为string类型
  // 但是断言不能转换数据类型，只能使其编译成功

• interface和type有什么区别。

  • type适用于基本类型，interface只能定义对象类型。
  • type只是创建类型别名，不会新创建类型，interface会创建新的类型。
  • type通过 & 符实现联合类型，interface通过extends实现继承。
  • type不可重复申明，interface可以重复申明用为扩展。
  • …

• 常见内置方法

  • Partial 复制一个类型，新类型所有属性都为可选项。

    interface Person {
      Name: string,
      PassportID: string
    }
    
    type Person = Partial<Person> // 等同于以下
    
    interface Person {
      Name?: string,
      PassportID?: string
    }
    
    // 用法：
    type NewPerson = Partial<Person>
    
    const User: Partial<Person> = {
      Name: 'xx'
    };

  • Required 与 Partial相反，Required会复制一个类型，并且所有属性都为必选。

  • Pick 复制一个新类型，但只保留指定属性。

    interface Person {
      Name: string,
      PassportID: string,
      OrgID: number,
    }
    // Pick<T, K>
    type Person = Pick<Person, 'Name' | 'OrgID'> // 等同于以下
    
    interface Person {
      Name: string,
      OrgID: number,
    }
    // 用法
    type Person = Pick<Person, 'Name' | 'OrgID'>
    
    const User: Pick<Person , 'Name'> = {
      Name: 'xx',
    };

  • Omit 删除类型中指定的key

    interface Person {
      Name: string,
      PassportID: string,
    }
    
    // Omit<T, K>
    type Person = Omit<Person, 'Name'> // 等同于
    
    interface Person {
      PassportID: string,
    }

  • Exclude 排除类型

    type A = 'a' | 'b' | 'c'
    type B = 'a' | 'b'
    
    type C = Exclude<A, B> // 等同于
    type C = 'c'

  • Extract 和 Exclude 相反，新类型取其交集。

  • Readonly 设置为只读类型。

  • …