TypeScript的学习笔记

251 阅读2分钟

备注: 仅作为个人学习笔记使用。

泛型

将类型作为变量, 只有在调用的之后才会知道具体的值。

1. 泛型类型别名

// 使用type作为类型别名
type Cart<T> = { list: T[] } | T[];
// 联合类型
let c1: Cart<string> = {list: ['1']};
let c2: Cart<number> = [1];

泛型接口(interface)和泛型类型别名(type)的区别

  1. 接口创建了一个新的名字, 它可以在其他任意的地方被调用。而类型别名并不创建新的名字。

    例如报错信息就不会使用别名

  2. 类型别名不能被extends和implements,这时我们应该尽量使用接口代替类型别名。

  3. 当我们需要使用联合类型或者元祖类型的时候, 类型别名会更合适。

2. 泛型接口

当接口的类型也需要使用时才知道具体类型的时候, 可以使用泛型接口来定义

interface Animal<T> {
  list: T[]
}

class Cat: Animal<string> = {
  list: ["1", "2", "3"]
}

3.泛型的约束

给某一个泛型接口拓展属性

interface LengthWise {
  length: number
}

function setArr<T extends LengthWise>(val: T) {
  return val.length
}

setArr('越祈')

4. 默认泛型

泛型也可以传入默认值, 如果不传的话优先取默认值

function createArray<T = number>(length: number): T {
    let t: T | null = null;
    return t
  }
	
	let result = createArray<boolean>(3)

5. 多个类型参数

可能会存在多个不同的泛型参数

思考: 如何在不增加中间变量的情况下, 交换两个变量的值

function swap(A, B)(tuple: [A, B]): [B, A] {
  return [tuple[1], tuple[0]]
}

映射类型

定义类型的时候使用in操作符去批量定义

interface Persion {a\
   name: string;
   age: number
}

type PartialPersion = {
  [key in keyof Persion]?: Persion[key]
}

类型保护

typeof 可以获取一个变量的类型(待更新)

函数的实现

interface Calculate {
  <T>(a: T, b: T): T
}
   
let add:Calculate = function<T>(a:T, b:T): T {
	return a      
}

声明文件的书写 x.d.ts

项目中描述js库或者模块信息的文件, 可以为开发者或者使用的第三方库提供静态类型检查和提示。

书写位置:

  1. 开发npm包时, 可以在 package.json中指明**"types": "./index.d.ts"**

     {
     	  "name": "vk-parse-sdk",
        "version": "1.0.0",
        "types": "./index.d.ts"
     }
    
  2. 在src下面新建@types目录,在其中编写.d.ts声明文件, 声明文件会自动被识别。 注意在tsconfig中要配置includes字端

  3. 在x.js相同目录下面创建同名的声明文件x.d.ts。