1、编译选项 - tsconfig.json

使用tsc --init命令生成tsconfig.json是一个JSON文件，添加配置文件后，只需执行以下命令

  1. tsc  --完成对整个项目的打包编译 
  2. tsc -w --实时打包

配置选项：

include & exclude & files

  • include

    • 定义希望被编译文件所在的目录
    • 默认值：[“*/“] 
      //所有src目录和tests目录下的文件都会被编译
"include":["src/**/*", "tests/**/*"]

  • exclude

    • 定义需要排除在外的目录
    • 默认值：[“node_modules”, “bower_components”, “jspm_packages”] 
      //src下hello目录下的文件都不会被编译
"exclude": ["./src/hello/**/*"]

  • extends

    • 定义被继承的配置文件 
      //当前配置文件中会自动包含config目录下base.json中的所有配置信息
"extends": "./configs/base"

  • files 比较少用

    • 指定被编译文件的列表，只有需要编译的文件少时才会用到 
      //列表中的文件都会被TS编译器所编译 
"files": [
"core.ts",
"sys.ts",
"types.ts",
"scanner.ts",
"parser.ts",
"utilities.ts",
"binder.ts",
"checker.ts",
"tsc.ts"
]

compilerOptions

compilerOptions中包含多个子选项，用来完成对编译的配置

  • target

    • 设置ts代码编译的目标版本
    • ES5（默认）、ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext
      //我们所编写的ts代码将会被编译为ES6版本的js代码
"compilerOptions": {
"target": "ES6"
}

  • lib

    • 指定代码运行时所包含的库（宿主环境）
    • ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext、DOM、WebWorker、ScriptHost ……
      //用了DOM这个库 才考研使用document.XXX
"compilerOptions": {
"lib": ["ES6", "DOM"],
}

  • module

    • 设置编译后代码使用的模块化系统
    • CommonJS、UMD、AMD、System、ES2020、ESNext、None
      //我们所编写的ts代码将会变成CommonJS的模块化导入导出 module.export * import()
"compilerOptions": {
"module": "CommonJS"
}

  • outDir

    • 编译后文件的所在目录
    • 默认情况下，编译后的js文件会和ts文件位于相同的目录，设置outDir后可以改变编译后文件的位置 
      //编译后的js文件将会生成到dist目录 
"compilerOptions": {
"outDir": "dist"
}

  • outFile

  • 将所有的文件编译为一个js文件

  • 默认会将所有的编写在全局作用域中的代码合并为一个js文件，如果module制定了None、System或AMD则会将模块一起合并到文件之中 

    "compilerOptions": {
  "outFile": "dist/app.js"
}

  • rootDir

    • 指定代码的根目录，默认情况下编译后文件的目录结构会以最长的公共目录为根目录，通过rootDir可以手动指定根目录 
      "compilerOptions": {
"rootDir": "./src"
}

  • allowJs

    • 是否对js文件编译 
      //当你的文件夹中有js文件是否要跟ts文件一起编译到输出 false则只有ts会被输出
"compilerOptions": {
"allowJs": "true"
}

  • checkJs

    • 是否对js文件进行检查 
      //开启后 会对js检查
"compilerOptions": {
"checkJs": true
}

      其他配置项

      |
      - removeComments
      |
      - 是否删除注释
      - 默认值：false
      | | —- | —- | |
      - noEmit
      |
      - 不对代码进行编译
      - 默认值：false
      | |
      - sourceMap
      |
      - 是否生成sourceMap
      - 默认值：false
      | | 严格检查 | | |
      - strict 总开关设置以下所有严格检查
      |
      - 启用所有的严格检查，默认值为true，设置后相当于开启了所有的严格检查
      | |
      - alwaysStrict
      |
      - 总是以严格模式对代码进行编译
      | |
      - noImplicitAny
      |
      - 禁止隐式的any类型 (没有定义类型)
      | |
      - noImplicitThis
      |
      - 禁止类型不明确的this (因为this是被调用有指向性的)
      | |
      - strictBindCallApply
      |
      - 严格检查bind、call和apply的参数列表
      | |
      - strictFunctionTypes
      |
      - 严格检查函数的类型
      | |
      - strictNullChecks
      |
      - 严格的空值检查 (例如获取一个按钮添加事件,但按钮可能获取不到)
      | |
      - strictPropertyInitialization
      |
      - 严格检查属性是否初始化
      | | 额外检查 | | |
      - noFallthroughCasesInSwitch
      |
      - 检查switch语句包含正确的break
      | |
      - noImplicitReturns
      |
      - 检查函数没有隐式的返回值
      | |
      - noUnusedLocals
      |
      - 检查未使用的局部变量
      | |
      - noUnusedParameters
      |
      - 检查未使用的参数
      | | 高级 | | |
      - allowUnreachableCode
      |
      - 检查不可达代码 true | false
      | |
      - noEmitOnError
      |
      - 有错误的情况下不进行编译 默认值：false
      |

