typescript 编译配置

typescript 编译配置

编译器

typescript编译器是JavaScript程序,能够对typescript和JavaScript代码进行静态类型检查,并将typescript代码编译为可以执行的JavaScript代码。

位于lib目录下。typescript编译器对外提供的命令tsc,用于编译typescript程序

tsconfig.json

  • 编译文件列表
  • 编译选项
  • tsconfig.json 配置文件的继承关系
  • 工程间的引用

在编写tsconfig.json 文件之后,运行方式: tsc index.ts 或者 tsc index.ts -p tsconfig.json

第一种: 如果没有使用指定json文件,则会在运行目录下去找,如果没有,回去父级目录下去找,如果搜索不到tsconfig.json,则会停止编译

第二种:指定编译文件。这种情况下,编译文件的名字可以不限制。

编译选项配置
  1. tsc --init 生成tsconfig.json文件

  2. tsc --listFile编译选项
    启用这个编译选项,在编译工程的时候,浏览器会答应出参与本次编译的文件列表,可以在命令行上使用,也可以在tsconfig.json配置文件中去使用

    // 命令行
    tsc --listFile
    
    // tsconfig.json
    {
        "compilerOptions": {
            "listFiles": true, // 
            "strict": true,
            "target": "ES5"
        }
    } 
    

    如果工程总有一个tsconfig.json文件,在默认情况下配置文件所在目录以及子目录下所有的.ts .d.ts .tsx都会被添加到编译文件列表

  3. files属性
    在配置文件中使用顶层的files属性能够定义编译文件列表

    {
        "compilerOptions": {
            "listFiles":true
        },
        "files": ["src/b.ts", "src/c.ts"]
    }
    

    只有files属性中的文件才会参与本次编译
    使用files属性编译文件列表必须逐一的列出每一个文件,该属性不支持进行模糊的文件匹配。

  4. include属性
    include属性包含了files属性的功能,能够支持注意的列出每一个代编仪的文件。也支持通过模糊匹配来进行匹配待编译的文件

  5. exclude属性
    exclude需要和include属性一起使用,作用是include属性匹配到的文件列表中取出指定的文件,支持通配符

     {
         "compilerOptions": {
             "listFiles": true
         },
         "include": ["**/*"],
         "exclude": ["**/*.spec.ts"]
     }
    
声明文件列表
  1. --typeRoots编译选项
    用来设置声明文件的根目录,当配置了--typeRoots编译选项的时候,只有该选项指定的目录下的声明文件会被添加到编译文件列表。
    {
        "compilerOptions": {
            "listFiles": ture,
            "typeRoots": ['./typings']
        }
    }
    
  2. --types编译选项

"–types"编译选项也是能够用来指定使用的声明文件。“–typeRoots”编译选项配置的是含有声明文件的目录。“–types”编译选项则配置的是具体的声明文件。

{
  "compilerOptions": {
      "listFiles": true,
      "types": ["jquery"]
    }
}
继承配置文件

一个’tsconfig.json’配置文件可以继承另一个’taconfig.json’ 配置文件中的配置,当一个项目中包含了获得typescript工程的时候,可以将工程共同的配置提取到tsconfig.base.json配置文件中, 其他的配置i文件继承tsconfig.json配置文件中的配置。避免了重复配置同一属性
在tsconfig.json 配置文件中,使用顶层的extends属性来设置要继承的tsconfig.json 配置文件,在extends属性中指定的路径可以是相对路径,也可以是绝对路径。但是路径解析规则有所不同

  1. --showConfig编译选项
    使用该编辑现象之后,编辑器将显示出配置工程时使用的所有的配置信息,使用了这个配置选项, 编译器不会真正编译一个工程,只是显示工程的配置。
    只能在命令行上使用,不能再配置文件中使用该编译选项
  2. 使用相对路径
    若extends属性中指定的路径是以’./‘或者’…/'作为起始的,编译器在解析相对路径的时候,会按照配置文件中的目录先上查找
    // tsconfig.base.json
    {
        "compilerOptions": {
            "target": "ES6"
        }
    }
    
    // tsconfig.app.json
    {
        "extends": "./tsconfig.base.json",
        "compilerOptions": {
            "strict": true
        },
        "files": ["./src/index.ts"]
    }
    
    // tsconfig.spec.json
    {
        "extends": "./tsconfig.base.json",
        "compilerOptions": {
            "strict":false
        },
        "files": ["./src/index.spec.ts"]
    }
    
  3. 使用非相对路径
    在extends属性指定的路径不是’./‘或者’…/'作为起始的,编译器将在node_modules目录下指定的配置文件
    若在该目录中指定了配置文件,则使用配置文件,否则一直在父级目录下的node_modules子目录中查找,知道跑找到系统根目录为止。

工程引用

