首先我们要知道什么是typescript:
简单来说:TypeScript是JavaScript的超集,具有类型系统,支持ES6语法,支持面向对象编程的概念,如类、接口、继承、泛型等,它可以编译成普通的JavaScript代码。 以下简称TS;
为什么要用TS呢?那当然是因为TS支持ES6,且支持接口、泛型等规范、编译报错提示等,可使我们的代码更加规范且不会引发奇怪bug;
TS有那些类型呢?
数字类型: let n: number = 1
字符串类型: let s: string = "hello xiaohuihui"
布尔类型: let b: boolean = true/false
数组类型: let arr: number[] = [1,2,3,4] 或者 let arr: Array<number> = [1,2,3,4]
元组类型: let x: [string, number]; x = ['hello', 10];
枚举类型: enum testEnum {"小灰灰1","小灰灰2"}
对象:object,用不存在的值:never,函数无返回值:void,还有null,undefined,any;
TS中一个比较重要且常用的东西:接口(interface)
1、什么是接口,它有那些特性呢?
解释:TS的核心原则之一就是对值所具有的结构进行类型检查,它有时被称为“鸭式辩型法”或“结构性子类型化”。
特性:1:定义对象、数组、函数、类等。
2:接口可以相互继承
3:接口可以继承类
4:可选属性与额外检查
TS中的类型别名type和接口interface有什么异同点?
相同点:type和interface都可以作用于原始值,联合类型,元组等任何类型;
差异点:type不能extends和implements;
type拓展使用 & 例如:type name1 = name & {age: number}
TS中的Declare关键字用来做什么?
我们平时引用第三方插件时候,一般第三方插件会有ts版本的支持,我们只需要安装ts版本的用来即可使用,但是有的并没有提供ts版本的支持(即没有提供xx.d.ts),那我们怎么处理呢?这就用到了declare,例如:declare module 'cytoscape-klay';
TS中的泛型是什么,可以做什么?
泛型代表的是泛指某一类型,更像是一个类型变量,以下是泛型的几种用法(场景不是很全):
1:例如我们有一个方法,参数传入类型和输出类型相同,但是不确定是什么类型,为了更好地通用性,这时候就用到了泛型
function get<T> (name: T): T{return name}
2:接口嵌套
interface res {
name: string
age: number
other: T
}
interface other {
height: number
}
使用res<other>
3:泛型类
class TestClass<T>{
value: T
func: (a: T, b: T) => T
}
const test = new TestClass<number>()
下面是在实际工作中用的一些注意点:
1、在大多数不确定类型的场景下,用unknown替代any;
2、当方法没有返回时候,用void可以避免空指针导致的错误;
3、??运算符:??与||的功能是相似的,区别是??在左侧表达式结果为 null 或者 undefined 时,才会返回右侧表达式 。
4、当方法中定义的参数没有使用时候,可以使用前下划线标识,例如:_item;
5、keyof和typeof,获取到key值或者value值;
6、泛型工具方法:
- Partical: 可以使泛型中的所有类型变为可选。例如:Partical<IInterface>;
- Pick: 将 T 类型中的 K 键列表提取出来,生成新的子键值对类型。例如:Pick<IInterface, "age"|"name"> // 挑选出IInterface中的age和name成为新的接口;
- Omit: 例如 Omit<T, K>,将T中包含K(键)属性剔除,Omit<Animal, 'name'|'age'>; // 剔除Animal中的age和name成为新的接口;
- Exclude: 例如 Exclude<T, U>,将T中包含U的属性剔除,返回其余部分;