TS基础全覆盖

81 阅读5分钟

介绍

  1. TS基于JS,是JS的超集
  2. TS新增加了静态类型检查,接口,泛型等现代开发特性,更适合大型项目的开发
  3. TS需要先编译为JS,然后执行

TS编译(使用脚手架时无需配置)

命令行编译

自动化编译

  1. 创建TS编译控制文件

  1. 监视目录中的.ts文件变化

  1. 优化:可以修改tsconfig.json中的noEmitOnError配置,或改变默认编译的JS版本

类型声明

使用“:”对变量或函数形参进行类型声明

在“:”后也可以写字面量类型,但实际中很少用

类型推断

TS会根据代码进行类型推导

但注意:类型推断不是万能的,面对复杂类型是推断容易出问题,还是尽量在编写时明确类型声明

类型总览

JS中的数据类型

  1. String
  2. Number
  3. Boolean
  4. Null
  5. Undefined
  6. Bigint
  7. Symbol
  8. object(包括:Arrary、Function、Date、Error等...)

TS中的数据类型

  1. 包括所有JS中的类型

  2. 6个新类型:

    1. Any
    2. Unknown
    3. Never
    4. Void
    5. Tuple
    6. Enum
  3. 2个用于自定义类型的方式:

    1. Type
    2. interface

注意:

常用类型

Any

any的含义:任意类型,一旦将变量类型限制为any,相当于放弃了对该变量的类型检查

Unknown

unknown的含义是:未知类型

  1. unknown可以理解为一个类型安全的any,适用于:不确定数据的具体类型

  1. unknown会强制开发者在使用之前进行类型检查,从而提供更强的类型安全性

Never

never的含义是:任何值都不是,简言之就是不能有值,undefined,null, ' ' ,0都不行

  1. 几乎不用never去直接限制变量,因为没有意义:

  1. never一般是TS主动推断出来的:

  1. never也可用于限制函数的返回值

void

  1. void通常用于函数返回值声明,含义(函数返回值为空,调用则也不应依赖其返回值进行任何操作)

  1. 以下写法均符合规范

Object

小写object

object的含义是:所有非原始类型,可存储:对象、函数、数组等,由于限制的范围比较宽泛,实际开发中使用较少

大写Object

官方描述:所有可以调用Object方法的类型,即除了undefined和null的任何值

由于限制范围太大,开发中使用频率极低

声明对象类型

实际开发中,限制一般对象,通常使用以下形式:

索引签名:

允许定义对象可以具有任意数量的属性,这些属性的键和类型是可变的,常用于:描述类型不确定的属性(具有动态属性的对象):

let person:{
    name:string
    age?:number
    [key:string]:any//这里表示对象中可以任意存放字符串形式的属性名和对应任意格式的属性值
    }
    
person = {name:'lll',age:202,gender:'男',city:'北京'}

声明函数类型

TS中的 => 在函数类型声明时表示函数类型,描述其参数类型和返回类型;

JS中的 => 是一种定义函数的语法,是具体的函数实现;

函数类型声明还可以使用:接口、自定义类型等方式

声明数组类型

其中的Array属于泛型

Tuple

元素(tuple)是一种特殊的数组类型,可以存储固定数量的元素,并且每个元素的类型是已知的且可以不同。元祖用于精确描述一组值的类型,‘ ?’表示可选元素

Enum

枚举可以定义一组命名常量,它能增强代码的可读性,也让代码更好维护

type

type可以为任意类型创建别名,让代码更简洁、可读性强,同时更方便的进行类型复用和扩展

基本用法

联合类型

交叉类型

一个特殊类型

正常代码:

特殊代码:

原因:

为了确保以下代码成立,Array.prototype.push的返回一个数字,而Array.prototype.forEach方法期望其回调的返回类型void

复习类的相关知识:

类class

student继承person(复写父类方法)

属性修饰符

修饰符含义具体规则
public公开的可以被:类内部、子类、类外部访问
protected受保护的可以被:类内部、子类访问
private私有的可以被:类内部访问
readonly只读信息属性无法修改

Readonly

抽象类

概述:

抽象类是一种无法被实例化的类,专门用来定义类的结构和行为,类汇总可以写抽象方法,也可以写具体实现。抽象类主要用来为为其派生类提供一个基础结构,要求其派生类必须实现其中的抽象方法。

简记:

抽象类不能实例化,其意义是可以被继承,抽象类可以由普通方法、也可以又抽象方法。

interface(接口)

interface是一种定义结构的方式,主要作用为:类,对象,函数等规定一种契约,这样可以确保代码的一致性和类型安全,但要注意interface只要定义格式,不能包含任何实现。

定义类结构

定义对象结构

定义函数结构

接口之间的继承

相似概念的区别:

interface与type

interface、type都可以定义对象结构

interface可以集成、合并

type的交叉类型

interface与抽象类的区别

一个类可以实现多个接口

泛型

泛型允许我们在定义函数、类或接口时,使用类型参数来表示未指定的类型,这些参数在具体使用时,才被指定具体的类型,泛型能让同一段代码适用于多种类型,同时保持类型的安全性

eg:如下代码中就是泛型,(不一定叫T,可以设置为任何英文单词或字母),设置泛型后即可在函数中使用T来表示该类型:

泛型函数

传参时再定义参数类型

泛型可以有多个

泛型接口

泛型约束

interface PersonInterface {
    name:string,
    age:number
}

function logPerson<T extends PersonInterface>(info:T):void{
    console.log(`我叫${info.name}今年${info.age}岁了`)
}
logPerson({name:'张三'age:18})

泛型类

类型声明文件