TypeScript 基础入门知识分享(二)
497 字
2 分钟
TypeScript 基础入门知识分享(二)
一、简单介绍
第一篇的时候简单介绍了TS的基本和常用用法，这篇就用webpack搭建一个ts+react的简易demo，react也有官方的脚手架去使用，但是还是感觉自己搭建的脚手架更加可控。
二、搭建开发环境
从头搭建一个基于react + ts + webpack + Hooks 的开发环境
// 初始化文件夹文件和 package.json
$ mkdir React-Typescript-Hooks
$ touch webpack.config.js index.html
$ npm init -y打开 webpack.config.js文件，初始化简单的 webpack 配置
const path = require("path");
module.exports = {entry: "./src/index.tsx", output: { path: path.resolve(__dirname, "build"), filename: "bundle.js" }, module: {}, plugins: []};然后新增一个入口文件index.tsx
import * as React from "react";import * as ReactDOM from "react-dom";
const ROOT = document.querySelector(".container");
ReactDOM.render(<h1>Hello</h1>, ROOT);注：for Typescript you have to import all (*) as React.
接着需要安装react，webpack依赖模块
// 注：webpack4.0后，webpack 命令行相关的内容都迁移到 webpack-cli，除了 webpack 外，我们还需要安装 webpack-cli
$ npm i react react-dom
$ npm i webpack webpack-dev-server webpack-cli -D我们现在已经有了ts的文件，但是webpack并不能解析，所以需要安装ts解析器 awesome-typescript-loader，为什么不用ts-loader，而选择用 awesome-typescript-loader，你可以点击这里查看。
$ npm i typescript awesome-typescript-loader -D更新webpack.config，新建对tsx的规则处理
module: { rules: [ { test: /\.tsx?$/, loader: "awesome-typescript-loader" } ]},我们还需要在根路径创建一个 tsconfig.json 文件，来告诉 webpack 如何去处理TS的文件
{ "compilerOptions": { "allowSyntheticDefaultImports": true, "jsx": "react", "module": "commonjs", "outDir": "./build/", "preserveConstEnums": true, "removeComments": true, "sourceMap": true, "noImplicitAny": true, "target": "es5" }, "include": [ "./src/**/*" ]}接下来我们需要安装react的声明文件，由于 React 和 React-dom 并不是使用 TS 进行开发的，所以 TS 不知道 React、 React-dom 的类型，以及该模块导出了什么，此时需要引入 .d.ts 的声明文件。
$ npm i @types/react @types/react-dom -D接下来就只要将webpack.config中的test命令更改成下面，就可以直接启动项目了,然后在浏览器中输入localhost<8080> 就可以直接查看。
"start": "webpack-dev-server"文章分享
如果这篇文章对你有帮助，欢迎分享给更多人！
TypeScript 基础入门知识分享(二)
https://luoruihuan.top/posts/TypeScript2/相关文章智能推荐
1
TypeScript 基础入门知识分享(一)
前端一、简单介绍 从第一次接触TS到现在其实已经有一年多的时间，当初在上家公司是开始技术栈使用Angular 2，大家都知道Angular2框架是使用TypeScript开发的，Angular和TypeS
2
博客挂了三天，我和 AI Agent 把它整个重造了一遍
全栈工程一次域名失联的完整排障：DNS 记录凭空消失、HTTPS 证书被撤、真正的站藏在遗忘的服务器里。修完索性换掉整个主题，迁移 25 篇十年文章，顺手记录 AI Agent 的四次真实翻车。
3
个人网站 GEO 实践：让 ChatGPT、Perplexity 引用你的内容
GEO（生成式引擎优化）不是玄学。以这个网站的真实配置为例，拆解 AI 爬虫矩阵、llms.txt、结构化数据和内容策略的完整落地。
4
开篇：技术派罗恩上线，聊 AI 实战、全栈工程和工程师搞钱
这个网站的由来：我是谁、为什么写、以及这个站本身是怎么搭起来的——Astro + Cloudflare Tunnel + GitHub Actions 的完整链路。
5
我审计了一份第三方 GEO 检测报告，教你怎么看数据水分
从页面数据包与渲染逻辑入手，拆解一份 GEO 检测报告的五处水分：凑数的明细、复用的证据、虚拟的引用、直给的基准分与对称的优化预测，附七条验收清单。
随机文章随机推荐