TypeScript学习笔记 | 青训营

南瑜
52 阅读5分钟

前言导入

TypeScript VS JavaScript

TypeScript是"强类型"版的JavaScript。当我们在代码中定义变量（包括普通变量，函数，组件，hook等）的时候，TypeScript允许我们在定义的同时指定其类型，这样使用者在使用不当的时候就会被及时报错提醒。

一.初始ts

  • 什么是ts?

    • 以Js为基础构建的语言
    • 一个js的超集
    • 可以在任何支持js的平台中执行
    • Ts不能被Js解析器直接执行，需要先编译成Js
    • Ts拓展了js并添加了类型

  • ts新增了什么？

    • 增加了类型
    • 支持ES的新特性
    • 添加了ES不具备的新特性
    • 丰富的配置选项
    • 强大的开发工具

二. TypeScript开发环境搭建

  • 下载Node.js

  • 安装Node.js

  • 使用npm全局安装typeScript

    • 进入命令行
    • 输入：npm i -g typescript

  • 创建一个ts文件

  • 使用tsc对ts进行编译

    • 进入命令行
    • 进入ts文件所在目录
    • 执行命令：tscxxx.ts

tsc对ts文件编译结束后会生成对应的js文件

三.ts基本类型

1.类型声明

  • 类型声明

    • 类型声明是Ts非常重要的一个特点

    • 通过类型声明可以指定TS中的变量（参数，形参）的类型

    • 指定类型之后，当为变量赋值时，TS编译器会自动检查是否符合类型声明，符合则赋值，否则报错；换句话说：类型声明给变量设置了类型，则变量只能存储某一类型的值

    • 语法：

      let 变量: 类型;
let 变量: 类型 = 值;
​
function fn(参数: 类型, 参数: 类型): 类型{
    ...
}

  • 自动类型判断

    • TS拥有自动类型判断的机制
    • 当对变量的声明与赋值同时进行的时候，TS会自动判断变量类型，所以可以省略类型声明。
2.TS中的类型
  • 类型：

image-20230219083817478.png 函数：

两种方式：

1.我们熟悉的"JS函数"上直接声明参数和返回值：

```
const isFalsy=(value:any):boolean=>{
    return value===0?true:!!value;
}
```

2.直接声明你想要的函数类型：

```
export const useMount =(fn:()=>void)=>{
    useEffect(()=>{
        fn()
 })
}
```

interface

interface不是一种类型，应该被翻译成接口，或者说使用上面介绍的类型，创建一个我们自己的类型：

interface User{
    id:number;
}
const u:User={id:1}
注意事项：

  • 当声明let变量在编译结束生成js后变两下出现红色波浪的解决方式：

    在终端输入： tsc --init 重新配置初始化

    //声明一个变量a，同时指定它的类型为number
let a: number;
//a的类型设置为了number,在以后的使用过程中a的值只能是数字
a = 10;
a = 33;
//  a='hello';//此行代码会产生报错，因为变量a的类型是number,不能赋值为字符串。

    如果已经在终端重新输入tsc --init还没有解决，可能是与其他文件的变量冲突，需要关闭文件或改变量名

四.ts的类与泛型

在 TypeScript 中，可以使用类和泛型来实现更强大的代码抽象和复用。

下面是一些关于 TypeScript 类和泛型的使用实践记录：

1. 类的定义和使用：

  • 使用 class 关键字来定义一个类，类名通常采用大驼峰命名法。
  • 可以使用 constructor 方法来定义类的构造函数，用于初始化类的实例。
  • 可以使用 public、private 和 protected 关键字来定义类的属性和方法的访问权限。
  • 可以使用 extends 关键字来实现类的继承。
  • 可以使用 super 关键字来调用父类的构造函数和方法。

2. 泛型的定义和使用：

  • 使用 <T> 来定义一个泛型参数，T 可以是任意标识符，通常用于表示类型。
  • 泛型可以应用于类、接口、函数等，用于增加代码的灵活性和复用性。
  • 可以使用泛型约束来限制泛型的类型范围，例如使用 extends 关键字限制泛型必须是某个类型的子类。

3. 类和泛型的结合使用：

  • 可以在类中使用泛型参数来定义类的属性和方法的参数类型和返回类型。
  • 可以在类中使用泛型参数来定义类的实例变量的类型。
  • 可以在类中使用泛型参数来定义类的方法的返回类型。

下面是一个使用 TypeScript 类和泛型的示例代码：

class Stack<T> {
  private items: T[] = [];

  push(item: T) {
    this.items.push(item);
  }

  pop(): T | undefined {
    return this.items.pop();
  }
}

const stack = new Stack<number>();
stack.push(1);
stack.push(2);
console.log(stack.pop()); // 输出: 2

在上面的示例代码中，我们定义了一个 Stack 类，它使用泛型参数 T 来表示栈中的元素类型。通过泛型，我们可以在使用 Stack 类时指定元素的类型为 number，并且可以使用 push 和 pop 方法来操作栈中的元素。

五.ts的编译选项

  • 自动编译文件

    • 编译文件时，使用-w指令后，TS编译器会自动监视文件的变化，并在文件发生变化时重新编译。

    • 示例：

      tsc xxx.ts -w

  • 自动编译整个项目

    • 如果直接使用tsc指令，则可以自动将当前项目下的所有ts文件编译为js文件
    • 但是在使用tsc命令的前提是，要先在根目录下创建一个ts的配置文件tsconfig.json
    • tsconfig.json是一个JSON文件，添加配置之后，只需要tsc命令即可完成对整个项目的编译
avatar
文章
阅读
粉丝