[JavaScript知识库] TypeScript 详解

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> TypeScript 详解 -> 正文阅读

[JavaScript知识库]TypeScript 详解

1、TypeScript是什么？

TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。

2、TS和JS的区别

2.1、TS的优点

静态输入
静态类型化是一种功能，可以在进行编写脚本时检测错误。查找并修复错误，对于编写更健壮的代码并对其进行维护，以便使得代码质量更好、更清晰。
大型的开发项目
有时为了改进开发项目，需要对代码库进行小的增量更改。这些小小的变化可能会产生严重的、意想不到的后果，因此有必要撤销这些变化。而使用TypeScript工具来进行重构更变的容易、快捷。
更好的协作
当发开大型项目时，进行开发的过程当中乱码和错误的机也会增加。类型安全是一种在编码期间检测错误的功能，而不是在编译项目时检测错误。

3、TS开发环境的搭建

有两种主要的方式来获取TypeScript工具：

通过npm（Node.js包管理器）
安装Visual Studio的TypeScript插件

在这里的安装基本上我们都采用node进行安装，首先我们需要下载nodeJs，之后我们直接执行命令进行安装TS。

npm install -g typescript

安装完成之后我们可以使用以下命令查看TS的版本

tsc -v

之后我们新建一个项目，在项目当中我们新建一个ts文件，我们在ts文件当中我们先使用js的代码内容：

console.log("hello TS")

然后我们的ts文件是不能够在浏览器当中进行解析的，我们的ts文件首先需要通过编译，编译之后才能够被浏览器进行解析，我们直接使用命令

// tsc + 文件名
tsc demo.ts

编译之后我们的目录下面会产生一个和ts文件同名的js文件，之后我们就可以直接使用这个编译得到的js即可。我们安装好了node，就可以直接使用node命令对js文件进行解析了，使用node命令：

// node + 文件名
node demo.js

4、TS变量的声明和赋值

let和const是JavaScript里相对较新的变量声明方式。像我们之前提到过的， let在很多方面与var是相似的，但是可以帮助大家避免在JavaScript里常见一些问题。 const是对let的一个增强，它能阻止对一个变量再次赋值。因为TypeScript是JavaScript的超集，所以它本身就支持let和const。在这里我们也就不对var、let、const做详细的解释了，相信了解js的小伙伴也是可以区分开来的。

// 声明一个变量a 并且a的数据类型为number
let a : number ;
// 所以对a的值赋为字符串就会出现报错
// a = "hello"
a = 10;

let b : string ;
b = "hello"
b = 3

// 可以看到我们这里的let会编译成var，在这里我们编译后的js是ES3的版本

// 声明变量直接赋值
let c : boolean = true

// 变量的声明和赋值时同时进行，会自动对变量进行制定数据类型
let d = true;
d = "123"

// js不考虑参数的数据类型和个数
function sum(a,b){
	return a+b
}

console.log(sum(41,"41"))

// 其中这里的类型也可以进行给到参数，返回值
function sum1(a:number,b:number){
	return a+b
}

console.log(sum1(41,"”47"))
// 并且对参数的个数进行限制
console.log(sum1(41,41,100))

// 返回值指定类型
function sum2(a:number,b:number):number{
	return a+"hello"
}
console.log(sum2(1,2))

5、TS类型

类型选择

类型	例子	描述
number	1, 2, -22	任意数字，
string	“here we go”	任意字符串
boolean	true、false	布尔值true或false
字面量	其本身	限制变量的值就是该字面量的值
any	*	任意类型
unknown	*	类型安全的any
void	空值（undefined）	没有值（或undefined）
never	没有值	不能是任何值
object	{name:’Allen’}	任意的JS对象
array	[1,2,3]	任意JS数组
tuple	[4,5]	元素，TS新增类型，固定长度数组
enum	enum{A, B}	枚举，TS中新增类型

为了让程序有价值，我们需要能够处理最简单的数据单元：数字，字符串，结构体，布尔值等。 TypeScript支持与JavaScript几乎相同的数据类型，此外还提供了实用的枚举类型方便我们使用。

// 可以直接使用字面量进行声明,就好像是一个常量，声明之后的值是不可改变的
let a: 10;
a = 12;

// | 表示 或 ，也就是说 b 的值 可以是 men 也可以是 women
let b: 'man' | 'women'
b = 'menwomen'

// 既可以是字符串也可以是布尔值
let c: string | boolean
c = 'hello'
c = true

