深入浅出TypeScript | 青训营笔记

80 阅读3分钟

TS基础概念

对比于JS,TS是JS的超集,增强了类型安全,提高生产力。 简单的说就是在 JavaScript 的语法基础上加入强类型并切换为基于类的面向对象语言。

TypeScript & JavaScript

image.png

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相比,使用泛型来创建可服用的组件要更好,因为泛型会保留参数类型。