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'