// any 表示任意类型
let d: any
d = true

// unknow 表示未知类型
let e: unknown
e = 'hello'

let s: string

// any 可以赋值给任意对象 ,这时的s就会被any盖掉
s = d
// 而使用 unknow 进行赋值就会报错
// s = e
// 而我们需要将e的值赋给s，我们需要进行类型判断
if (typeof e === "string") {
	s = e
}

// 或者使用类型断言，将e强行表示为string类型
s = e as string
s = <string>e

// void 表示函数没有返回值 可以不return，但是可以return null underfind
function fn(num): void {
	console.log("void")
}

// 而使用 nerve 表示没有返回值 返回为null和underfind也会报错
function fun(): never {
	return null
}

// 对象
let f: Object
f = {}

// 而使用 {} 就可以对对象的属性进行限制，并且对象的属性也必须相同，而我们在对属性名后面加上一个？ 表示属性可选
let g: { name: string, age?: number }
g = { name: "a" }
g = { sex: "men" }
g = { name: "b", age: 18 }

// 通过【abb:string】:any 表示我们的后续属性可以有任意属性
let h: { name: string, [abb: string]: any }
h = { name: 'yueyue', age: 18, sex: "man" }

let i: (a: number, b: number) => number

i = function (n1, n2): number {
	return n1 + n2
}

// arr 数组 字符串数组
let j: string[]
j = ['a', 'b', 'c']
let k: Array<number>
k = [1, 2, 4, 5]

// 元组表示一个已知元素数量和类型的数组，各元素的类型不必相同。
let l：[string, number]
l = ['12', 5]


// 枚举
enum sex {
	men = 1,
	women = 0,
}

let m: { name: string, sex: sex }

m = { name: 'yueyue', sex: sex.women }
console.log(m)

6、TS编译设置

在每一次的ts文件进行修改之后我们都需要使用tsc命令进行编译成js，还是比较麻烦的，我们这里可以使用如下命令对ts文件进行侦听，当侦听的文件内容发生改变之后，会自动进行编译ts。

tsc XXX.ts -w

但是这里的话我们只能对单个ts文件进行侦听编译。当我们的项目当中有很多的ts文件，我们要怎么对所有的ts文件全部侦听呢？我们在我们的项目下新建一个tsconfig.json文件，这就是ts编译的配置文件，当我们先给上一个{}之后，我们在项目下直接执行如下命令就可以对整个项目的ts文件进行侦听了。

tsc -w

之后我们可以对这个tsconfig.json文件进行一些设置。

{
    /**
     * 用来指定哪些ts需要被编译 ** 表示任意目录 * 表示任意文件
     */
    "include": [
        "./"
    ],
    "exclude": [
        "./demo.ts"
    ],
    "compilerOptions": {
        // 编译的js版本目标
        "target": "ES6",
        // 模块化版本
        "module": "system",
        // 指定项目中要使用到的库
        "lib": ["esnext"],
        // 编译后所在目录
        "outDir": "./dist",
        // 将编译的js合并到一起
        "outFile": "./dist/app.js",
        // 是否对js进行编译，false表示不对js进行编译
        "allowJs": false,
        // 是否对js文件进行检验，false表示不检验
        "checkJs": false,
        // 是否移除注释，false表示不去掉注释
        "removeComments": false,
        // 不生成编译文件，
        "noEmit": false,
        // 当编译出错时不生成编译文件
        "noEmitOnError": false,
        // 所有严格模式的总开关
        "strict": false,
        // 是否开启严格模式，false表示不开启
        "alwaysStrict": false,
        // 当一个变量不指定类型时，默认使用any，设置为true时，表示不允许使用隐式any
        "noImplicitAny": false,
        // 设置为true，表示不允许使用隐式this
        "noImplicitThis": false,
    }
}

7、使用webpack进行打包

7.1、webpack基本打包

首先我们使用 npm init 对我们的项目进行初始化。之后我们直接安装webpack，执行命令：

// webpack 相关包
npm install webpack webpack-cli -g
npm install webpack webpack-cli -D
// ts-loader包
npm install ts-loader --save-dev

之后我们需要对webpack的配置文件进行配置，先创建一个webpack.config.js文件。这里对于webpack的配置就不做详细解释了。

const {
    resolve
} = require('path')

