TypeScript

故及
183 阅读5分钟

注意: 该文章为个人学习笔记 内容可能会有缺陷 本文章内容参考typeScript中文使用指南与 B站up主月光分层的视频教程

简介

TypeScript（简称TS）是一种由微软开发的开源编程语言，它是JavaScript的一个超集，这意味着任何有效的JavaScript代码也是有效的TypeScript代码。TypeScript旨在提供JavaScript所不具备的可选的静态类型系统，以及对ES6和更高版本JavaScript新特性的支持。

以下是TypeScript的一些关键特性：

  1. 静态类型：TypeScript增加了静态类型系统，这有助于在编译时检测错误，提高代码的可维护性和可读性。
  2. 类型推断：TypeScript能够根据变量的初始值推断其类型，减少类型注解的需求。
  3. 类和接口：TypeScript提供了类（Class）和接口（Interface），这些是JavaScript中没有的概念，它们有助于构建面向对象的代码结构。
  4. 模块：TypeScript支持ES6模块，允许开发者将代码分割成可管理的模块，便于重用和维护。
  5. 高级类型：TypeScript提供了多种高级类型，如联合类型（Union Types）、交叉类型（Intersection Types）、元组（Tuples）等，以满足复杂的类型需求。
  6. 类型守卫：TypeScript允许开发者使用类型守卫（Type Guards）来缩小变量的类型范围，提高类型系统的灵活性。
  7. 命名空间：TypeScript提供了命名空间（Namespaces），用于组织代码和避免命名冲突。
  8. 装饰器：TypeScript支持装饰器（Decorators），这是一种特殊类型的声明，可以被附加到类、方法或属性上，用于添加注解或改变它们的行为。
  9. 编译目标：TypeScript代码可以编译成不同版本的JavaScript代码，以支持不同版本的浏览器或运行环境。
  10. 工具和集成：TypeScript与许多开发工具和IDE集成，如Visual Studio Code、WebStorm等，提供了丰富的开发体验和编辑器支持。
  11. 社区和生态系统：TypeScript拥有一个活跃的社区和生态系统，提供了大量的库和框架支持，如Angular、React和Vue。

TypeScript的设计目标是提供一种更安全、更可维护的方式来编写JavaScript代码，同时保留JavaScript的灵活性和动态性。通过使用TypeScript，开发者可以构建大型、复杂的应用程序，同时享受类型检查和现代编程语言特性带来的优势

安装与编译

这部分内容推荐查看B站up主月光分层的视频教程

基础类型

工程引入

介绍typeScript的配置规则等

tsconfig.json

如果一个目录下存在一个tsconfig.json文件，那么它意味着这个目录是TypeScript项目的根目录。 tsconfig.json文件中指定了用来编译这个项目的根文件和编译选项。

指定ts编译方式

  • 使用"files"属性
  • 使用"include"和"exclude"属性
{
    "compilerOptions": {
        // 模块代码的生成目标
        "module": "commonjs", 
        // 启用此选项后，TypeScript 编译器将不允许在没有明确类型注解的情况下使用 any 类型。这有助于避免在代码中隐式地使用 any 类型，从而提高代码的类型安全性。
        "noImplicitAny": true,
        // 指定编译器在编译过程中是否移除源代码中的注释。设置为 true 时，编译器会删除所有单行和多行注释。
        "removeComments": true,
        // 指定编译器是否保留 const 枚举。
        "preserveConstEnums": false,
        // 指定编译器是否生成源映射文件（.map 文件）。源映射文件允许调试工具将编译后的代码映射回原始 TypeScript 源代码
        "sourceMap": false
        // 指定编译器将允许在项目中包含和处理 .js 文件
        "allowJs" : true,
        // 编译后的文件将输出到 "dist" 目录
        "outDir": "./dist", 
    },
    // 指定一个包含相对或绝对文件路径的列表
    "files": [
        "index.ts",
    ],
    // 指定一个文件glob匹配模式列表。
    // * :匹配0或多个字符（不包括目录分隔符）
    // ? :匹配一个任意字符（不包括目录分隔符）
    // **/ :递归匹配任意子目录
    "include": [
        "src/**/*"
    ],
    // 排除编译的文件
    "exclude": [ 
        "node_modules",
    ]
}

注意点：

  • 当files和include没有配置时，编译器默认包含当前目录和子目录下所有的TypeScript文件(.ts , .d.ts , .tsx)
  • 所有include引入的文件可以使用exclude属性过滤，但是通过files属性指定的文件总会包含在内
  • exclude默认会排除node_modules,bower_components和outDir目录
  • tsconfig.json文件可以是个空文件，那么所有默认的文件（如上面所述）都会以默认配置选项编译。、】

@types,typeRoots和types

  • @types

    默认所有@types包会在编译过程中被包含进来。例如：node_modules/@types文件夹下 以及它们子文件夹下所有的包。如./node_modules/@types/和../node_modules/@types/等等。

  • typeRoots

如果指定了typeRoots，只有typeRoots下面的包才会被包含进来。

{
   "compilerOptions": {
       "typeRoots" : ["./typings"]
   }
}

这个配置文件会包含_所有_./typings下面的包，不包含./node_modules/@types里面的包。

  • types

如果指定了types，只有被列出来的包才会被包含进来。 比如：

{
   "compilerOptions": {
        "types" : ["node", "lodash", "express"]
   }
}

这个tsconfig.json文件将_仅会_包含 ./node_modules/@types/node，./node_modules/@types/lodash和./node_modules/@types/express。

指定"types": []来禁用自动引入@types包。

注意，自动引入只在你使用了全局的声明（相反于模块）时是生效的。 如果你使用import "foo"语句，TypeScript仍然会查找node_modules和node_modules/@types文件夹来获取foo包。

使用extends继承配置

-tsconfig.json文件可以利用extends属性从另一个配置文件里继承配置。（用的比较少详解可以查看所有手册）

avatar
文章
阅读
粉丝