深入浅出TypeScript学习笔记 | 青训营

黄晓菲
87 阅读3分钟
                           

深入浅出 TypeScript

TypeScript带来了什么?

类型安全

下一代JS特性

完善的工具链

TypeScript vs JavaScript

屏幕截图 2023-08-20 204629.png

TS基础有哪些

       
               
  1. boolean、number、string
    2.            
  2. 枚举enum
    3.            
  3. any、unknown、void
  4. never
  5. 数组类型[]
  6. 元祖类型tupte
    7.        
       

函数类型

       

定义：TS定义函数类型时要定义输入参数类型和输出类型

输入参数：参数支持可选参数和默认参数

输出参数：输出可以自动推断，没有返回值时，默认为void类型

函数重载：名称相同但参数不同，可以通过重载支持多种类型

接口

              
  1. 定义：为了定义对象类型
    2.            
  2. 特点：
    • 可选属性
    • 只读属性
    • 描述函数类型
    • 描述自定义属性
    3.        

类

               
  1. 定义：写法和JS差不多，增加了一些定义
    2.            
  2. 特点：            
                     
    • 增加了public、private、protected 修饰符
      •                
    • 抽象类：                

      只能被继承，不能被实例化

      作为基类，抽象方法必须被子类实现

  3. interface 约束类，使用implements关键字
    4.        

TS高阶-高级类型

               
  1. 联合类型
  2. 交叉类型 "&" 其他属性类型
  3. 类型断言,断言分为非空断言 和 确定具体值的断言
  4. 类型别名
                 
    1. 定义：给类型起个别名
      2.            
    2. 与接口的相同点：

      都可以定义对象或函数

      都允许继承

    3. 不同点：

      interface 是 TS 用来定义对象，type是用来定义别名方便使用

      type 可以定义基本类型 ， interface 不行

      interface 可以合并重复声明，type不行

    TS进阶-泛型

                 
    1. 泛型创建可重用的组件
      2.            
    2. 应用场景：定义一个功能，把传入的参数打印出来。传入string，则返回string

      3. function print(arg:string):stirng { 
    console.log(arg)
    return arg;
            }
function print(arg:string | number ):string | number{ 
    console.log(arg)
    return arg; 
           }
function print(arg:any):any{ 
    console.log(arg)
    return arg
            } 
function print<T> (arg:T):T {
    console.log(arg)
    return arg 
            }
    3. 基本定义

      4. 语法就是"<>"写参数类型，用T表示.

      有两种：定义要使用的类型 + TS类型推断，自动推导类型

      泛型的作用是临时占位

      TS进阶-泛型工具类型-基础操作符

               
      1. typeof : 获取类型
      2. keyof：获取所有健
      3. in : 遍历枚举类型

      实战和工程向

      声明文件

      declare（类型环境）：三方库需要类型声明文件

      .d.ts：声明文件定义

      @types：三方库TypeScript类型包

      tsconfig.json：定义TypeScript的配置

      实战-泛型约束后端接口类型

             

      对初学者学习的建议

             

      首先要了解基本概念，了解TypeScript与JavaScript之间的关系和差异。理解TypeScript是JavaScript它提供了静态类型、类、模块等增强特性。

      然后是学习TypeScript的语法和类型系统。了解如何声明变量、定义函数、创建接口和类，以及使用类型注解和泛型等。这些知识将帮助您在编写代码时获得更好的类型检查和代码提示。

      还要多使用编辑器和工具，利用这些工具提高开发效率。

      最重要的是深入学习高级特性，掌握了基本的TypeScript语法和类型系统。首先要了解基本概念，了解TypeScript与JavaScript之间的关系和差异。理解TypeScript是JavaScript它提供了静态类型、类、模块等增强特性。

      然后是学习TypeScript的语法和类型系统。了解如何声明变量、定义函数、创建接口和类，以及使用类型注解和泛型等。这些知识将帮助您在编写代码时获得更好的类型检查和代码提示。

      还要多使用编辑器和工具，利用这些工具提高开发效率。

      最重要的是深入学习高级特性，掌握了基本的TypeScript语法和类型系统。

avatar
文章
阅读
粉丝