一、什么是TypeScript

TS是以JavaScript为基础构建的语言,是JavaScript的一个超集。他扩展了JavaScript并添加了类型。在任何支持JavaScript的平台中执行。具有强类型定义特点。

image.png

TS优势

  1. 规范了代码
  2. 代码编译阶段就能发现错误
  3. 在原生js的基础上加了一层类型定义
  4. 添加了类型检查
  5. 避免了低级错 误

TS增加了什么?

  1. 类型
  2. 支持ES的新特性
  3. 添加ES不具备的新特性(抽象类,接口,工具
  4. 丰富的配置选项

安装

1、安装nodejs

2、安装typescript解析器:npm i -g typescript

编译

tsc 文件名

二、TypeScript的工作流

image.png

三、TypeScript语法

1-类型

boolean、string、number、array、null、undefined、object

tuple(元祖)、enum(枚举)、void、never、any

高级类型
  • union组合类型
  • Nullable可空类型
  • Literal预定义类型

Number数字类型

  • 对数字的定义可以用number来表示
  • 既能表示整数、也能表示浮点数,甚至也可以表示正负数

String字符串类型

  • "hello" , 'hello' , hello
  • 反引号:``,可以创建一个字符串模板

boolean布尔类型

  • 真假
  • 处理逻辑上的判断

数组Array

  • []
  • 数组中可以存放任意类型的数据
  • 宽容度很大
let list1:number[] = [1,2,3,4]
let list2:Array<number> = [1,2,3,4] //泛型
let list4 = [1,"add"]
let list5:any[] = [1,"dss",true]

Tuple元祖

  • 固定长度,固定类型的数组
  • 注意点:声明时一定要指明数据类型
let person1:[number,string] = [1,"小丑"]

Union联合类型

let union : string | number

literal字面量类型

let union3 : 0|1|2
let literal : 1 | "2" | true | [1,2,3,4]

枚举类型Enum

enum Color{
    red,
    green,
    bule
}
let color = Color.bule
console.log(color) //2
enum Color2{
    red="red",
    green="green",
    bule=1
}
let color2 = Color2.green
console.log(color2) //green

any

  • 任意类型
  • 快速上线
let rand:any = 666;
rand = true;
rand = "1234";
rand = {};
rand();
rand.toUpperCase();

unkown 未知类型

  • 保证类型安全
let rand:unknown= 666;
rand = true;
rand = "1234";
rand= {};
if(typeof rand === 'function') {
    rand();
}
if(typeof rand === 'string') {
    rand.toUpperCase();
}

void、undefined与never

  • 一个函数在没有任何返回的情况下,函数返回类型就是void
  • void与undefined区别:是否存在问题。void本身不存在;undefined未赋初值
  • 保持永远无法执行的状态(抛出错误异常,while)
function throwError(message:string,errorCode:number):never {
    throw {
        message,
        errorCode
    }
}
throwError("not found",404)

类型适配(类型断言)Type Assertions

//any转换为string
let message:any;
message:"abc";
//方法一 :  (<string>message)
let ddd = (<string>message).endsWith("c");
//方法二: (message as string)
let ddd2 =  (message as string).endsWith("c");

函数类型

  • 给参数绑定类型
  • 多个参数类型必须匹配一致
  • 可以使用?来设置参数的可选性
  • 可以设置默认值
  • 默认值和可选值放在函数参数末尾
let log =  (message:string) => console.log(message)
let log2 =  (message:string,code?: number) => {
    console.log(message,code)
}
let log3 =  (message:string,code: number=0) => {
    console.log(message,code)
}

四、TS的面向对象

对象Object

  • 对象的定义不是key to value键值对,而是key to type键类型对。
const person:{
    firstName:string,
    lastName:string,
    age:number
} = {
    firstName: 'joker',
    lastName:'yan',
    age:18
}
console.log(person.age)

Interface接口

  • 高内聚,低耦合(功能相关的事务放在用一个集合中,形成一个模块,模块之间互相独立)
let drawPoint = (point:Point) =>{
    console.log({x:point.x,y:point.y})
}
drawPoint({x:105,y:24});
// drawPoint({x:'joker',y:'yan'});  // 报错
interface Point {
    x:number,
    y:number
}

class

  • 类是一个特殊的函数
  • JS构造函数不可以重载 一个类有且仅有一个constructor
interface IPoint {
    x:number,
    y:number,
    drawPoint: () => void;
    getDistances:(p:IPoint)=>number;
}
class Point implements IPoint {
    //成员变量
    x:number
    y:number
    //变量初始化 构造函数
    constructor(x?:number,y?:number) {
        this.x = x;
        this.y = y
    }
    //成员方法
    drawPoint = () =>{
        console.log("x:",this.x,"y:",this.y)
    }
    getDistances = (p:IPoint) =>{
        return Math.pow(p.x-this.x,2) + Math.pow(p.y-this.y,2)
    }
}
//声明对象
const point = new Point(2,3)
// point.x = 2;
// point.y = 3;
point.drawPoint()
//类:point;对象object:类的实例instance;

// 使用访问修饰符public、private、protected
class Point implements IPoint {
    //变量初始化 构造函数
    constructor(public x:number,public y:number) {
    }
    //成员方法
    drawPoint = () =>{
        console.log("x:",this.x,"y:",this.y)
    }
    getDistances = (p:IPoint) =>{
        return Math.pow(p.x-this.x,2) + Math.pow(p.y-this.y,2)
    }
}

Access Modifier 访问修饰符

  • 避免外部直接操作内部属性
  • 对访问class内部的方法或者变量加以限制
  • public、private、protected
  • 接口中的定义为共有属性。

module模块

  • 在class类的名称前使用export导出
  • 在文件最开始使用 import { } from "文件路径"

泛型

  • Array<类型>
  • 数据模板
  • 保持代码中类型一致,提高开发效率
let lastInArray = <T>(arr:Array<T>) => {
    return arr[arr.length-1]
}
const l1 = lastInArray([1,2,3,4])
let lastInArray2 = <T>(arr:T[]) => {
    return arr[arr.length-1]
}
const l2 = lastInArray2<string>(['a','b','c']);
const l3 = lastInArray2<string | number>(['a','b','c']);
let makeTuple = <T,Y=number>(x:T,y:Y) =>[x,y] //可设置默认类型
const v1 = makeTuple(1,"one")
const v2 = makeTuple<boolean,number>(true,1)

泛型补充

  • 泛型是可以在保证类型安全的前提下,让函数等与多种类型一起工作,从而实现复用。常用于:函数、接口、类中。
  • 泛型在保证类型安全(不丢失类型信息)的同时,可以让函数等与多种不同的类型一起工作。灵活可复用。

创建泛型函数

image.png

  • 解释:

    • 语法:在函数名称的后面添加<> (尖括号),尖括号中添加类型变量,比如此处的Type

      • 可以省略<类型>来简化泛型函数的调用
      • 使用类型判断机制,判断传入的参数类型。
    • 类型变量Type,是一种特殊类型的变量,它处理类型而不是值
    • 该类型变量相当于一个类型容器,能够捕获用户提供的类型(具体是什么类型由用户调用该函数时指定
    • 因为Type是类型,因此可以将其作为函数参数和返回值的类型,表示参数和返回值具有相同的类型
    • 类型变量Type,可以是任意合法的变量名称。

数组就是一个泛型

image.png

image.png

泛型约束

目的:收缩类型(缩窄类型取值范围)image.png

多个泛型类型

keyof:获取到一个类型接口 所有的key的联合类型

image.png

TS创建React项目

npx create-react-app 项目名称 --template typescript

项目目录中多了tsconfig.json

image.png

image.png

React中ts与tsx的区别

  • ts:纯ts代码
  • tsx:ts组件
  • 类型声明文件:d.ts

    • 文件中只能出现类型声明的代码。不能出现可执行的代码
最后修改:2023 年 07 月 10 日
如果觉得我的文章对你有用,请随意赞赏