2、webpack

  • 通常情况下，实际开发中我们都需要使用构建工具对代码进行打包，TS同样也可以结合构建工具一起使用，下边以webpack为例介绍一下如何结合构建工具使用TS。
  • 步骤：
  1. 初始化项目
    1. 进入项目根目录，执行命令 npm init -y
    2. 主要作用：创建package.json文件
  2. 下载构建工具
  3. npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader html-webpack-plugin clean-webpack-plugin
    • 共安装了7个包
      • webpack
        • 构建工具webpack
      • webpack-cli
        • webpack的命令行工具
      • webpack-dev-server
        • webpack的开发服务器
      • typescript
        • ts编译器
      • ts-loader
        • ts加载器，用于在webpack中编译ts文件
      • html-webpack-plugin
        • webpack中html插件，用来自动创建html文件
      • clean-webpack-plugin
        • webpack中的清除插件，每次构建都会先清除目录
  4. 根目录下创建webpack的配置文件webpack.config.js ```javascript const path = require(“path”); const HtmlWebpackPlugin = require(“html-webpack-plugin”); //生成html const { CleanWebpackPlugin } = require(“clean-webpack-plugin”); //清除打包目录

module.exports = { optimization:{ minimize: false // 关闭代码压缩，可选 },

entry: "./src/index.ts",

devtool: "inline-source-map",

devServer: {
    //contentBase: './dist',//4.0
      static: './dist',//5.0
},

output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    environment: {
        arrowFunction: false // 关闭webpack打包后的箭头函数（自己写的代码经过babel后可以转成非箭头函数，但webpack打包后会有一个），防止ie浏览器不支持，可选
    }
},
    //不写该项 模块化导入ts时会报错找不到
resolve: {
    extensions: [".ts", ".js"] //配置省略文件路径的后缀名（引入时就可以不写文件后缀名了）
},

module: {
    rules: [
        {
            test: /\.ts$/,
            use: {
               loader: "ts-loader"     
            },
            exclude: /node_modules/
        }
    ]
},

plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
        title:'TS测试'
    }),
]

}


4.  根目录下`tst --init`命令 创建tsconfig.json，配置可以根据自己需要 

```json
{
    "compilerOptions": {
        "target": "ES2015",
        "module": "ES2015",
        "strict": true
    }
}

  1. 修改package.json添加如下配置 

    {
...略...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack serve --open chrome.exe"
},
...略...
}

  2. 在src下创建ts文件，并在并命令行执行npm run build对代码进行编译，或者执行npm start来启动开发服务器

3、Babel

  • 经过一系列的配置，使得TS和webpack已经结合到了一起，除了webpack，开发中还经常需要结合babel来对代码进行转换以使其可以兼容到更多的浏览器，在上述步骤的基础上，通过以下步骤再将babel引入到项目中。
    1. 安装依赖包：
      • npm i -D @babel/core @babel/preset-env babel-loader core-js
      • 共安装了4个包，分别是：
        • @babel/core
          • babel的核心工具
        • @babel/preset-env
          • babel的预定义环境
        • @babel-loader
          • babel在webpack中的加载器
        • core-js
          • core-js用来使老版本的浏览器支持新版ES语法
    2. 修改webpack.config.js配置文件 
      • ...略...
