TypeSprict 入坑 -- 基础篇（搭建）-CSDN博客

说点啥

1.官网对ts 描述：ts 是js类型的超级，他可以编译成纯js，ts可以在任何浏览
器、任何计算机运行并且开源
2.初期个人理解：ts 将js 更加具体化，在编译过程中对类型和代码设计更加规
范有层次感，但我初期认为这种方式反而违背js，如果使用过java等强类型
语言的人去使用过js 和 python，第一反应就是代码还可以这么随意
复制代码

本文章的参考资料

搭建

1.这里编译器使用的是'vscode'，我会推荐两篇'vscode'配置文章在下面
2.你要做的需要理解'webpack' 基本配置，以及'webpack' 基本使用，这里
推荐可以看我的另外一个手册下面会放出连接
3.你还有做的是有付费精神，我的文章是免费的，但部分推荐的资料是前端
大神总结，请尊重他们的劳动成果，付费使用
复制代码

IMJEFF 网站 -- vs主题推荐

简书作者 -- 独行侠_ef93 的vs主题推荐

思否作者 -- moer对vs配置插件

酱路油过 -- 前端知识扩展手册webpack章节

开始搭建

1.创建好项目文件夹后输入指令 -- 'npm init -y' 
  1.1 指令说明快速初始一个'package.json' 文件
  1.2 一会我们有一个项目搭建目录，因为这个目录的关系，我们需要
更改'package.json' 中的'main',这里对'main' 说明下，当别人使用你的包
并用'require' 导入时候会找这个'main' 所对应的目录，默认是'index.js'这里
改成'./src/index.js' 稍后说明原因
复制代码

2.项目结构目录说明
├── 'node_modules'     // npm下载包都在这个文件夹
├── 'bulid'                
│   └── 'webpack.config.js'  // webpack 配置文件
├── 'src'             // 整个工程文件目录
│   ├── 'api'         // 创建用来管理接口的文件夹
│   ├── 'assets'      // 静态资源管理负责管理图片文字一类的
│   │   ├── 'font'    // 存放字体库文件夹
│   │   └── 'img'     // 存放图片的文件夹
│   ├── 'config'      // 项目配置的文件夹
│   ├── 'example'     // 简单的说明案例
│   ├── 'template'         // 存放编译时候使用的模本文件夹
│   │   └── 'index.html'           // 指定编译的时候使用的模板
│   ├── 'tools'     //  纯工具文件
│   ├── 'utils'     //  业务相关存储的逻辑文件夹
│   └── 'index.ts'     // 项目的入口文件 
├── 'typings'       //  ts
├── 'package.json'
├── 'package-lock.json'    // 锁版本包
├── 'README.md'
├── 'tslint.json'         // ts规范检查配置文件
└── 'tsconfig.json'        // tsc--init 指令生成的文件--ts自定义配置
复制代码

3.安装全局ts依赖 'typescript' 和 'tslint'   
    --- 指令：'npm install typescript tslint -g'
复制代码

4.安装'ts'依赖生成'tsconfig.json'
    --- 指令：'tsc --init' （会初始化一个'tsconfig.json'） 的配置文件
复制代码

5.安装'webpack4'（-D -g 说明依次表示只在开发环境和全局环境）
  --- 指令: 'npm install webpack webpack-cli webpack-dev-server -D'
复制代码

6.安装 'ts-loader'
  ---指令 ：'npm install ts-loader -D' （webpack 是基于node，node中只识
别js因此需要第三方这种loader 将ts文件编程node环境能识别的）
复制代码

7. 安装 'cross-env '作用可以配置在'package.json' 的'scripts'配置指令可以传参
 ---指令： npm install cross-env -D 
复制代码

8.配置一些插件 CleanWebpackPlugin/HtmlWebpackPlugin 清理指定文件/ 基于编译的模板文件
 --- 指令： npm install html-webpack-plugin clean-webpack-plugin -D
复制代码

9.在'package.json' 的'scripts'配置快捷命令，npm start 和其他区别少一个run
 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "cross-env NODE_ENV=development webpack-dev-server --config ./build/webpack.config.js",
    "build": "cross-env NODE_ENV=production webpack --config ./build/webpack.config.js"
  },
复制代码

10.在项目中安装ts依赖 'typescript' 和 'tslint'   
    --- 指令：'npm install typescript tslint'
复制代码

11.在刚才我们创建的目录'build'文件下创建一个'webpack.config.js'配置文件
中具体内容及说明:
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
    entry: "./src/index.ts", // 打包入口文件
    output: {
        filename: "main.js"  // 输出是js 为ts 打包后是js
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js'] // 省略import 的后缀
    },
    module: {
        rules: [{
            test: /\.tsx?$/,
            use: 'ts-loader',
            exclude: /node_modules/
        }]
    },
    devtool: process.env.NODE_ENV === 'production' ? false : 'inline-source-map',
 //安装了'cross-env' 可以接受到在'package.json' 传的参数
    devServer: {
        contentBase: './dist',   // 本地开发环境运行基于的根目录
        stats: 'errors-only',     // 只有错误的时候在控制台输出
        compress: false,           // 不压缩
        host: 'localhost',
        port: 8089
    },
    plugins: [
        new CleanWebpackPlugin({
            cleanOnceBeforeBuildPatterns: ['./dist'] // 在打包前清理 路径
        }),
        new HtmlWebpackPlugin({
            template: './src/template/index.html' // 指定编译的时候使用的模板
        })
    ]
}
复制代码

12.配置'ts' 检测 -- 指令：'tslint -- init' 初始化'tslint.json' 配置文件
复制代码

13.如果做了第12步建议在vs 中安装插件'tslint'
复制代码

14.如果做了上面两步建议在vs的设置中搜索'autofix' 进行配置，找到tslint
在'setting.json' 中配置一条 ： "tslint.autoFixOnSave": true, 作用保存时自动
格式化
复制代码

图解 12 条的配置

根据图片修改我们自己的规则,图片提示的是要修改'quotemark' 规则

{
    "defaultSeverity": "error",
    "extends": [
        "tslint:recommended"
    ],
    "jsRules": {},
    "rules": {
        "quotemark":[false]
    },
    "rulesDirectory": []
}
复制代码