TypeScript 前端复习必读

182 阅读2分钟

一、前言——TS各种工具类型的库

github.com/millsp/ts-t…;

github.com/sindresorhu…;

github.com/piotrwitek/…;

github.com/krzkaczor/t…;

github.com/type-challe…;

二、记录——TS开发知识点

一、xxxx.d.ts || xxxx.ts 声明文件

TypeScript 的设计目标之一是让你在 TypeScript 中安全、轻松地使用现有的 JavaScript 库,TypeScript 通过声明文件来做到这一点

声明文件的定义: 通过 declare 关键字来告诉 TypeScript,你正在试图表述一个其他地方已经存在的代码。环境声明就好像你与编译器之间的一个约定,是一个文档。

声明文件的特点: 1、如果一个声明文件的顶层作用域中有 import || export,那么这个声明文件就是一个模块类声明文件,不会在全局生效,需要按模块的方式导出; 2、声明文件头部没有任何import与export,声明文件才能全局生效

二、类型断言

const foo = {};
foo.bar = 123; // Error: 'bar' 属性不存在于 ‘{}’
foo.bas = "hello"; // Error: 'bas' 属性不存在于 '{}'

这里的代码发出了错误警告,因为 foo 的类型推断为 {},即是具有零属性的对象。因此,你不能在它的属性上添加 bar 或 bas,你可以通过类型断言来避免此问题:

interface Foo {
  bar: number;
  bas: string;
}

const foo = {} as Foo;
foo.bar = 123;
foo.bas = 'hello';

最初的断言语法如下所示:

let foo: any;
let bar = <string>foo; // 现在 bar 的类型是 'string'

三、interface VS type

相同点: 1. 都允许拓展(extends) 2. 都可以描述一个对象或者函数

不同点: 1. type 可以声明基本类型别名,联合类型,元组等类型

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

```

1. type 语句中还可以使用 typeof 获取实例的 类型进行赋值
2. interface 能够声明合并

```JS
interface User {
name: string
age: number
}

interface User {
 sex: string
}

/*
User 接口为 {
 name: string
 age: number
 sex: string
}
*/
```

四、interface定义数组,数组的项为对象

interface objData {
    a: number,
    b: any,
}
// 定义一个普通的对象
const obj: objData;
// 定义一个包含对象的数组
const arr: objData[];


// 如果objData中的a类型需要变为string,则ts需要类型兼容
interface objData<T> {
    a: T,
    b: any,
}
const obj: objData<string>;
const arr: objData<string>[];

五、指定私有属性

class store {
   private name;
   private tel;
   constructor(name: string, tel: number) {
       this.name = name;
       this.tel = tel;
   }
   get storeInfo() {
       return '门店名称:' + this.name + '电话:' + this.tel;
   }
}
const storeDetail = new store('mton的小店', 123213213);
console.log(storeDetail);

(持续update中,没人看的话就当做平时记录o( ̄︶ ̄)o)