module: {
rules: [
{
 test: /\.ts$/,
 use: [
     {
         loader: "babel-loader",
         options:{
           //设置预定的环境
             presets: [
                 [
                   //指定环境的插件
                     "@babel/preset-env",
                     {
                       //要兼容的目标浏览器版本
                         "targets":{
                             "chrome": "58",
                             "ie": "11"
                         },
                         "corejs":"3",//用core-js3版本
                         "useBuiltIns": "usage"//使用core-js的方法 按需加载
                     }
                 ]
             ]
         }
     },
     {
         loader: "ts-loader",
     }
 ],
 exclude: /node_modules/
}
]
}
...略...
        如此一来，使用ts编译后的文件将会再次被babel处理，使得代码可以在大部分浏览器中直接使用，可以在配置选项的targets中指定要兼容的浏览器版本。

        4、命名空间 namespace

        命名空间最明确的目的就是解决重名问题, 利用namespace声明空间

        one.ts 提供一个命名空间

export namespace One {
  export const myname = 'Amanda'

  export function add(n: number, m: number): number {
    return n + m
  }
}

index.ts 导入使用

import { One } from './test'
//导入第二个 使用Two.xx
//import { Two } from './test2'

console.log(One.myname);
console.log(One.add(1, 2));

5、文件声明 d.ts

基本声明引用

当我们写一个js文件 ，该文件被ts文件引用时，由于没有声明文件，ts文件在使用时会报错，这时需要声明一个xx.d.ts文件来告诉引用该文件的ts文件 每个东西是做什么用的
案例如下

test.js

let myname = 'Jim'

function add(n, m) {
  return n + m
}

function Person(name, age) {
  this.name = name;
  this.age = age
}

import { One } from './test'
console.log(One.add(1, 2));

import loadsh from 'lodash'

import './img.png'

test.d.ts 声明文件

//声明变量
declare let myname: string;
//声明函数
declare function add(n: number, m: number): number
//声明构造函数
declare class Person {
  name: string;
  age: number;

  constructor(name: string, age: number)
}
//声明命名空间
declare namespace One {
  export function add(n: number, m: number): number
}
//声明模块
declare module 'lodash' {
  export function jpin(arr: any[]): void;
}
//声明模块图片
declare module '*.png'

第三方库

当使用第三方库时，我们需要引用它的声明文件，才能获得对应的代码补全、接口提示等功能
什么是声明语句

假如我们想使用第三方库 jQuery

完整解决过程

  1. 执行 npm install jquery
  2. import JQuery from "jquery" —报错找不到模块
  3. 声明一个jQuery.d.ts或者下载声明文件npm install @types/jquery --save-dev下载后会在node_modules/@types路径下
  4. 此时仍旧报错 解决如下
    //此时仍旧报错"此模块是使用 "export =" 声明的，只能在使用 "allowSyntheticDefaultImports" 标志时进行默认导入" 
//解决: 
//tsconfig.json
{
 "compilerOptions": {
     "allowSyntheticDefaultImports":true
 }
}

    解析过程

    假如我们想使用第三方库 jQuery ```typescript / 当使用第三方库时，我们需要引用它的声明文件，才能获得对应的代码补全、接口提示等功能。 声明语句: 如果需要ts对新的语法进行检查, 需要要加载了对应的类型说明代码 declare var jQuery: (selector: string) => any; 声明文件: 把声明语句放到一个单独的文件（jQuery.d.ts）中, ts会自动解析到项目中所有声明文件 下载声明文件: npm install @types/jquery —save-dev /

jQuery(‘#foo’); // ERROR: Cannot find name ‘jQuery’.

这时，我们需要使用 declare var 来定义它的类型
```typescript
declare var jQuery: (selector: string) => any;

jQuery('#foo');

declare var 并没有真的定义一个变量，只是定义了全局变量 jQuery 的类型，仅仅会用于编译时的检查，在编译结果中会被删除。

一般声明文件都会单独写成一个 xxx.d.ts 文件
创建 01_jQuery.d.ts, 将声明语句定义其中, TS编译器会扫描并加载项目中所有的TS声明文件

下载第三方类库声明文件

有的第三方类库有自己的声明文件（如axios），有的则没有（如lodash），没有的需要下载对应
查询对应类库的声明文件https://www.typescriptlang.org/dt/search?search=