typescript 学习笔记

keyof 的使用

typescript 的 keyof 关键字, 将一个类型映射为它所有成员名称的联合类型.

interface Person {
    name: string;
    age: number;
    location: string;
}
 
type K1 = keyof Person; // "name" | "age" | "location"
type K2 = keyof Person[];  // "length" | "push" | "pop" | "concat" | ...
type K3 = keyof { [x: string]: Person };  // string


let objj = {
    a: "aaa",
    b: "bbbb"
  }
let key: keyof typeof objj = "a"
// typeof 返回实例对象的'类', keyof 作用于'类型'
// 如果没有上一行的 keyof typeof objj , 这里会报错
console.log(objj[key])
// 解决动态属性获取的解决方法二是 tsconfig.json中 设置 `suppressImplicitAnyIndexErrors: true`

typeof 自动识别实例对象的类型

const obj = {
    name: 'shuai',
    age: 18
}
type Person = typeof obj
/**
type Person = {
    name:string,
    age: num
}
 */

interface 与 type 的区别

见这里
其中: type 可以声明基本类型别名，联合类型，元组等类型

// 基本类型别名
type Name = string
 
// 联合类型
interface Dog {
 wong();
}
interface Cat {
 miao();
}
 
type Pet = Dog | Cat
 
// 具体定义数组每个位置的类型
type PetList = [Dog, Pet]

// 当你想获取一个变量的类型时，使用 typeof
let div = document.createElement('div');
type B = typeof div

tsconfig.json 的 paths 的作用

该字段决定了 ts 文件中调用包的查找路径.
假如 import test from "@/path/to/test", 会先从 src/path/to/test 内找, 找不到再到 src/types/path/to/test 内找,这里找的不一定是包位置,也可能是 .d.ts 声明文件, 声明文件是让 ts 不报错, 真正执行时(编译成js文件后)还是会找到真正包对应的 js 文件.

// tsconfig.json
"baseUrl": ".",
"paths": {
  "@/*": [
    "src/*",
    "src/types/*"
  ],
  "*":[
    "node_modules/*",
    "src/types/*"
  ]
},

泛型约束

如下示例:

function loggingIdentity(arg: T): T {
    console.log(arg.length);  // Error: T doesn't have .length
    return arg;
}

上例中, 我们想访问 arg 的 length 属性，但是编译器并不能证明每种类型都有 length 属性，所以就报错了。
相比于操作 any 所有类型，我们想要限制函数去处理任意带有 .length 属性的所有类型。
只要传入的类型有这个属性，我们就允许，就是说至少包含这一属性。 为此，我们需要列出对于T的约束要求。
我们定义一个接口来描述约束条件。 创建一个包含 .length 属性的接口，使用这个接口和 extends 关键字来实现约束：

interface LengthDefine {
    length: number;
}
 
function loggingIdentity(arg: T): T {
    console.log(arg.length);
 
    return arg;

引入静态文件(如:png)时报错

当使用 import settingIcon from '@/assets/icons/settingIcon.png' 这样的语句时报错 anCnot find module ...

// 新建一个types/index.d.ts 保证这个文件在tsconfig中被include进来
declare module '*.svg'
declare module '*.png'
declare module '*.jpg'
declare module '*.jpeg'
declare module '*.gif'
declare module '*.bmp'
declare module '*.tiff'

持续更新...