vue-typescript -01 本地环境搭建

资源地址
Typescript 官网 https://www.typescriptlang.org/
本地环境搭建

• 安装

npm i typesctript -g

配置文件 tsconfig

tsc --init

生成package.json

npm init

src目录下创建index.ts,简单编写代码 执行编译
/src/index.ts

const msg = '  typescript'
function sayhello(msg: string){
    return 'hello' + msg
}
document.body.textContent = sayhello(msg);

tsc ./src/index.ts

编译后产生index.js 文件内容

var msg = 'ts';
function sayhello(msg) {
    return 'hello' + msg;
}
document.body.textContent = sayhello(msg);

可以看出const 变成var了

• 工程化
  安装相关工具 webpack webpack-cli webpack-dev-server ts-loader typescript html-webpack-plugin

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

• 创建配置文件 /build/webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: './src/index.ts',
    output: {
        filename: 'app.js'
    },
    resolve: {
        //模块倒入的扩展名的处理
        extensions: ['.js', '.ts', '.tsx']
    },
    devtool: 'cheap-module-eval-source-map',
    module: {
        rules: [
            {
                test: /\.tsx?$/i,
                use: [{
                    loader: 'ts-loader'
                }],
                exclude: /node-module/
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html'
        })
    ]
}

修改package.json 运行命令

"scripts": {
    "dev": "webpack-dev-server --config ./build/webpack.config.js"
  },

最后打开 localhost: 8080

image.png

至此，typescript的本来开发环境就搭建成功了。
记录一下遇到的小问题
安装工程化依赖时报了gyp的错

image.png

处理方式

rm -rf .node-gyp/
sudo cnpm install -g node-gyp ‘
npm i

删了重新装就可以了

好好学学，天天向上