邂逅TypeScript

Posted 2021-08-14 忘忘碎斌bin

邂逅TypeScript

• • TypeScript初体验
  • TypeScript的环境搭建
  • • 第一种：ts-node环境
    • 第二种：webpack环境

TypeScript初体验

安装TypeScript工具：npm install typescript -g

编写TypeScript代码

function sum(num1:number,num2:number):number{
  return num1+num2
}
let str:string = "你好呀，TypeScript";
console.log(str);
console.log(sum(1,2));

编译：tsc 文件名.ts ------>>> 在相同路径下生成对应的js文件

查看效果：

• 通过html文件引入，目标js文件，浏览器查看
• 通过node执行目标文件。

问题：

• 编译出js文件后，不做任何操作，ts竟然有报错，是因为同编译目录有相同名字的对象，暂时可以加入 export {}解决。
• 每次写完ts都要输入命令编译，然后打开浏览器或者 执行node，实在不方便，那么接下来搭建TypeScript的搭建环境解决

TypeScript的环境搭建

第一种：ts-node环境

安装：npm install ts-node -g

安装 ts-node 依赖：npm install tslib @types/node -g

过程：

• ts-node 文件名.ts 编译，编译的js文件不会输出。
• 编译后的文件交给 node 执行
• 控制台输出

第二种：webpack环境

• 安装：

  npm init

  npm install webpack webpack-cli

• 目录树

  rootdir

  │ index.html
  │ package-lock.json
  │ package.json
  │ tsconfig.json
  │ webpack.config.js
  │ node.modules
  └─src
  main.ts

• webpack配置

webpack.cofig.js

const path = require('path');
const HtmlWbapackPlugin = require("html-webpack-plugin")
module.exports = {
    mode: 'development',
    entry: './src/main.ts',
    output: {
        path: path.resolve(__dirname, '/dist'),
        filename: 'index.js'
    },
    resolve: {
        extensions: ['.ts', '.js']
    },
    module: {
        rules: [{
            test: /\\.ts$/i,
            loader: 'ts-loader'
        }]
    },
    plugins: [
        new HtmlWbapackPlugin({
            template: './index.html'
        })
    ]
}

package.json

{
    "name": "typescript",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \\"Error: no test specified\\" && exit 1",
        "serve": "webpack serve"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "html-webpack-plugin": "^5.3.2",
        "ts-loader": "^9.2.3",
        "webpack": "^5.44.0",
        "typescript": "^4.3.5",
        "webpack-cli": "^4.7.2",
        "webpack-dev-server": "^3.11.2"
    }
}