工程引用是ts3引用的新功能。允许一个ts工程引用多个其他的ts工程。借助于工程引用,可以将一个较大的工程拆分为ts工程,设置他们之间的依赖关系,每个ts工程都可以进行独立的配置和类型价差。能够显著的提高类型检查的效率。

使用工程引用

一个目录中有包含一个tsconfig配置文件,在该目录下被视为typescript工程的根目录。
使用"references"属性配置当前所有工程所引用的其他工程
被引用的工程必须启用"composite"编译选项

  1. references
    tsconfig.json配置文件有一个顶层的属性references。值为数组对象,用于设置引用的工程
    {
        "references": [
            {"path":"../pkg1"},
            {"path":"../pkg2/tsconfig.release.json"}
        ]
    }
    
    其中的path的值既可以是指向含有tsconfig.json配置文件的目录。也可以直接执行某个配置文件。配置文件的名字不可以是tsconfig.json。此时的项目引入了两个工程
  2. –composite
    –composite编译选项的值是一个布尔值。通过启用该选项。typescript编译器能够快速的定位依赖工程的输出文件位置。如果一个工程被其他共层所引用。工程的"–composite"编译选项为true
    启用该编译选项。会影响以下的配置
    + 没有设置–rootDir编译选项。会被设置为包含tsconfig.json 配置文件的目录
    + 如果设置了include 或 files属性。所有的源文件必须被包含在内。否则产生编译错误。
    + --declaration 变成true
  3. –declarationMap
    "–declarationMap"是推荐启用的编辑选项。如果启用了该选项。生成ds声明文件的同时会产生对应的source map文件。、
工程引用示例
  1. 配置reference
    A工程依赖B工程
    // A工程配置
    {
        "references": [
            {
                "path": "../B"
            }
        ]
    }
    
  2. 配置compositie
    A被B依赖,必须在A的配置文件中应该将"–composite"编译选项设置为true
    // A工程的tsconfig.json
    {
        {
            "compilerOptions": {
                "composite": true,
                "declarationMap": true
            }
        }
    }
    
–build

typescript提供了一种新的构建模式来配合工程引用的使用,–build,在该模式下,编译器能够进行增量构建,
tsc --build

  1. 构建typescript工程的操作
    • 查找当前工程所引用的工程
    • 查找当前工程和引用的工程是否有更新
    • 如果工程有更新,则根据依赖顺序重新构建,如果没有更行,则不进行重新构建
  2. –verbose: 打印构建的详细日志信息,可以与一下的编译选项一起使用
  3. –dry: 打印将要执行的操作,不进行真正的构建
  4. –clean: 删除工程中编译输出的文件,可以与–dry 一起使用
  5. –force: 强制重新编译工程,不管工程是否有更新
  6. –watch: 观察模式,执行编译命令后不退出,等待工程有更新之后自动的编译工程
solution模式

当一个项目由多个工程组成的时候,可以创建一个solution工程来管理这些工程。solution工程本身不包含任何实际代码,引用了项目中所有的工程将他们关联在一起。
在总的项目目录中生成一个tsconfig.json配置文件,让这个总的目录称为一个solution工程

total 
        a
        b
        tsconfig.json
{
    "files":[],
    "include":[],
    "references":[
        {"path":"src"},
        {"path":"test"}
    ]
}

在a,b项目中的配置文件,必须将files和include属性设置为空数组
在目录中使用–build模式来编译该工程。

相关推荐

  1. typescript 编译配置

    2024-04-21 17:18:03       39 阅读
  2. TypeScript 常见配置

    2024-04-21 17:18:03       70 阅读
  3. vite 配置 typescript 环境

    2024-04-21 17:18:03       34 阅读
  4. Typescript---编译选项tsconfig.json 02

    2024-04-21 17:18:03       58 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-04-21 17:18:03       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-04-21 17:18:03       106 阅读
  3. 在Django里面运行非项目文件

    2024-04-21 17:18:03       87 阅读
  4. Python语言-面向对象

    2024-04-21 17:18:03       96 阅读

热门阅读

  1. Edge浏览器:使用心得与深度探索

    2024-04-21 17:18:03       33 阅读
  2. arm 作业 24/4/17

    2024-04-21 17:18:03       33 阅读
  3. 小程序插件引入宿主的函数

    2024-04-21 17:18:03       33 阅读
  4. docker 安装nacos最新版本单机版

    2024-04-21 17:18:03       32 阅读
  5. 【PHP快速上手(十四)】

    2024-04-21 17:18:03       33 阅读
  6. python学习笔记22 excel汇总

    2024-04-21 17:18:03       78 阅读
  7. 【云计算】混合云组成、应用场景、风险挑战

    2024-04-21 17:18:03       63 阅读
  8. kafka 的零拷贝原理

    2024-04-21 17:18:03       35 阅读
  9. 360春招笔试题

    2024-04-21 17:18:03       40 阅读
  10. 最新版GPT-4.5-Turbo简单介绍

    2024-04-21 17:18:03       36 阅读