Ts 是什么
- TypeScript 是 JavaScript 的一个超集，其静态类型检查可以让开发者在开发阶段就可以发现代码中隐藏的错误，弥补了 JS 的不足。
而且 TypeScript 提供最新的和不断发展的 JavaScript 特性，开发的时候你可以愉快的使用这些新特性，
TS 编译后会转为浏览器可以直接运行的 JavaScript 代码
TS 基础类型
boolean、number、string、[]、元组（定义数组各位置类型）、null、undefinedenum 枚举，下标从 0 开始anyunknown 所有类型都可以分配给 unknown，我们只能将 unknown 类型的变量赋值给 any 和 unknown。never 不可到达的类型， never 仅能被赋值给另外一个 never 类型void void 类型像是与 any 类型相反，它表示没有任何类型。void 类型的变量没有什么大用，因为你只能为它赋予 undefined 和 null。
类型断言
类型守卫
- 联合类型中我们只能访问共同拥有的成员。
- 处理方法，断言
interface Bird {
fly();
layEggs();
}
interface Fish {
swim();
layEggs();
}
function getSmallPet(): Fish | Bird {}
let pet = getSmallPet();
pet.layEggs();
pet.swim();
if (pet.swim) {
pet.swim();
} else if (pet.fly) {
pet.fly();
}
if ((<Fish>pet).swim) {
(<Fish>pet).swim();
} else {
(<Bird>pet).fly();
}
function isFish(pet: Fish | Bird): pet is Fish {
return (<Fish>pet).swim !== undefined;
}
if (isFish(pet)) {
pet.swim();
} else {
pet.fly();
}
instanceof / in / typeof 关键字
交叉类型和联合类型
- 联合类型
let a: number | string | undefined
- 类型别名
type A = number | string | undefined
- 交叉类型 交叉类型是将多个类型合并为一个类型。 这让我们可以把现有的多种类型叠加到一起成为一种类型，它包含了所有类型的特性。
类型 type 和接口 interface 的区别
- interface 能够声明合并，type 不能同名
interface User {
name: string;
age: number;
}
interface User {
sex: string;
}
- type 可以声明基本类型别名，联合类型，元组等类型
type Name = string;
interface Dog {
wong();
}
interface Cat {
miao();
}
type Pet = Dog | Cat;
type PetList = [Dog, Pet];
什么是泛型
- 泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。
- 泛型可以理解为多个类型，通过一些类型变量增加重用性
- 也可以通过
extends 关键字来约束
- 泛型参数默认类型
interface A<T=string> { name: T; }
- 泛型条件类型
T extends U ? X : Y
关键字 in keyof typeof
- keyof 获取接口或类型的键名，返回的是联合类型
- typeof 获取常量的类型
- in 遍历联合类型
- infer
type ParamType<T> = T extends (...args: infer P) => any ? P : T;
interface User {
name: string;
age: number;
}
type Func = (user: User) => void;
type Param = ParamType<Func>;
type AA = ParamType<string>;
内置类型别名
Partial 改所有键值为可选 type TPartialUser = Partial<IUser>;
type Partial<T> = {
[P in keyof T]?: T[P];
};
interface IUser {
name: string;
age?: number;
}
type TPartialUser = Partial<IUser>;
Required 改所有键值为必选 type TRequiredUser = Required<IUser>;
type Required<T> = {
[P in keyof T]-?: T[P];
};
interface IUser {
name: string;
age?: number;
}
type TRequiredUser = Required<IUser>;
Readonly 将传入属性变为只读
type Readonly<T> = {
readonly [P in keyof T]: T[P];
};
Pick 将某个类型中的子属性挑出来，变成包含这个类型部分属性的子类型。
type Pick<T, K extends keyof T> = {
[P in K]: T[P];
};
interface Todo {
title: string;
description: string;
completed: boolean;
}
type TodoPreview = Pick<Todo, 'title' | 'completed'>;
const todo: TodoPreview = {
title: 'Clean room',
completed: false,
};
Record 的作用是将 K 中所有的属性的值转化为 T 类型。
type Record<K extends keyof any, T> = {
[P in K]: T;
};
interface PageInfo {
title: string;
}
type Page = "home" | "about" | "contact";
const x: Record<Page, PageInfo> = {
about: { title: "about" },
contact: { title: "contact" },
home: { title: "home" },
};
Exclude 将某个类型中属于另一个的类型移除掉
type Exclude<T, U> = T extends U ? never : T;
type T0 = Exclude<"a" | "b" | "c", "a">;
Extract 与 Exclude 恰好相反, 代表取出对应值
type Extract<T, U> = T extends U ? T : never;
type T0 = Extract<"a" | "b" | "c", "a">;
ReturnType 的作用是用于获取函数 T 的返回类型。
type ReturnType<T extends (...args: any) => any> = T extends (
...args: any
) => infer R
? R
: any;
其它
let x!: number[];
initialize();
x.push(4);
function initialize() {
x = [0, 1, 2, 3];
}
type A = {
key1?: {
key1_1: number;
};
};
const a: A = {
key1: {
key1_1: 1,
},
};
console.log(a.key1!.key1_1);
type A = {
key1?: {
key1_1: number;
};
};
const a: A = {
key1: {
key1_1: 1,
},
};
console.log(a.key1?.key1_1);
let x = foo ?? bar();
function A() { console.log('A was called'); return undefined;}
function B() { console.log('B was called'); return false;}
function C() { console.log('C was called'); return "foo";}
console.log(A() ?? C());
console.log(B() ?? C());
.d.ts 声明文件作用
- 当使用第三方库时，我们需要引用它的声明文件，才能获得对应的代码补全、接口提示等功能。
- declare var 声明全局变量
- declare function 声明全局方法
- declare class 声明全局类
- declare enum 声明全局枚举类型
- declare namespace 声明（含有子属性的）全局对象
- interface 和 type 声明全局类型
- export 导出变量
- export namespace 导出（含有子属性的）对象
- export default ES6 默认导出
- export = commonjs 导出模块
- export as namespace UMD 库声明全局变量
- declare global 扩展全局变量
- declare module 扩展模块
- /// 三斜线指令
tsconfig 配置文件
module.exports = {
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"lib": [],
"allowJs": true,
"checkJs": true,
"jsx": "preserve",
"declaration": true,
"sourceMap": true,
"outFile": "./",
"outDir": "./",
"rootDir": "./",
"removeComments": true,
"noEmit": true,
"importHelpers": true,
"isolatedModules": true,
"strict": true,
"noImplicitAny": true,
"strictNullChecks": true,
"noImplicitThis": true,
"alwaysStrict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"moduleResolution": "node",
"baseUrl": "./",
"paths": {},
"rootDirs": [],
"typeRoots": [],
"types": [],
"allowSyntheticDefaultImports": true,
"sourceRoot": "./",
"mapRoot": "./",
"inlineSourceMap": true,
"inlineSources": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true
},
"files": [],
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
],
"extends": "./configs/base",
}
@type / d.ts 区别
- @type 第三方包提供的 ts 声明文件
- d.ts 自行声明的
资料
