您好,登录后才能下订单哦!
今天继续来更新,本篇文章我们讲环境搭建,主要分享一些环境搭建的学习资源及安装步骤,解决一些安装时可能会出现的问题。
下面就让我们一起进入学习第一步,搭建TypeScript环境:
一. 环境搭建
1.1. TypeScript环境安装
已经配置好的环境,大家可以直接下载:https://github.com/coderwhy/HYLearnTS.git
在上一个章节中我们说过,TypeScript最终会被编译成JavaScript代码:Image01
TypeScript运行流程
那么我们必然需要对应的编译环境:
首先,TypeScript的环境安装依赖Node,所以需要先保证电脑上有Node和NPM环境;
其次,可以通过NPM来安装TypeScript,之后就可以通过 tsc 来编译TypeScript的代码;
首先来进行全局安装:
npm install typescript -g
tsc --version
注意:这里我使用了git bash的终端,你可以直接使用windows的命令行工具Image02
安装TypeScript
1.2. VSCode环境搭建
学习或者使用TypeScript有很多编辑器可以供我们选择,目前前端开发比较常用的是两个:
WebStorm:JetBrains 公司的产品,用法和PHPStorm、PyCharm、IDEA用法基本一致;
VSCode:Microsoft 公司的产品,目前可以说已经成为最流行的前端工具,并且本身就是TypeScript编写的;
在之前的Flutter文章中我有对比过VSCode和Android Studio的优缺点,其实和VSCode和WebStorm的优缺点对比是相似的,这里不再详细对比。
而以后学习和使用TypeScript,我都会优先选择VSCode,所以这里我们主要介绍VSCode的环境搭建。
// 定义一个函数
function sum(num1: number, num2: number): number {
return num1 + num2;
}
sum("abc", "cba");
我们会发现有两个地方都会报错:
错误一:不能将类型“123”分配给类型“string”
Image03
错误一
错误二:类型“"abc"”的参数不能赋给类型“number”的参数Image04
错误二
上面两个错误都是因为我们的代码已经增加了类型约束,不能随便赋值其他类型给我们的变量。
将代码修改正确如下:
// 定义一个变量
let message: string = "abc";
message = "Hello World";
// 定义一个函数
function sum(num1: number, num2: number): number {
return num1 + num2;
}
sum(20, 30);
2.1. 项目环境的基础配置
为了我们之后的学习和使用方便,我们来配置一个webpack的环境:
在环境中我们编写对应的TypeScript代码,让webpack自动帮助我们编译,并且在浏览器中查看结果
注意:这里可能需要大家对npm和webpack有一些简单的了解,不会非常复杂(如果完全不懂,按照我给出的步骤来做即可,后续自己进行一些知识的补充)
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/main.ts",
output: {
filename: "build.js"
},
resolve: {
extensions: [".tsx", ".ts", ".js"]
},
module: {
rules: [
{
test: /.tsx?$/,
use: "ts-loader",
exclude: /node_modules/
}
]
},
devtool: process.env.NODE_ENV === "production" ? false : "inline-source-map",
devServer: {
contentBase: "./dist",
stats: "errors-only",
compress: false,
host: "localhost",
port: 8080
},
plugins: [
new HtmlWebpackPlugin({
template: "./index.html"
})
]
};
2.3. 项目环境下代码测试
下面我们就可以愉快的在main.ts中编写代码,之后只需要启动服务即可:Image12
测试代码
在终端中启动服务:
npm run serveImage13
程序运行
在浏览器中打开:http://localhost:8080/Image14
查看结果
修改代码,直接可以看到修改后的效果:不需要手动进行任何刷新Image15
修改代码
以上就是本次的干货分享,之后除了Flutter也会更新其他技术文章,如:TypeScript、React、Node、数据结构与算法等等,也会陆续做一些自己的从业经验分享。
好了,本次干货分享到这里就结束啦!感觉意犹未尽?想要获取更多干货及免费的学习资源吗?欢迎加微信:19950277730,关注我,带你进阶成为技术大神!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
开发者交流群:
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。