前端学习圈

ts-01 开发环境搭建

为什么要使用TS

  1. 维护项目时，你会发现ts非常的方便 比如：后端修改了一个字段，此时前端也需要更改，但是由于不知道哪些地方用到了该字段，这时就会出问题了； 如果你的项目是使用了ts，那么你只需要修改interface定义的类型字段，此时所有取该值的地方都会报错了，此时再去修改即可；

TS大纲

image-20200602223954793

Typescript与Javascript的区别

TypeScriptJavaScript
JavaScript 的超集用于解决大型项目的代码复杂性一种脚本语言，用于创建动态网页。
可以在编译期间发现并纠正错误作为一种解释型语言，只能在运行时发现错误
强类型，支持静态和动态类型弱类型，没有静态类型选项
最终被编译成 JavaScript 代码，使浏览器可以理解可以直接在浏览器中使用
支持模块、泛型和接口不支持模块，泛型或接口
支持 ES3，ES4，ES5 和 ES6 等不支持编译其他 ES3，ES4，ES5 或 ES6 功能
社区的支持仍在增长，而且还不是很大大量的社区支持以及大量文档和解决问题的支持

开发环境搭建

ts在线编辑器：https://www.typescriptlang.org/play/

TS不能直接运行在浏览器环境，需要先编译成js（依赖node环境）

安装：npm i typescript -g；

运行ts：tsc xxx.ts 即可编译为js

搭建环境

  • 初始化项目：npm init -y

  • vscode安装插件：tslint、tslint(deprecated)

全局安装typescript

npm i typescript tslint -g

安装全局typescript之后，在项目根目录执行tsc --init生成tsconfig.json文件

安装webpack打包

  • npm install webpack webpack-cli webpack-dev-server -D

  • npm install ts-loader cross-env html-webpack-plugin clean-webpack-plugin -D

    • cross-env 传输环境

配置webpack 

const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
    entry: './src/index.ts',
    output: {
        filename: 'main.js',
        path: 'dist'
    },
    module: {
        roles: [{
            test: /\.tsx?$/,
            use: 'ts-loader',
            exclude: /node_module/
        }]
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.json']
    },
    devServer: {
        contentBase: './dist',
        compress: false,
        host: 'localhost',
        stats: 'errors-only',
        port: 8089
    },
    devtool: process.env.NODE_ENV === 'production' ? false : 'inline-source-map',
    plugins: [
        new CleanWebpackPlugin({
            cleanOnceBeforeBuildPatterns: ['./dist'] // 打包时清除dist目录
        }),
        new HtmlWebpackPlugin({
            template: './src/template/index.html' // 放入模板文件
        })
    ]
}

配置package.json 

"scripts": {
    "start": "cross-env NODE_ENV=development webpack-dev-server --config ./build/webpac.config.js",
    "build": "cross-env NODE_ENV=production webpack --config ./build/webpack.config.js"
}