TypeScript

tsconfig 文件配置选项介绍

compilerOptions编译选项

target用于指定编译之后的版本目录 “target”: “es5”,

module用来指定要使用的模板标准 “module”: “commonjs”,

lib用于指定要包含在编译中的库文件 “lib”:[ “es6”, “dom” ],

allowJs用来指定是否允许编译JS文件,默认false,即不编译JS文件 “allowJs”: true,

checkJs用来指定是否检查和报告JS文件中的错误,默认false “checkJs”: true,

指定jsx代码用于的开发环境:’preserve’,’react-native’,or ‘react “jsx”: “preserve”,

declaration用来指定是否在编译的时候生成相的d.ts声明文件,如果设为true,编译每个ts文件之后会生成一个js文件和一个声明文件,但是declaration和allowJs不能同时设为true “declaration”: true,

declarationMap用来指定编译时是否生成.map文件 “declarationMap”: true,

socuceMap用来指定编译时是否生成.map文件 “sourceMap”: true,

outFile用于指定输出文件合并为一个文件,只有设置module的值为amd和system模块时才支持这个配置 “outFile”: “./“,

outDir用来指定输出文件夹,值为一个文件夹路径字符串,输出的文件都将放置在这个文件夹 “outDir”: “./“,

rootDir用来指定编译文件的根目录,编译器会在根目录查找入口文件 “rootDir”: “./“,

composite是否编译构建引用项目 “composite”: true,

removeComments用于指定是否将编译后的文件注释删掉,设为true的话即删除注释,默认为false “removeComments”: true,

noEmit不生成编译文件 “noEmit”: true,

importHelpers指定是否引入tslib里的复制工具函数,默认为false “importHelpers”: true,

当target为”ES5”或”ES3”时,为”for-of” “spread”和”destructuring”中的迭代器提供完全支持 “downlevelIteration”: true,

isolatedModules指定是否将每个文件作为单独的模块,默认为true,他不可以和declaration同时设定 “isolatedModules”: true,

strict用于指定是否启动所有类型检查,如果设为true这回同时开启下面这几个严格检查,默认为false “strict”: true,

noImplicitAny如果我们没有一些值设置明确类型,编译器会默认认为这个值为any类型,如果将noImplicitAny设为true,则如果没有设置明确的类型会报错,默认值为false “noImplicitAny”: true,

strictNullChecks当设为true时,null和undefined值不能赋值给非这两种类型的值,别的类型的值也不能赋给他们,除了any类型,还有个例外就是undefined可以赋值给void类型 “strictNullChecks”: true,

strictFunctionTypes用来指定是否使用函数参数双向协变检查 “strictFunctionTypes”: true,

strictBindCallApply设为true后对bind、call和apply绑定的方法的参数的检测是严格检测 “strictBindCallApply”: true,

strictPropertyInitialization设为true后会检查类的非undefined属性是否已经在构造函数里初始化,如果要开启这项,需要同时开启strictNullChecks,默认为false “strictPropertyInitialization”: true,

当this表达式的值为any类型的时候,生成一个错误 “noImplicitThis”: true,

alwaysStrict指定始终以严格模式检查每个模块,并且在编译之后的JS文件中加入”use strict”字符串,用来告诉浏览器该JS为严格模式 “alwaysStrict”: true,

noUnusedLocals用于检查是否有定义了但是没有使用变量,对于这一点的检测,使用ESLint可以在你书写代码的时候做提示,你可以配合使用,他的默认值为false “noUnusedLocals”: true,

noUnusedParameters用于检测是否在函数中没有使用的参数 “noUnusedParameters”: true,

noImplicitReturns用于检查函数是否有返回值,设为true后,如果函数没有返回值则会提示,默认为false “noImplicitReturns”: true,

noFallthroughCasesInSwitch用于检查switch中是否有case没有使用break跳出switch,默认为false “noFallthroughCasesInSwitch”: true,

moduleResolution用于选择模块解析策略,有”node”和”classic”两种类型 “moduleResolution”: “node”,

