TS基础概念
对比于JS,TS是JS的超集,增强了类型安全,提高生产力。 简单的说就是在 JavaScript 的语法基础上加入强类型并切换为基于类的面向对象语言。
TypeScript & JavaScript
TS基础类型
- boolean、number、string
- 基本类型:string、number、boolean、symbol、bigint、null、undefined
- 引用类型:array、 Tuple(元组)、 object(包含Object和{})、function
- 特殊类型:any、unknow、void、nerver、Enum(枚举)
基本类型
let str:string = 'string'
let bool:boolean = false
let number:number = 0
let symbol:symbik = Symbol()
let big: bigint = 10n
let nu: null = null
let un: undefined = undefined
引用类型
1.数组
有两种声明方式:
- 类型名称 + []
- Array<数据类型>
let array:string[] = ['1','2','3']
let arr2: Array<number> = [1, 2, 3]
let arr2: Array<number> = [1, 2, '3'] // error
2.元组
Tuple 的作用就是限制元素的类型并且限制个数的数组
let tupleType: [string, boolean] = ['basic', false];
3.对象 object / Object / {}
object 非原始类型,在定义上直接使用 object 是可以的,但你要更改对象的属性就会报错,原因是并没有使对象的内部具体的属性做限制,所以需要使用 {} 来定义内部类型
let obj1: object = { a: 1, b: 2}
obj1.a = 3 // error
let obj2: { a: number, b: number } = {a: 1, b: 2}
obj2.a = 3 // ok
Object 代表所有的原始类型或非原始类型都可以进行赋值,除了null和undefined
let obj: Object;
obj = 1; // ok
obj = "a"; // ok
obj = true; // ok
obj = {}; // ok
obj = Symbol() //ok
obj = 10n //ok
obj = null; // error
obj = undefined; // error
4.function 函数
- 有两种方式,一种为 function, 另一种为箭头函数
- 在书写的时候,也可以写入返回值的类型,如果写入,则必须要有对应类型的返回值,但通常情况下是省略,因为TS的类型推断功能够正确推断出返回值类型
function setName1(name: string) {
//ok
console.log('hello', name)
}
setName1('jack') // "hello", "jack"
function setName2(name: string): string {
//error
console.log('hello', name)
}
setName2('jack')
function setName3(name: string): string {
//error
console.log('hello', name)
return 1
}
setName3('jack')
function setName4(name: string): string {
//ok
console.log('hello', name)
return name
}
setName4('jack') // "hello", "jack"
//箭头函数与上述同理
const setName5 = (name: string) => console.log('hello', name)
setName5('jack') // "hello", "jack"
其他类型
1.any、unknown、void、never
any
在 TS 中,任何类型都可以归于 any 类型,所以any类型也就成了所有类型的顶级类型,同时,如果不指定变量的类型,则默认为any类型, 当然不推荐使用该类型,因为这样丧失了TS的作用。
let d:any; //等价于 let d
unknown
- unknow会对值进行检测,而类型any不会做检测操作,any类型可以赋值给任何类型,但unknow只能赋值给unknow类型和any类型
- unknow不允许定义的值有任何操作(如方法,new等),但any可以
void
当一个函数,没有返回值时,TS会默认他的返回值为 void 类型
function voidFunction(): void {
console.log('void');
}
never 当一个函数,永不能执行完 or 永远error
function errorGen(msg: string): never {
throw new Error(msg);
}
function infiniteLoop(): never {
while(true) {
// 业务逻辑
}
}
2.枚举enum
使用枚举类型可以为一组数值赋予友好的名字。一般用于组织一些有相似之处的常量,让这些常量更规范、更统一。
注意:
- 枚举的类型只能是 string 或 number
- 定义的名称不能为关键字
接口 interface
在面向对象语言中表示行为抽象,也可以用来描述对象的形状。
// 描述对象内容
interface Props {
a: string;
b: number;
c: boolean;
d?: number; // 可选属性
readonly e: string; //只读属性
[f: string]: any //任意属性
}
泛型
是指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性。
也就是说,泛型是允许同一个函数接受不同类型参数的一种模版,与any相比,使用泛型来创建可服用的组件要更好,因为泛型会保留参数类型。