从环境搭建到打包使用TypeScript

目录

• 1、TypeScript是什么
• 2、TypeScript增加了什么
• 3、TypeScript环境的搭建
• 4、TypeScript的基本类型
• 5、TypeScrip编译选项
• 6、TypeScrip的打包
• 7、TypeScrip的兼容性

1、TypeScript是什么

• 以JavaScript为基础构建的语言，一个JavaScript的超集
• 对JS进行了拓展，向JS中引入类型的概念，并且添加了许多新的特性
• 支持在任何支持JavaScript的平台中执行
• TS的最终目的是为了项目易维护，易书写

2、TypeScript增加了什么

• 增加了类型，增加支持ES的新特性，增加ES不具备的新特性
• 增加丰富的配置选项，相较于JS而言，TS拥有了静态类型，更加严格的语法，更强大的功能，TS可以在代码执行前就完成代码的检查，减小了运行时异常的几率
• 相同的功能用TS的代码量远大于JS实现，但由于TS的代码结构更加清晰，变量类型更加明确，在后期代码的维护中TS远远胜于JS

3、TypeScript环境的搭建

1、下载node.js

2、安装node.js

3、使用npm全局安装typescript

• 进入命令行
• 输入 npm install -g typescript

4、创建一个TS文件

5、使用tsc对文件进行编译

• 在文件所在目录打开终端
• 输入 tsc xxx.ts

6、如果编辑器不能tsc编辑是没有cmd的权限，给命令行工具管理员权限就可解决问题 附链接

4、TypeScript的基本类型

• 类型声明

类型声明是TS非常重要的一个特点，通过类型声明可以指定TS中变量、形参、实参的类型，指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合就赋值否则就报错。总结：类型声明给变量设置了类型，是的变量只能存储某种类型的值

let 变量:类型
let 变量：类型 = 值
function fn(形参：类型，形参：类型)：类型{}//外面的类型限制了fn的返回值的类型

// never 表示永远不会返回结果
function fnx(): never{
    throw new Error('报错了！');
}

• 自动类型判断

  • TS拥有自动的类型判断机制
  • 当对变量的声明和赋值是同时进行的
  • 所以如果你的变量的声明和赋值是同时进行的，可以省略类型声明

• 类型

  类型	例子	描述
  number	1，33，2.5	任意数字
  string	'hi',"hi",hi	任意字符串
  boolean	true、false	布尔值true或false
  字面量	其本身	限制变量的值就是该字面量的值
  any	*	任意类型
  unknown	*	类型安全的any
  void	空值（undefined）	没有值（或undefined）
  never	没有值	不能是任何值
  object	｛name：'肉丝'｝	任意的JS对象
  array	[1,2,3]	任意JS数组
  tuple	[4,5]	元素，TS新增类型，固定长度数组
  enum	enum｛A,B｝	枚举，TS中新增类型

• number

  • let decimal:number = 6 //十进制
    let hex:number = 0xf00d //十六进制
    let binary:number = 0b1010 //二进制
    let octal:number = 0o744 //八进制
    let big:bigint = 100n // 大字节
    

• boolean

  • let isDone:boolean = false
    

• string

  • let color:string = 'blue'
    color = 'red'
    
    let fullNmae:string = `Bob Bobbington`
    let age:number = 37
    let sentence:string = `Hello , my name is ${fullname}`
    
    I'll be ${age + 1} years old next month
    

• 字面量

  • 也可以使用字面量去指定变量的类型，通过字面量可以确定变量的取值范围

  • let color:'red' | 'blue' | 'black'
    let num:1 | 2 | 3 | 4 | 5 ;
    

• any

  • let d:any = 4
    d = 'hello'
    d = true
    // 存在的问题是变量d可以赋值给其他变量
    

• unknown

  • let unusable:unknown = undefined
    

• never

  • function error(message:string):never {
    	throw new Error(message)
    }
    

• object (没啥用)

  • let obj:object = {}
    

• tuple

  • 元组，规定了元素的类型顺序必须完全对照的

  • let x: [string,number]
    x = ["hello",10]
    

  • 元组类型允许在元素类型后缀一个 ? 来说明元素是可选的：

    • const list :[number,string?,boolean?]
      list = [1,'calm',true]
      list = [10,'calm']
      list = [10]
      

  • 元组类型的Rest使用

