一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情。

前言

在开始typescript的学习前我们先看如下demo:

这是一个在JavaScript编写的demo,运行一下我们会发现它存在一些隐患：

当我们传入的值是一个String类型的字符串时它时运行正常的，但是当我们传入一个Number类型的数字时应为.length无法打印数字的长度所以它会输出一个undefined，或者当我们没有传递参数时代码就会报错同时接下来的代码也不会继续运行。这是我们不想看到的结果。这样整个项目都会因为这个小小的错误而陷入崩溃。

上述demo的错误总结一下就是当前foo函数在被调用时没有做任何的参数校验：

没有对类型进行校验
没有对是否传入参数进行校验如果我们可以给JavaScript加上很多限制，这样在开发过程中我们就可以很好的避免这样的问题了。
比如message是一个必传的参数，调用者没有传递的话编译期间就会报错。
比如message必须是一个String类型的参数，传入其它类型就会爆粗偶。那么我们就会在编译期间发现很多错误和问题，而不是等到运行、甚至上线之后才能发现问题。为了解决JavaScript类型约束上的缺陷很多公司也推出了自己的解决方案如FaceBook推出的flow、Micresoft推出的TypeScript等。时至今日TypeScript无论从人员的使用上还是其他方面已经完全胜出。接下来我们就开始TypeScript的学习。

TypeScript初体验

TypeScript是拥有类型的JavaScript超集，它可以编译成普通、干净、完整的JavaScript代码。

安装TypeScript

安装命令：npm install typescript -g

查看版本：tsc --version

使用TypeScript

安装完TypeScript后我们可以尝试使用TypeScript，我们在项目新建HelloTypeScript.ts文件，新建一个string类型的message变量：

我们尝试给它赋一个数字的值，我们可以发现在编译阶段就报错了：

现在回头看我们前言中的demo就可以进行如下改造：

TypeScript环境搭建

在体验完TypeScript后我们接下来开始搭建真实开发过程中TypeScript的环境，我们可以通过如下两种方案来搭建环境：

通过ts-node直接运行ts文件；
通过webpack搭建一个ts环境；在学习语法的阶段我们先使用第一种方案，在后期做项目的时候使用第二种方案。

通过ts-node直接运行ts文件

安装ts-node: npm install ts-node -g
安装tslib @types/node: npm install tslib @types/node -g 这样我们就可以在对应文件夹下使用ts-node xxx.ts来运行ts文件。

通过webpack搭建一个ts环境；

注：webpack环境我们做一下了解即可，在真实开发中我们会使用脚手架来简化操作但是了解学习一下webpack也是很有好处的。

通过npm init创建package.json文件。
安装webpack: npm install webpack webpack-cli -D。
新建webpack.config.js配置文件。
为了指定语言为我们代码进行编译需要安装依赖npm install ts-loader typescript -D。
在package.json文件配置打包脚本，同时进行开发环境生产环境的配置。
通过指令tsc --init生成tsconfig.json配置文件
通过指令npm run build打包项目
新建index.html文件引入./dist/bundle.js

打开index文件F12我们可以看到日志已经打印，这样我们就利用webpack里的ts-loader对所有的ts代码进行编译。

但是我们每次都需要通过npm run build对项目进行打包这样有点麻烦，所以我们可以安装npm install webpack-dev-server -D用来搭建一个本地服务。同时在package.json进行配置：

然后我们安装npm install html-webpack-plugin -D并在webpack.config.js进行相关配置，这样我们就可以通过npm run serve对项目进行启动。注意这时index.html里对./dist/bundle.js可以删除。这样我们就可以通过npm run serve对项目进行编译启动。

下面附上配置文件相关代码：

package.json

    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development",
    "build": "webpack --mode production", 
    "serve": "webpack server"
  },

webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
    //tyscript代码入口
    entry: "./src/main.ts",
    //出口
    output: {
        path: path.resolve(__dirname, "./dist"),
        filename: "bundle.js"
    },
    mode: 'development',
    resolve: {
        extensions: [".ts", ".js", ".cjs", ".json"]
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                loader: 'ts-loader'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./index.html"
        })
    ]
}

手把手带你搞懂TypeScript(一)

前言