04 # 第一个 TypeScript 程序

初始化项目以及安装依赖

新建 ts_in_action 文件夾

bash 复制代码
npm init -y

安装好 typescript,就可以执行下面命令查看帮助信息

bash 复制代码
npm i typescript -g
tsc -h

创建配置文件,执行下面命令就会生成一个 tsconfig.json 文件

bash 复制代码
tsc --init

使用 tsc 编译一个 js 文件

新建 src/index.ts

ts 复制代码
let kaimo:string = "hello typescript"

执行下面命令编译该 ts 文件

bash 复制代码
tsc ./src/index.ts

编译结果如下:

js 复制代码
var kaimo = "hello typescript";

也可以使用 https://www.typescriptlang.org/play 查看

配置构建工具 webpack 环境

安装依赖

bash 复制代码
npm i webpack@4.35.2 webpack-cli@3.3.5 webpack-dev-server@3.7.2 -D
npm i ts-loader@6.0.4 typescript@3.5.2 -D
npm i html-webpack-plugin@3.2.0 clean-webpack-plugin@3.0.0 webpack-merge@4.2.1 -D

配置相应的环境

基础配置:

js 复制代码
// 公共环境配置

// 下面这行用于 vscode 中智能化自动提示 webpack 配置项
/** @type {import('webpack').Configuration} */

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

const config = {
    entry: "./src/index.ts",
    output: {
        filename: "app.js"
    },
    resolve: {
        extensions: [".js", ".ts", ".tsx"]
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/i,
                use: [
                    {
                        loader: "ts-loader"
                    }
                ],
                exclude: /node_modules/
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/tpl/index.html"
        })
    ]
};
module.exports = config;

开发配置:

js 复制代码
// 开发环境配置

// 下面这行用于 vscode 中智能化自动提示 webpack 配置项
/** @type {import('webpack').Configuration} */

const config = {
    devtool: "cheap-module-eval-source-map"
};

module.exports = config;

生产配置:

js 复制代码
// 生产环境配置

// 下面这行用于 vscode 中智能化自动提示 webpack 配置项
/** @type {import('webpack').Configuration} */

const CleanWebpackPlugin = require("clean-webpack-plugin");

const config = {
    plugins: [new CleanWebpackPlugin()]
};

module.exports = config;

webpack 文件入口配置:

js 复制代码
// webpack 文件入口

// 下面这行用于 vscode 中智能化自动提示 webpack 配置项
/** @type {import('webpack').Configuration} */

const merge = require("webpack-merge");
const baseConfig = require("./webpack.base.config");
const devConfig = require("./webpack.dev.config");
const proConfig = require("./webpack.pro.config");

const config = merge(baseConfig, process.NODE_ENV === "development" ? devConfig : proConfig);

module.exports = config;

package.json 脚本配置

json 复制代码
"scripts": {
    "start": "webpack-dev-server --mode=development --config ./build/webpack.config.js",
    "build": "webpack --mode=production --config ./build/webpack.config.js"
},

启动服务并且打包测试

添加模板

html 复制代码
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>TypeScript in Action</title>
    </head>
    <body>
        <div class="app"></div>
    </body>
</html>

添加功能

ts 复制代码
let kaimo:string = "hello typescript";

document.querySelectorAll(".app")[0].innerHTML = kaimo;

启动服务 npm run start,访问 http://localhost:8080/


打包 npm run build

相关推荐
知识分享小能手9 小时前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3
张志鹏PHP全栈15 小时前
TypeScript 第三天,TypeScript中的类型(二)
typescript
成遇1 天前
Eslint基础使用
javascript·typescript·es6
张志鹏PHP全栈2 天前
TypeScript 第二天,TypeScript中的类型(一)
typescript
極光未晚2 天前
TypeScript在前端项目中的那些事儿:不止于类型的守护者
前端·javascript·typescript
安替-AnTi2 天前
基于 React 和 TypeScript 搭建的机器学米其林餐厅数据分析项目
react.js·typescript·数据分析·毕设·米其林
Goodbaibaibai2 天前
创建一个简洁的Vue3 + TypeScript + Vite + Pinia + Vue Router项目
javascript·vue.js·typescript
codehub3 天前
TypeScript 高频面试题与核心知识总结
typescript
张志鹏PHP全栈3 天前
TypeScript 第一天,认识TypeScript
typescript
羊八井3 天前
类型、分类定义时使用 type 还是 kind ?
rust·typescript·代码规范