• array

  • let list : number[] = [1,2,3]
    let list : Array<number> = [1,2,3]
    

• 类型断言

  • 有些情况下，变量的类型对于我们来说是很明确，但是TS编译器却并不清除，此时可以通过类型断言来告诉编译器变量的类型，断言的两种形式

    • 第一种

      • let someValue : unknown = "this is a string"
        let strLength : number = (someValue as string).length
        

    • 第二种

      • let someValue : unknown = "this is a string"
        let strLength : number = (<string>someValue).length
        

5、TypeScrip编译选项

• 自动编译文件

  • 编译文件时，使用-w命令后，TS编译器会自动监视文件的变化，并在文件发生变化时对文件进行重新编译

    tsc example.ts -w
    

• 自动编译整个项目

  • 如果直接使用tsc指令，则可以自动将当前项目下的所有的文件编译为js文件，但是直接使用tsc命令的前提是要现在项目根目录下创建一个ts配置文件 tsconfig.json

  • TSCONFIG.JSON是一个JSON文件，添加配置文件后，只需tsc命令即可完成对整个项目的编译

  • 配置选项

    • include

      • 定义希望被编译文件的所在的目录

      • 默认值：["**/*"]

      • 示例

        • "include":["src/**/*","test/**/*"]
          

        • 上述示例中，所有src目录和tests目录下的文件都会被编译

• exclude

  • 定义需要排除在外的目录

  • 默认值：["node_modules", "bower_components", "jspm_packages"]

  • 示例：

    • "exclude": ["./src/hello/**/*"]
      

    • 上述示例中，src下hello目录下的文件都不会被编译

• extends

  • 定义被继承的配置文件

  • 示例：

    • "extends": "./configs/base"
      

    • 上述示例中，当前配置文件中会自动包含config目录下base.json中的所有配置信息

• files

  • 指定被编译文件的列表，只有需要编译的文件少时才会用到

  • 示例：

    • "files": [
          "core.ts",
          "sys.ts",
          "types.ts",
          "scanner.ts",
          "parser.ts",
          "utilities.ts",
          "binder.ts",
          "checker.ts",
          "tsc.ts"
        ]
      

    • 列表中的文件都会被TS编译器所编译

  • compilerOptions

    • 编译选项是配置文件中非常重要也比较复杂的配置选项

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

      • 项目选项

        • target

          • 设置ts代码编译的目标版本

          • 可选值：

            • ES3（默认）、ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext

          • 示例：

            • "compilerOptions": {
                  "target": "ES6"
              }
              

            • 如上设置，我们所编写的ts代码将会被编译为ES6版本的js代码

        • lib

          • 指定代码运行时所包含的库（宿主环境）

          • 可选值：

            • ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext、DOM、WebWorker、ScriptHost ......

          • 示例：

            • "compilerOptions": {
                  "target": "ES6",
                  "lib": ["ES6", "DOM"],
                  "outDir": "dist",
                  "outFile": "dist/aa.js"
              }
              

        • module

          • 设置编译后代码使用的模块化系统

          • 可选值：

            • CommonJS、UMD、AMD、System、ES2020、ESNext、None

          • 示例：

            • "compilerOptions": {
                  "module": "CommonJS"
              }
              

        • outDir

          • 编译后文件的所在目录

          • 默认情况下，编译后的js文件会和ts文件位于相同的目录，设置outDir后可以改变编译后文件的位置

          • 示例：

            • "compilerOptions": {
                  "outDir": "dist"
              }
              

            • 设置后编译后的js文件将会生成到dist目录

        • outFile

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

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

          • 示例：

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

        • rootDir

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

          • 示例：

            • "compilerOptions": {
                  "rootDir": "./src"
              }
              

        • allowJs

          • 是否对js文件编译

        • checkJs

          • 是否对js文件进行检查

          • 示例：

            • "compilerOptions": {
                  "allowJs": true,
                  "checkJs": true
              }
              

        • removeComments

          • 是否删除注释
          • 默认值：false

        • noEmit

          • 不对代码进行编译
          • 默认值：false

        • sourceMap

          • 是否生成sourceMap
          • 默认值：false

      • 严格检查

        • strict
          • 启用所有的严格检查，默认值为true，设置后相当于开启了所有的严格检查
        • alwaysStrict
          • 总是以严格模式对代码进行编译
        • noImplicitAny
          • 禁止隐式的any类型
        • noImplicitThis
          • 禁止类型不明确的this
        • strictBindCallApply
          • 严格检查bind、call和apply的参数列表
        • strictFunctionTypes
          • 严格检查函数的类型
        • strictNullChecks
          • 严格的空值检查
        • strictPropertyInitialization
          • 严格检查属性是否初始化

      • 额外检查

        • noFallthroughCasesInSwitch
          • 检查switch语句包含正确的break
        • noImplicitReturns
          • 检查函数没有隐式的返回值
        • noUnusedLocals
          • 检查未使用的局部变量
        • noUnusedParameters
          • 检查未使用的参数

      • 高级

        • allowUnreachableCode
          • 检查不可达代码
          • 可选值：
            • true，忽略不可达代码
            • false，不可达代码将引起错误
        • noEmitOnError
          • 有错误的情况下不进行编译
          • 默认值：false