module.exports = {
    // 入口
    entry: './src/index.js',
    // 输出
    output: {
        // 输出文件名
        filename: 'main.js',
        // 路径
        path: resolve(__dirname, 'build')
    },
    // loader
    module: {
        rules: [{
            // 匹配哪些文件
            test: /\.ts$/,
            // 使用哪些loader进行处理
            use: 'ts-loader',
            exclude: /node_modules/
        }]
    },
    plugins: [],
}

之后我们再对tsconfig.json进行设置，我们就给上几个简单的设置，

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

并且我们可以再package.json文件当中进行设置执行命令。添加如下代码：之后我们直接执行命令：npm run build就可以进行打包了

7.2、打包Html文件

进行html文件的打包，我们首先需要安装对应的依赖，html-webpack-plugin 插件是用于编译 Webpack 项目中的 html 类型的文件，如果直接将 html 文件置于 ./src 目录中，用 Webpack 打包时是不会编译到生产环境中的。因为 Webpack 编译任何文件都需要基于配置文件先行配置的。使用命令安装：

npm i -D html-webpack-plugin

之后我们在webpack的配置文件当中对这个依赖进行导入：

const {
    resolve
} = require('path')

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    // 入口
    entry: './src/index.js',
    // 输出
    output: {
        // 输出文件名
        filename: 'main.js',
        // 路径
        path: resolve(__dirname, 'build')
    },
    // loader
    module: {
        rules: [{
            // 匹配哪些文件
            test: /\.ts$/,
            // 使用哪些loader进行处理
            use: 'ts-loader',
            exclude: /node_modules/
        }]
    },
    plugins: [
        // 1、默认的html文件
        // new HtmlWebpackPlugin(),
        // 2、自定义内容
        // new HtmlWebpackPlugin({
        //     title:"this is title"
        // })
        // 3、使用模板
         new HtmlWebpackPlugin({
            template:'./src/index.html'
        })
    ],
    // 模式 （开发、生产）
    mode: 'development'
}

之后我们进行webpack打包，我们可以看到在打包生成的文件当中会生成一个html文件，也就是我们在这里进行定义的文件（默认、自定义、模板）

7.3、打包后的文件监听

我们还可以给webpack安装一个内置服务器，用来对打包后的文件进行实时监听变化，执行命令进行安装：

npm i -D webpack-dev-server

webpack-dev-server是webpack官方提供的一个小型Express服务器。使用它可以为webpack打包生成的资源文件提供web服务。

webpack-dev-server 主要提供两个功能：

为静态文件提供web服务
自动刷新和热替换(HMR)
自动刷新指当修改代码时webpack会进行自动编译，更新网页内容
热替换指运行时更新各种模块，即局部刷新

之后我们在上面说的webpack的配置文件当中，配置命令，加上一个start命令，表示启动服务并且使用chrome浏览器打开

"start": "webpack serve --open chrome.exe"

之后我们就可以直接使用npm start命令进行执行了，
还有一个工具

npm i -D clean-webpack-plugin

7.4、关于模块化的打包

关于模块化，在进行开发的过程当中，我们基本上会引入多个其他的js、ts等等文件，这里就涉及到了模块化的问题，也很好处理，我们只需要在配置文件当中添加如下代码，表示可以对指定文件作为模块进行导入。

    // 表示哪些文件可以作为模块进行导入
    resolve: {
        extensions: ['.js', '.ts']
    },

7.5、babel版本控制打包

打包后的ES版本和浏览器兼容问题，这里我们可以使用babel对打包时控制js的版本，以及对浏览器版本的支持，先安装babel以及相关包。

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

而我们对babel打包的配置，简单配置就是我们直接添加一个babel-loader进去，这样我们就可以进行babel打包，降低ES版本，当然了，我们也可以通过详细的配置对babel进行设置：

    module: {
        rules: [{
            // 匹配哪些文件
            test: /\.ts$/,
            // 使用哪些loader进行处理
            use: [{
                    //指定加载器
                    loader: "babel-loader",
                    // 设置babel
                    options: {
                        //设置预定义的环境
                        presets: [
                            [
                                //指定环境的插件
                                "@babel/preset-env",
                                // 配置信息
                                {
                                    // 要兼容的目标浏览器及版本
                                    targets: {
                                        "chrome": "88",
                                        "ie": "8"
                                    },
                                    //指定corejs的版本
                                    "corejs": "3",
                                    //使用corejs的方式 "usage"  表示按需加载
                                    "useBuiltIns": "usage"
                                }
                            ]
                        ]
                    }
                },
                // 'babel-loader',
                'ts-loader'
            ],
            exclude: /node_modules/
        }]
    },