typescript-基础入门
写在前面
JavaScript 是一门弱类型语言，变量的数据类型具有动态性，只有执行时才能确定变量的类型。以往的前端开发过程中，很容易出现以下的报错：
// 读取对象上不存在的属性
Uncaught TypeError: Cannot read property ... of undefined
// 类型错误
TypeError: 'undefined' is not a ...以对象 obj 为例，在 typescript 中可以用接口来定义一个对象类型
interface IObj {
name: string
}
const obj: IObj;通过这种方式限制 obj 的属性类型，在赋值时只能是添加 name 属性，并且不能给 name 赋值 string 以外的类型；每当你获取 obj 属性的值时，会在编译阶段检查该属性是否存在，不存在会提前抛出类型错误。
在变量声明之前做好类型定义，并通过提前暴露和修复这些可能出现的类型错误，可以大大降低应用在运行时出现错误的概率，使得 javascript 应用更加健壮，这一切得益于类型思维。
作用总结为以下几点：
- 类型检查
- 提供更丰富的语法（es6）
- 编译器提示友好
思维方式决定了编程习惯，编程习惯奠定了工程质量，工程质量划定了能力边界
数据类型
number
数字类型，但是new Number(0)这种是对象，并不是数字类型
let num: number = 0;
let num = 0; // 这样也可以，ts 会进行隐性的类型推论，不过还是建议明确定义类型string
let str: string = "str";boolean
let bool: boolean = true;数组
主要有两种方式定义数组类型，一般只能定义数组元素都为某一种类型的数组
let arr: number[] = [1, 2, 3];
let arr: Array<number> = [1, 2, 3];
// 定义一个不确定元素类型的数组
let arr: any[] = [];
// 定义一个只读的数组
let arr: ReadonlyArray<number> = [1, 2];元组
元组可以用于定义一个具有多种类型元素的数组，元素数量已知，并且他们的顺序是确定的
const arr: [string, number] = ["cat", 1];
const arr: [string, number?] = ["cat", 1];
const arr: [string, number?] = ["cat"];
function fn(...args: [number, string]): void;TypeScript 4.0 支持为元组类型设置标签
function fn(...args: [age: number, id: string]): void;枚举
列出所有可用值，默认初始值是 0。常用于状态值管理等
enum MyPets {
cat = "lazy cat",
dog,
mouse,
}
let cat: MyPets = MyPets.cat;枚举的原理其实也很简单，相当于定义对象时多做了 value–>key 的映射，以上面的代码为例
var MyPets;
(function (MyPets) {
MyPets["cat"] = "lazy cat";
MyPets[MyPets["dog"] = void 0] = "dog";
MyPets[MyPets["mouse"] = void 0] = "mouse";
})(MyPets || (MyPets = {}));null
类似于 js 的 null，是所有类型的子类型
undefined
类似于 js 的 undefined，是所有类型的子类型
void
当函数没有返回值时，可以直接用 void 定义返回值类型。
function func(): void {
...
}声明一个 void 类型的变量没有什么用，因为你只能将它赋值为 undefined 和 null
unknown
所有类型都可以分配给 unknown，但只能将 unknown 类型的变量赋值给 any 和 unknown
any
声明一个 any 类型的变量，它可以赋给任何类型值，也可以接受任何类型值，也就意味着放弃对这个变量的类型检查，不建议使用。
let demo: any = 2; // 接受任何类型值
let demo_2: string;
demo_2 = demo; // 赋给任何类型值any 和 unknown 的最大区别是, unknown 是 top type (任何类型都是它的 subtype) , 而 any 即是 top type, 又是 bottom type (它是任何类型的 subtype ) ,这导致 any 基本上就是放弃了任何类型检查.
never
当一个函数永远不会返回时，我们可以声明返回值类型为 never
function func(): never {
throw new Error("never reach");
}可以利用 never 在类型收窄时做全面性的检测，防止后面对 TPayload 的意外修改，确保类型安全
type TPayload = number | string;
function func(payload: TPayload) {
if (typeof payload === "number") {
return 0;
} else if (typeof payload === "string") {
return "";
} else {
const res: never = payload;
return res;
}
}接口
接口（interface）常用于定义对象类型
interface IObj {
name: string;
age?: number; // 可选
readonly type: string; // 只读属性，只能在创建的时候赋值
[key: string]: string; // 索引类型，允许定义多个key为string的string类型值
}同名接口会合并成员，如果有相同的成员，必须为同类型，否则编译器会报错。
interface IObj {
name: string;
func(id: string): string;
}
interface IObj {
age: number;
func(id: number): number;
}
// 相当于
interface IObj {
name: string;
age: number;
func(id: number): number;
func(id: string): string;
}更详细的合并规则可以参考 typescript 的声明合并
函数
定义入参和返回值类型，必传参数可具有默认值
// age是可选参数，需要放在必传参数name后面
function func (id: string = '007', num?: number): string {
...
}
let func: (a: string) => string = function(a: string): string{
return 'JacksonZhou'
}也可以通过接口定义函数，分为 callable 和 newable 两种形式
// callable
interface Func {
(id: number, ...others: any[]): string;
}
const fn: Func;
// newable
interface NewFunc {
new (): string;
}
const fn: NewFunc;
new fn();函数重载
function func(a: number, b: number);
function func(a: string, b: string);
function func(a: number, b: number, c: number) {
//...
}函数重载的原理是重新定义所有重名函数，并放到一个列表里，匹配函数时会从上到下，通过匹配参数类型来选择指定函数
interface 和 type 的区别是啥？
交叉类型
let id: string & number;联合类型
联合类型的变量在被赋值的时候，会根据类型推论的规则推断出一个类型；
let id: string | number;
id = "2";
console.log(id.length);
id = 2;
console.log(id.length); // 报错，数字类型没有length属性类型断言
对类型有把握但是又不能准确定义的时候，可以使用类型断言
常规断言(<> or as)：
const id: any = "hello";
const length = (id as string).length;
// const length = (<string>id).length;实际开发中使用的几率不大，比如下面这种情况就可以使用断言来规避编译报错
interface Cat {
name: string;
run(): void;
}
interface Fish {
name: string;
swim(): void;
}
function isFish(animal: Cat | Fish) {
if (typeof (animal as Cat).run === "function") {
return true;
}
return false;
}非空断言(!)：
function fn(maybeString: string | undefined | null) {
const onlyString1: string = maybeString; // Error
const onlyString2: string = maybeString!; // Ok
}
function fn(getNum: () => number | undefined) {
const num1 = getNum(); // Error
const num2 = getNum!(); // OK
}类型守卫
类型守卫指的就是可执行运行时检查的一种表达式，用于确保该类型在一定的范围内，主要有以下几种方法检测类型：
- in
- typeof
- instanceof
- is
function isNumber(x: any): x is number {
return typeof x === "number";
}泛型
简单讲，可以将类型作为参数，用来定义未来的数据类型，参考 https://www.tangshuang.net/7473.html
function func<T>(arg: T): T {
return arg;
}
let func_1 = func<string>("cat");
let func_2 = func("cat");类
typescript 对类属性的访问控制
| 可访问性 | public | protected | private |
|---|---|---|---|
| 类 | yes | yes | yes |
| 子类 | yes | yes | no |
| 类实例 | yes | no | no |
class Cat {
name: string; // 这个是 this.name 的类型定义
food: string;
constructor(name: string, food: string) {
this.name = name;
this.food = food;
}
eat() {
console.log(this.name + " eat " + this.food);
}
}
let myCat: Cat = new Cat("Tom", fish);
console.log(myCat.eat());操作符
?.
可选链，在引用某个对象的属性时，会经常用到，在遇到 undefined 和 null 时会立即阻止表达式的运行，并返回 undefined，编译后的 es5 代码如下：
a?.b?.c
(_a = a === null || a === void 0 ? void 0 : a.b) === null || _a === void 0 ? void 0 : _a.c;void 运算符能对给定的表达式进行求值，然后返回undefined，在这里void 0就相当于undefined，为什么不直接用undefined呢？原因是undefined并不是保留字，它只是全局对象的一个属性，虽然在 es5 是全局对象的一个只读属性，但是在局部作用域中依然可以被重写。
??
更多人会接触到短路操作符 ||，常用于数据兜底，但是它会影响 falsy
值，包括’'、0、false、undefined、null…，而 ?? 只会影响 undefined 和 null。?? 不能和 || 或者 && 并用，会报 SyntaxError 错误，但是可以用括号定义运算优先级来避免这种错误
!非空断言
可以用于忽略 undefined 和 null
function myFunc(id: string | undefined | null) {
const myId: string = id; // Error
const ignoreUAndN: string = id!; // Ok
}
function myFunc(fn: Function | undefined) {
fn!(); // Ok
}内置对象
object/Object/{}
- object - 表示非原始类型
- Object - 所有 Object 类的实例的类型
// node_modules/typescript/lib/lib.es5.d.ts
interface Object {
constructor: Function;
toString(): string;
toLocaleString(): string;
valueOf(): Object;
hasOwnProperty(v: PropertyKey): boolean;
isPrototypeOf(v: Object): boolean;
propertyIsEnumerable(v: PropertyKey): boolean;
}
interface ObjectConstructor {
// Object 类的所有实例都继承了 Object 接口中的所有属性
new (value?: any): Object;
(value?: any): any;
readonly prototype: Object;
getPrototypeOf(o: any): any;
// ···
}
declare var Object: ObjectConstructor;- {} - 没有成员的对象
DOM
Document、HTMLElement、Event、NodeList
其他
Boolean、Error、Date、RegExp