6、TypeScrip的打包

通常情况下，实际开发中我们都需要使用构建工具对待吗进行打包，TS同样也可以结合构建工具一起使用，下边以webpack为例介绍一下如何结合构建共建工具使用TS

• 步骤

  • 1.初始化项目

    • 进入项目目录，执行命令 npm init -y
    • 主要作用：创建package.json

  • 2.下载构建工具

    • npm i -D webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin
    • 共安装七个包分别是
      • webpack ：构建工具
      • webpack-cli ：webpack的命令行工具
      • webpack-dev-server ：webpakc的开发服务器
      • typescript ：ts的编译器
      • ts-loader ：ts加载器，在webpack中编译ts文件
      • html-webpack-pluigin ：webpakc中html插件，用来自动创建html文件
      • clean-webpakc-plugin ： webpack中的清除插件，每次构建都会先清除目录

  • 3.根目录文件下创建webpack的配置文件webpack.config.js

    const path = require("path")
    const HtmlWebpackPlugin = require("html-webpack-plugin")
    const {cleanWbpackPlugin} = require("clean-webpack-plugin")
    module.exports = {
        optimization:{
            minimize: false // 关闭代码压缩，可选
        },
    
        entry: "./src/index.ts",
    
        devtool: "inline-source-map",
    
        devServer: {
            contentBase: './dist'
        },
    
        output: {
            path: path.resolve(__dirname, "dist"),
            filename: "bundle.js",
            environment: {
                arrowFunction: false // 关闭webpack的箭头函数，可选
            }
        },
    
        resolve: {
            extensions: [".ts", ".js"]
        },
    
        module: {
            rules: [
                {
                    test: /\.ts$/,
                    use: {
                       loader: "ts-loader"
                    },
                    exclude: /node_modules/
                }
            ]
        },
    
        plugins: [
            new CleanWebpackPlugin(),
            new HtmlWebpackPlugin({
                title:'TS测试'
            }),
        ]
    
    }
    

  • 4.根目录下创建tsconfig.json,配置可以根据自己需要

    {
    	"complierOptions":{
    		"target":"ES2015",
    		"module": "ES2015",
            "strict": true
    	}
    }
    

  • 5.修改package.json添加如下配置

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

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

配置后的完整webpack.config.js截图

package.json的完整配置

7、TypeScrip的兼容性

通过一系列的配置，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: [
             //ts结尾的文件用两个loader，分别对应两个对象的配置
                {
                    loader: "babel-loader",
                    options:{
                        presets: [
                            [
                                "@babel/preset-env",
                                {
                                    "targets":{
                                        "chrome": "58",
                                        "ie": "10"
                                    },
                                    "corejs":"3",
                                    "useBuiltIns": "usage"
                                }
                            ]
                        ]
                    }
                },
                {
                    loader: "ts-loader",

                }
            ],
            exclude: /node_modules/
        }
    ]
}

配置成功之后，使用TS编译的文件会被tsloader和babel处理，是的代码可以在大部分浏览器中直接使用，可以在配置选项的targets中指定要兼容的浏览器版本，针对ie我们一般只兼容到10