TypeScript基本介绍与开发环境

TypeScript基本介绍与开发环境

TypeScript官网

TypeScript简介

1. TypeScript是JavaScript的超集
2. 它对JS进行了扩展，向JS中引入了类型的概念，并添加了许多新的特性
3. TS代码需要通过编译器编译为JS，然后再交由JS解析器执行
4. TS完全兼容JS，换言之，任何的JS代码都可以直接当成JS使用

相较于JS而言，TS拥有了静态类型，更加严格的语法，更强大的功能；TS可以在代码执行前就完成代码的检查，减小了运行时异常的出现的几率；TS代码可以编译为任意版本的JS代码，可有效解决不同JS运行环境的兼容问题；同样的功能，TS的代码量要大于JS，但由于TS的代码结构更加清晰，变量类型更加明确，在后期代码的维护中TS却远远胜于JS

TypeScript是一种由微软开发的自由和开源的编程语言。是JavaScript的一个超集。它在保留JavaScript语言本身特性的基础上添加了大量静态语言具有的一些特性，包括但不限于以下几点：

• 可选的静态类型
• 枚举、接口和类
• 命名空间
• 模块
• Lambda表达式
• 编译时类型检查

在2013年6月微软正式发布了0.9版。之后在不断更新的过程中逐渐支持ECMAScript 2015（ES6）标准

通过利用静态语言的特性和新标准，使JavaScript开发变得越来越简单。同时也很好的符合当前前端开发的模块化、工程化的开发方式和潮流。

环境搭建

1. 安装nodejs，参考 Nodejs介绍与安装

2. 安装vscode，参考 vscode安装_扩展安装

3. 使用npm全局安装typescript

   • 进入命令行
   • 输入：npm i -g typescript

4. 创建一个ts文件

5. 使用tsc对ts文件进行编译

   • 进入命令行
   • 进入ts文件所在目录
   • 执行命令：tsc xxx.ts

不建议在全局安装typescript 即不建议使用命令 npm install -g typescript,建议在每个项目的node_modules中引入typescript，这样每个项目可以指定版本

编译配置

自动编译文件

  tsc xxx.ts -w

自动编译整个项目

• 在项目根目录下创建一个ts的配置文件 tsconfig.json
• tsconfig.json是一个JSON文件，添加配置文件后，只需只需tsc命令即可完成对整个项目的编译

tsconfig.json是ts编译器的配置文件，ts编译器可以根据它的信息来对代码进行编译

tsconfig.json示例：

{
// "include" 用来指定哪些ts文件需要被编译 **表示任意目录 *表示任意文件
  "include": [
    "./src/**/*"
  ],

// "exclude" 不需要被编译的文件目录 默认值：["node_modules", "bower_components", "jspm_packages"]
//  "exclude": [
//    "./src/hello/**/*"
//  ]

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

// 指定被编译文件的列表，只有需要编译的文件少时才会用到
// "files": ["./src/core.ts","./src/sys.ts"]

 // compilerOptions 编译器的选项
  "compilerOptions": {
    // target 用来指定ts被编译为的ES的版本
    // 'es3', 'es5', 'es6', 'es2015', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'esnext'
    "target": "es2015",

    // module 指定要使用的模块化的规范
    // 'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'es2020', 'esnext'
    "module": "es2015",

    // lib用来指定项目中要使用的库
    //'es5', 'es6', 'es2015', 'es7', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'esnext', 'dom' ...
//    "lib": ["es6", "dom"]

    // outDir 用来指定编译后文件所在的目录
    "outDir": "./dist",

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

    // 将代码合并为一个文件
    // 设置outFile后，所有的全局作用域中的代码会合并到同一个文件中
    //"outFile": "./dist/app.js"

    // 是否对js文件进行编译，默认是false
//    "allowJs": true,

    // 是否检查js代码是否符合语法规范，默认是false
//    "checkJs": true,

    // 是否移除注释
    "removeComments": true,

    // 不生成编译后的文件
    "noEmit": false,

    // 当有错误时不生成编译后的文件
    "noEmitOnError": true,

    // 所有严格检查的总开关
    "strict": true,

    // 用来设置编译后的文件是否使用严格模式，默认false
    "alwaysStrict": true,

    // 不允许隐式的any类型
    "noImplicitAny": true,

    // 不允许不明确类型的this
    "noImplicitThis": true,

    // 严格的检查空值
    "strictNullChecks": true,

    // 严格检查bind、call和apply的参数列表
    "strictBindCallApply": true,

    // 严格检查函数的类型
    "strictFunctionTypes": true,
    
    // 严格的空值检查
    "strictNullChecks": true,

    // 严格检查属性是否初始化
    "strictPropertyInitialization": true,

    // 检查switch语句包含正确的break
    "noFallthroughCasesInSwitch": true,

    // 检查函数没有隐式的返回值
    "noImplicitReturns": true,

    // 检查未使用的局部变量
    "noUnusedLocals": true,

    // 检查未使用的参数
    "noUnusedParameters": true,

    // 检查不可达代码 true，忽略不可达代码  false，不可达代码将引起错误
    "allowUnreachableCode": true,

    // 有错误的情况下不进行编译 默认值：false
    "noEmitOnError": true
  }
}