baseUrl用于设置解析非相对模块名称的基本目录,相对模块不会受到baseUrl的影响 “baseUrl”: “./“,

paths用于设置模块名到基于baseUrl的路径映射 “paths”: { “*”:[“./node_modules/@types”, “./typings/*”] },

rootDirs可以指定一个路径列表,在构建时编译器会将这个路径中的内容都放到一个文件夹中 “rootDirs”: [],

typeRoots用来指定声明文件或文件夹的路径列表,如果指定了此项,则只有在这里列出的声明文件才会被加载 “typeRoots”: [],

types用于指定需要包含的模块,只有在这里列出的模块的声明文件才会被加载 “types”: [],

allowSyntheticDefaultImports用来指定允许从没有默认导出的模块中默认导入 “allowSyntheticDefaultImports”: true,

esModuleInterop通过导入内容创建命名空间,实现CommonJS和ES模块之间的互操作性 “esModuleInterop”: true,

不把符号链接解析为真实路径,具体可以了解下webpack和node.js的symlink相关知识 “preserveSymlinks”: true,

sourceRoot用于指定调试器应该找到TypeScript文件而不是源文件的位置,这个值会被写进.map文件里 “sourceRoot”: “”,

mapRoot用于指定调试器找到映射文件而非生成文件的位置,指定map文件的根路径,该选项会影响.map文件中的sources属性 “mapRoot”: “”,

inlineSourceMap指定是否将map文件内容和js文件编译在一个同一个js文件中,如果设为true,则map的内容会以//#soureMappingURL=开头,然后接base64字符串的形式插入在js文件底部 “inlineSourceMap”: true,

inlineSources用于指定是否进一步将ts文件的内容也包含到输出文件中 “inlineSources”: true,

experimentalDecorators用于指定是否启用实验性的装饰器特性 “experimentalDecorators”: true,

emitDecoratorMetadata用于指定是否为装上去提供元数据支持,关于元数据,也是ES6的新标准,可以通过Reflect提供的静态方法获取元数据,如果需要使用Reflect的一些方法,需要引用ES2015.Reflect这个库 “emitDecoratorMetadata”: true,

include也可以指定要编译的路径列表 “include”:[],

files可以配置一个数组列表 “files”:[],

exclude表示要排除的,不编译的文件,它也可以指定一个列表,规则和include一样,可以是文件可以是文件夹,可以是相对路径或绝对路径,可以使用通配符 “exclude”:[]

extends可以通过指定一个其他的tsconfig.json文件路径,来继承这个配置文件里的配置,继承来的文件的配置会覆盖当前文件定义的配置 “extends”:””

compileOnSave如果设为true,在我们编辑了项目文件保存的时候,编辑器会根据tsconfig.json的配置更新重新生成文本,不过这个编辑器支持 “compileOnSave”:true

一个对象数组,指定要引用的项目 “references”:[]

ts+webpack4环境构建

安装Node.js

初始化项目

npm init

全局安装typescript

mac电脑需要在npm 前面加sudo,代表以管理员身份运行 npm install webpack webpack-cli typescript ts-loader –save-dev 安装成功后进入项目根目录

用tsc命令进行初始化

tsc --init

此时项目根目录多了一个tsconfig.json文件

添加webpack

npm install webpack-cli webpack dev-server -D

写webpck的配置文件

创建一个build文件夹,里面创建webpack.config.js文件, 代码如下:

const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin }  = require('clean-webpack-plugin')
//使用node的模块
module.exports = {
    //这就是我们项目编译的入口文件
    entry: "./src/index.ts",
    output: {
        filename: "main.js"
    },
    resolve: {
        extensions: ['.ts','tsx','.js']
    },
    //这里可以配置一些对指定文件的处理
    //这里匹配后缀为ts或者tsx的文件
    //使用exclude来排除一些文件
    module:{
        rules:[
            {
                test:/\.tsx?$/,
                use:'ts-loader',
                exclude: /node_modules/
            }
        ]
    },
    //这个参数就可以在webpack中获取到了
    devtool: process.env.NODE_ENV === 'production'? false : 'inline-source-map',
    devServer:{
        //这个本地开发环境运行时是基于哪个文件夹作为根目录
        contentBase:'./dist',
        //当你有错误的时候在控制台打出
        stats: 'errors-only',
        //不启动压缩
        compress: false,
        host: 'localhost',
        port: 8081
    },
    //这里就是一些插件
    plugins:[
        new CleanWebpackPlugin({
            cleanOnceBeforeBuildPatterns: ['./dist']
        }),
        new HtmlWebpackPlugin({
            template: './src/template/index.html'
        })
    ]
}

安装ts-loader

解析ts文件转换成浏览器可以识别的文件(webpack)

npm install ts-loader -D

安装cross-env

用于设置环境变量的,方便设置开发环境和生产环境

npm install cross-env -D

安装一些插件

clean-webpack-plugin 能清理一些指定的文件夹 html-webpack-plugin 指定一个编译的模型

npm install clean-webpack-plugin html-webpack-plugin -D

项目中安装typescript依赖

npm install typescript //之前是全局安装

在package.json文件写指定命令

上边weapack的命令已经写好了,下边我们就在package.json文件中写指定的命令:

  "scripts": {
    "start": "cross-env NODE_ENV=development webpack-dev-server --config ./build/webpack.config.js",
    "build": "cross-env NODE_ENV=production webpack --config ./build/webpack.config.js"
  },

写代码测试一下,启动本地服务器执行,安装完毕后

npm start

打包执行 npm run build 之后就多了个dist目录

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • webSocket

    jinghong
  • JS中Buffer数据详解

    随着WebSocket、WebAudio、Ajax2等广泛应用,前端方面只要是处理大数据或者想提高数据处理性能,那一定是少不了 ArrayBuffer对象

    jinghong
  • Linux 基础

    稳定性:取决于系统的底层架构,一般情况下 Linux 系统能做到很长时间不关机一点也不卡顿;

    jinghong
  • 怎么把PPT转成Word格式?好用的格式转换工具

    把ppt转换成word,乍一听似乎是不可能的事,但是时代在进步,社会在发展。不说那些非常难的方法,就是直接复制粘贴也是有可能的,将ppt中的内容直接粘贴到wor...

    用户4938982
  • 人工智能公司Next IT公司总裁Rick Collins:理解人工智能在企业中的角色

    过去几个月,机器人程序一直是在互联网上热议的话题。 微软、Facebook等科技业大公司都在向开发者开放了自己的人工智能平台。这些开放的工具和平台意味着,业界向...

    AI科技评论
  • CMake与Make

    但如果源文件太多,一个一个编译时就会特别麻烦,于是人们想到,为什么不设计一种类似批处理的程序,来批处理编译源文件呢,于是就有了make工具,它是一个自动化编译...

    bear_fish
  • CodeCraft-19 and Codeforces Round #537 (Div. 2) C. Creative Snap(二分+分治)

    题目链接:https://codeforces.com/contest/1111/problem/C

    Ch_Zaqdt
  • 溯源智能:从触觉大脑到人工智能危机 —《机器崛起前传—自我意识与人类智慧的开端》新书推介

    新智元推荐 人工智能所能企及的高度即使存在争论,这个时代所面临的危机也不可避免。作为一本科学与人文、学术与科普之功兼具的人工智能著作,该书并未拘泥于每一秒...

    新智元
  • 嘿,你有没有发现我今天有什么不同?

    ? 几乎每个人都曾遇到过“直男天问”。 所谓天问,自古以来它的答案都是显而易见的。它厉害的地方在于:答对了送分,答错了“送命”。 下面举个例子 ? 某天,你女...

    腾讯技术工程官方号
  • 一日一技:不用轮询,基于事件监控文件变动

    我们经常会遇到监控文件变化的需求。例如日志监控程序监控日志文件,一旦日志文件发生变化,就进行读取。或者是大批量爬虫的规则配置文件监控,爬虫本身持续运行,一旦规则...

    青南

扫码关注云+社区

领取腾讯云代金券