《React-TypeScript实战指南》，什么大项目需要使用TypeScript？

Created: April 25, 2024 12:44 PM

我是梦兽编程，平时直播中很多人会看到梦兽使用TypeScript很少使用any，写的非常流畅。希望我们出一个关于《TypeScript》的系列，于是就有了这次的分享。

如果你想和梦兽一起交流学习，可以关注《梦兽编程》微信公众号，获取交流群一起探讨Web开发。

概述

TypeScript（简称 TS）是微软公司开发的一种基于 JavaScript （简称 JS）语言的编程语言。它的目的并不是创造一种全新语言，而是增强 JavaScript 的功能，使其更适合多人合作的企业级项目。TypeScript 可以看成是 JavaScript 的超集（superset），即它继承了后者的全部语法，所有 JavaScript 脚本都可以当作 TypeScript 脚本（但是可能会报错），此外它再增加了一些自己的语法。

TypeScript 对 JavaScript 添加的最主要部分，就是一个独立的类型系统。

什么时候你才需要使用到TypeScript？

其实TypeScript可以使用也可以不使用，不使用TypeScript时会显得更灵活。如果你的项目没有达到类似spring-cloud这类框架，查询一个使用方法可能会耗费你一天得时间。这种情况下可能使用JavaScript是最节约时间。

在小项目中，因为做的功能不是很复杂，数据结构不会很多。一个功能下来封装的东西也不会很多，就是没有文档花亿点点时间也是能开得懂的。

当你的项目开始变得更大，更复杂时，你可能需要使用TypeScript。当项目的规模扩大，多人合作时，TypeScript的类型系统可以帮助你避免很多潜在的错误，让你的代码更加健壮，更易于维护。如果你需要进行大量的重构，TypeScript也能提供更强大的工具支持。

也就是说TypeScript是为了约束开发，毕竟代码和人有一个能跑就行。有人跑了就有人接盘，如有使用JavaScirpt可能会让接盘的一时无法知道它之前的逻辑是用来做什么的。加上JavaScirpt在IDE上的弱鸡表现。

看前需要必备知识

React
JavaScript & ES6
Node & pnpm

如果你对 JavaScript 还不熟悉，建议先阅读JavaScript 和ES6教程。

如何开始使用TypeScript

# 这是window的操作 ，如果你是Linux & 变成 &&
mkdir ts-stu & cd ts-stu

pnpm init 
# 下载最新版本
pnpm add typescript@next

npm install -g  typescript@next
# 创建tsconfig.json
tsc --init

# 修改package.json
nvmi package.json

"scripts": {
	...
	"tsc": "tsc src/index.ts"
}

全局安装typescirpt，也可以直接运行tsc src/index.ts ，但一般没有人这么做。

第一个Hello Word

// ./src/index.ts
function log(msg: string) {
  console.log(msg);
}

log("Hello Word");

这是一个名为log的JavaScript函数，它接受一个字符串参数msg。这个函数的作用是使用console.log()将传入的字符串打印到控制台。

当你调用log("Hello World")时，它会在控制台上输出"Hello World"。

和JavaScript最大的区别在TypeScript多了类型的定义。

执行tsc src/index.ts 后可以得到编译后JavaScript文件。

function log(msg) {
    console.log(msg);
}
log("Hello Word");

这是TypeScript的开端，后面我们会从浅到深分享关于React中使用TypeScript的实战案例。如果您对《React-TypeScript实战指南》感兴趣，欢迎关注我的公众号【梦兽编程】，一起探索TypeScript的奥秘。如果您觉得这篇文章对您有帮助，请分享给更多需要的朋友。您的转发是我最大的动力！