webpack Babel

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

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

下载构建工具
npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin

• 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中的清除插件，每次构建都会先清除目录

开发中还经常需要结合babel来对代码进行转换以使其可以兼容到更多的浏览器

npm i -D @babel/core @babel/preset-env babel-loader core-js

• @babel/core - babel的核心工具
• @babel/preset-env - babel的预定义环境
• @babel-loader - babel在webpack中的加载器
• core-js - core-js用来使老版本的浏览器支持新版ES语法

webpack.config.js配置文件

// 引入一个包
const path = require('path');
// 引入html插件
const HTMLWebpackPlugin = require('html-webpack-plugin');
// 引入clean插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

// webpack中的所有的配置信息都应该写在module.exports中
module.exports = {
    // 指定入口文件
    entry: "./src/index.ts",

    // 指定打包文件所在目录
    output: {
        // 指定打包文件的目录
        path: path.resolve(__dirname, 'dist'),
        // 打包后文件的文件
        filename: "bundle.js",

        // 告诉webpack不使用箭头
        environment:{
            arrowFunction: false,
            const: false
        }
    },

    // 指定webpack打包时要使用模块
    module: {
        // 指定要加载的规则
        rules: [
            {
                // test指定的是规则生效的文件
                test: /\.ts$/,
                // 要使用的loader
                use: [
                     // 配置babel
                     {
                         // 指定加载器
                         loader:"babel-loader",
                         // 设置babel
                         options: {
                             // 设置预定义的环境
                             presets:[
                                 [
                                     // 指定环境的插件
                                     "@babel/preset-env",
                                     // 配置信息
                                     {
                                         // 要兼容的目标浏览器
                                         targets:{
                                             "chrome":"58",
                                             "ie":"11"
                                         },
                                         // 指定corejs的版本
                                         "corejs":"3",
                                         // 使用corejs的方式 "usage" 表示按需加载
                                         "useBuiltIns":"usage"
                                     }
                                 ]
                             ]
                         }
                     },
                    'ts-loader'
                ],
                // 要排除的文件
                exclude: /node-modules/
            },

            // 设置less文件的处理
            {
                test: /\.less$/,
                use:[
                    "style-loader",
                    "css-loader",

                    // 引入postcss
                    {
                        loader: "postcss-loader",
                        options: {
                            postcssOptions:{
                                plugins:[
                                    [
                                        "postcss-preset-env",
                                        {
                                            browsers: 'last 2 versions'
                                        }
                                    ]
                                ]
                            }
                        }
                    },
                    "less-loader"
                ]
            }
        ]
    },

    // 配置Webpack插件
    plugins: [
        new CleanWebpackPlugin(),
        new HTMLWebpackPlugin({
            // title: "这是一个自定义的title"
            template: "./src/index.html"
        }),
    ],

    // 用来设置引用模块
    resolve: {
        extensions: ['.ts', '.js']
    }

};