1.ts初识与环境搭建
在学习typescript之前,国际惯例,先了解一下历程:TypeScript 是微软在2012年开发的一门免费开源的编程语言。它是JavaScript 的一个超集(增强版)为什么要学习TypeScript?拥有强大的靠山,分别为微软与谷歌。TypeScript是由微软开发的,谷歌的Angular框架是用Typescript开发的。所以TypeScript很有可能是未来的前端脚本语言发展的主流方向
在学习typescript之前,国际惯例,先了解一下历程:
- TypeScript 是微软在2012年开发的一门免费开源的编程语言。它是
JavaScript 的一个超集(增强版)
为什么要学习TypeScript?
- 拥有强大的靠山,分别为微软与谷歌。TypeScript是由微软开发的,谷歌的Angular框架是用Typescript开发的。所以TypeScript很有可能是未来的前端脚本语言发展的主流方向
话不多说,来学习一下环境搭建
因为TypeScript在JavaScript的基础上增加了类型系统,所以TypeScript不能够直接在浏览器当中运行。我们需要使用编译器将TypeScript编译为JavaScript。
先来搭建一个TypeScript的基本开发环境
1.安装node,怎么安装node我不在这里介绍,大家自行百度,简单来说就是官网下载,然后一直点下一步傻瓜式安装,安装完成后检测方法:
node -v
npm -v
2.全局安装typescript
// 在终端输入命令,全局安装ts,注意不是在某工程下,是在你的计算机全局
npm i typescript -g
// 安装完成后查看typescript版本
tsc --version
3.运行你的第一个ts程序
-
创建一个test.ts文件
-
在文件中写入
let site:string = 'zhouyajing' // string是变量的类型
console.log(site)
- 在命令行输入以下命令,将ts编译成js:
tsc test.ts
在文件夹内会多出一个名字为test.js的文件:
let site = 'zhouyajing'
console.log(site)
- node运行(当然如果你的编辑器是vscode或者webstorm都可以下载直接运行js代码的插件,不适用终端运行)
node test.js
4.实现对ts文件的监听(目的是为了省去tsc xxx.ts这步操作,使用npm run build或者npm run start等代替)
- 通过命令,创建package.json
npm init -y
- 打开package.json,增加脚本build执行tsc命令
"scripts": {
"build":"tsc"
}
- tsc命令会使用到tsconfig.json的配置,继续新建tsconfig.json,并输入以下代码:
// 执行
cnpm --init 后生成tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"sourceMap": true,
"outDir": "lib" // outDir设置输出目录
},
"include":[
"src/**/*.ts"
]
}
以上配置会将src目录下的ts编译到lib文件夹下
- 假设我们的test.js在src目录下,这时我们输入命令:
cnpm run build
你就会发现会自动出现一个名为lib的文件夹,lib中生成了一个名为test.js的文件,这个test.js就是我们要的ts编译完成后的js文件
- 当然我们如果每写一次代码就要执行一次cnpm run build太麻烦了,下面告诉大家实现代码的自动监听,在package.json中增加start脚本
"scripts": {
"start":"tsc --watch",
"build":"tsc"
}
这样你修改完代码,保存后就自动将你的ts文件编译成js文件
如果以上内容对你有帮助,给个赞支持一下二嘎,谢谢!
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)