主页

TS-基础

370阅读 查看0条评论

cover

TypeScript 介绍

TypeScript（简称TS）是 JavaScript 的超集（JS有的TS都有）
TypeScript = Type + JavaScript（在JS基础之上，为 JS 添加了类型支持）
TypeScript 是微软开发的开源编程语言，可以在任何运行 JavaScript 的地方运行

// TypeScript 代码：有明确的类型，即 : nmber (数值类型)
let age1: number = 18

// JavaScript 代码：无明确的类型
let age2 = 18


TypeScript 为什么要为 JS 添加类型支持

背景：JS 的类型系统存在 “先天缺陷”，JS 代码中绝大部分错误都是类型错误（Uncaught TypeError）
问题：增加了找Bug、改Bug的时间，严重影响开发效率

从编程语言的动静来区分，TypeScript 属于静态类型的编程语言，JS 属于动态类型的编程语言
静态类型：编译期做类型检查；动态类型：执行期做类型检查
代码编译和代码执行的顺序：1 编译 2 执行

对于 JS 来说：需要等到代码真正去执行的时候才能发现错误（晚）
对于 TS 来说：在代码编译的时候（代码执行前）就可以能发现错误（早）
并且，配合 VSCode 等开发工具，TS 可以提前到在编写代码的同时就发现代码中的错误，减少找Bug、改Bug时间



TypeScript 相比于 JS 的优势

  1. 更早（写代码的同时）发现错误，减少找Bug、改Bug时间，提高开发效率
  2. 程序中任何位置的代码都有代码提示，增强开发体验
  3. 更强大的类型系统提升了代码的可维护性，使得重构代码更加容易
  4. 支持最新的 ECMAScript 语法，优先体验最新的语法
  5. TS 类型推断机制，不需要再代码中的每个地方都显示标注类型
除此之外，Vue3 源码使用 TS 重写、Angular 默认支持 TS、React 与 TS 完美配合，TypeScript 已成为大中型前端项目的首先编程语言

TypeScript 使用

安装编译 TS 的工具包

Node.js/浏览器，只认识JS代码，不认识TS代码。需要先将TS代码转化为JS代码，然后才能运行

# 安装命令
npm i -g typescript

#查看 typescript 的版本
tsc -v

typescript包：用来编译TS代码的包，提供了 tsc 命令，实现了 TS -> JS 的转化

# 安装命令
npm i -g ts-node

# 使用方式
ts-node hello.ts

编译选项

自动编译文件

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

tsc xxx.ts -w

自动编译整个项目

  • 如果直接使用 tsc 指令，则可以自动将当前项目下的所有 ts 文件编译为 js 文件。
  • 但是能直接使用 tsc 命令的前提时，要先在项目根目录下创建一个 ts 的配置文件 tsconfig.json
  • tsconfig.json 是一个 JSON 文件，添加配置文件后，只需只需 tsc 命令即可完成对整个项目的编译

配置选项：

include

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

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

    {
"include":["src/**/*", "tests/**/*"]
}
    上述示例中，所有 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
    • noEmitOnError 当有错误时不生成编译后的文件，默认值 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

webpack

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

步骤 1

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

步骤 2

  • 下载构建工具

    npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin html-webpack-plugin

    共安装了 8 个包

  • 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 中的清除插件，每次构建都会先清除目录
  • html-webpack-plugin 帮助我们自动生成 html 文件

步骤 3

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

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
    mode: 'development', // development开发环境、production生产环境

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

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

    devtool: "inline-source-map",

    /* devServer: {
        contentBase: './dist'
    }, */
    devServer: {
        static: {
            directory: path.join(__dirname, './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测试', 
            // template:'./src/index.html' // html模板
        }),
    ]
}

步骤 4

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

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

步骤 5

修改 package.json 添加如下配置

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

步骤 6

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

Babel

经过一系列的配置，使得 TS 和 webpack 已经结合到了一起，除了 webpack，开发中还经常需要结合 babel 来对代码进行转换以使其可以兼容到更多的浏览器，在上述步骤的基础上，通过以下步骤再将 babel 引入到项目中

步骤 1

安装依赖包：npm i -D @babel/core @babel/preset-env babel-loader core-js

共安装了4个包，分别是：

  1. @babel/core babel 的核心工具
  2. @babel/preset-env babel 的预定义环境
  3. @babel-loader babel 在 webpack 中的加载器
  4. 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",
                                    "useBuiltIns": "usage"
                                }
                            ]
                        ]
                    }
                },
                {
                    loader: "ts-loader",
                }
            ],
            exclude: /node_modules/
        }
    ]
}
...略...
如此一来，使用 ts 编译后的文件将会再次被 babel 处理，使得代码可以在大部分浏览器中直接使用，可以在配置选项的 targets 中指定要兼容的浏览器版本。

TypeScript

版权属于：Joe
本文链接： https://blog.qiaofugui.cn/1075.html
作品采用：本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。
1

目录

来自 《TS-基础》
评论

qiaofugui

博主很懒，啥都没有
188 文章数
14 评论量
3 分类数
191 页面数
已在风雨中度过 2年136天4小时32分
博主 爱心 另一半
可能感兴趣
网页布局总结
2022-06-16
JS-时间对象
2022-07-25
JS-内置对象
2022-07-15