1、张培跃慢讲TypeScript之TypeScript初识及环境搭建(文字版)
“学习TypeScript难吗?”,对于新手而言,在刚接触到一门新技术的时候,总是很习惯的问上这么一句。在这里我可以郑重的告诉你:“上手TypeScript几乎没有任何难度可言!”
TypeScript最近很火,有很多开源的项目也是由其开发的,如果你是一名前端开发工程师或准备要成为一名前端开发工程师的话,现在如果再不学习TypeScript就真的太OUT了!那么现在请你系好安全带,和我一起踏上学习TypeScript之旅吧!
一、TypeScript是什么?
相亲也要先了解一下,更何况是学习一门新的知识,对吧。
1、TypeScript 是微软在2012年开发的一门免费开源的编程语言。它是 JavaScript 的一个超集(增强版)。它在JS原来的基础上增加了一套十分强大的类型系统,从而可以让小伙伴们在写代码的时候获得更加丰富的语法提示。在代码的编译阶段也可以通过类型系统的检查,从而有效避免一些线上错误。
2、TypeScript是一门比Java更Script的编程语言。也就是说TypeScript具有真正的面向对象编程思想,你可以采用它来完成更加大型复杂的应用。
3、TypeScript始于JavaScript终于JavaScript。也就是说TypeScript遵循JavaScript的语法和语义,任何Js都可以在Ts内运行,但TypeScript它不可以直接在浏览器中运行,必须要将其转换为JavaScript。
简单的说:你可以用TypeScript来编写出更加出色的JavaScript代码,用来搞定规模可观的JavaScript项目!
二、为什么要学习TypeScript?
1 、拥有强大的靠山,分别为微软与谷歌。TypeScript是由微软开发的,谷歌的Angular框架是用Typescript开发的。所以TypeScript很有可能是未来的前端脚本语言发展的主流方向。
2、Vue 3.0 源码全部用typescript重写。Vue.Js在前两年发展迅速,用户数和粉丝量呈指数级增长,目前Vue开发者插件用户数约为70.4万。
3、Node.js之父瑞安达尔(Ryan Dahl)发布了新的开源项目 deno,而该项目最终是要提供一个安全的 TypeScript 运行环境。
4、为了升职加薪!
三、如何学好TypeScript
1、拥有JavaScript基础,了解Es6(不解释)
2、打开你的开发工具,一定要做到边学边练习。学习编程没有捷径可言,唯一的突破口便是多敲打你的代码。
3、将TypeScript应用到一个较为复杂的场景中。学以致用,学编程也是需要悟的,只有将TypeScript真正应用起来,你才能够领悟到TypeScript带给你的震撼。
四、TypeScript相关
官网:https://www.typescriptlang.org
中文:http://www.tslang.cn
官方博客:https://blogs.msdn.microsoft.com/typescript
五、环境搭建
因为TypeScript在JavaScript的基础上增加了类型系统,所以TypeScript不能够直接在浏览器当中运行。我们需要使用编译器将TypeScript编译为JavaScript。
先来搭建一个TypeScript的基本开发环境:
1、安装Node.js
因为TypeScript编译为JavaScript需要Node环境的支持,所以需要先进行Node的安装。Node的安装很简单,首先打开https://nodejs.org/zh-cn/,下载Node安装包,然后傻瓜式安装。安装完成以后打开命令工具输入:
node -v
npm -v
如果你可以看到node以及npm那就说明你已经成功安装好了Node.js
2、全局安装TypeScript
在命令窗口中继续输入命令:
npm install typescript -g
查看TypeScript版本:
tsc --version
3、运行你的第一个TS程序
- 创建一个zhangpeiyue.ts文件
- 在文件内写入:
var site:string = "zhangpeiyue.com";// string 为设置变量类型
console.log(site);
- 在命令窗口输入以入命令,将ts编译为js:
tsc zhangpeiyue.ts
- 在文件夹内多出一个名字为zhangpeiyue.js的文件:
var site = "zhangpeiyue.com";
console.log(site);
- node运行
node zhangpeiyue.js
4、实现对ts文件监听
- 通过命令,创建package.json
npm init -y
- 打开package.json,增加脚本build执行tsc命令:
"scripts": {"build":"tsc"}
- tsc命令会使用到tsconfig.json的配置,新建tsconfig.json,输入以下代码:
{"compilerOptions": {"module": "commonjs","target": "es5","sourceMap": true,"outDir": "lib"},"include":["src/**/*.ts"]
}
以上配置会将src目录下的ts编译到lib文件夹下。outDir设置输出目录。
- 将zhangpeiyue.ts移入到src目录, 输入命令:
cnpm run build
你会发现lib文件夹多了一个zhangpeiyue.js文件。
- 如果要实现代码自动监听,可在package.json中增加start脚本:
"scripts": {"start":"tsc --watch","build":"tsc",},
这样在你修改完代码保存后就自动将你的ts文件编译到js当中。
小结:今天的知识点比较简单,但是一定要动手多敲几遍。一定要把自己的开发环境配置好,否则后面的课程就没法进行了!
—————END—————
喜欢本文的朋友们,欢迎关注公众号 张培跃,收看更多精彩内容!!!
1、张培跃慢讲TypeScript之TypeScript初识及环境搭建(文字版)相关推荐
- 陈力:传智播客古代 珍宝币 泡泡龙游戏开发第十九讲:apache+php+mysql开发环境搭建(wamp)
陈力:传智播客古代 珍宝币 泡泡龙游戏开发第十九讲:apache+php+mysql开发环境搭建(wamp) window环境下进行网站建设时,必须要进行wamp环境的搭建.本文介绍了如果配置apac ...
- 张培跃版React(完善中)
文章目录 React的介绍 React的注释 jsx介绍及解析的方式 React状态组件的分类 无状态组件(函数组件) 组件传值 状态组件(类组件) 状态组件之state 状态组件与无状态组件区别 事 ...
- 张季跃201771010139《面向对象程序设计(java)》第一周学习总结(改)
张季跃201771010139<面向对象程序设计(java)>第一周学习总结 第一部分:课程准备部分 填写课程学习 平台注册账号, 平台名称 注册账号 博客园:www.cnblogs.co ...
- 张季跃 201771010139《面向对象程序设计(java)》第十八周学习总结
张季跃 201771010139<面向对象程序设计(java)>第十八周学习总结 1.实验目的与要求 (1) 综合掌握java基本程序结构: (2) 综合掌握java面向对象程序设计特点: ...
- 张季跃 201771010139《面向对象程序设计(java)》第十三周学习总结
张季跃 201771010139<面向对象程序设计(java)>第十三周学习总结 实验部分: 1.实验目的与要求 (1) 掌握事件处理的基本原理,理解其用途: (2) 掌握AWT事件模型的 ...
- typescript ajax,TypeScript的应用方式
> 本文不讲如何安装,只讲代码中的实际应用 # 一.什么是 TypeScript? typescript是js的超集,它在js的基础上增加了静态类型校验,可以在运行前校验js中的一些错误并修正. ...
- react打包后图片丢失_手搭一个 React,Typescript,Koa,GraphQL 环境
本文系原创,转载请附带作者信息:yhlben 项目地址:https://github.com/yhlben/cdfang-spider 前言 在实际的开发过程中,从零开始初始化一个项目往往很麻烦,所以 ...
- 精编,精讲,精练,精益求精---AP微积分第10版在精雕细琢反复打磨中与你相遇
精编,精讲,精练,精益求精-AP微积分第10版在精雕细琢反复打磨中与你相遇 AP微积分是美国大学38个专业的必修与选修课程,登陆中国以来,发展迅猛,汹涌澎湃,几乎成为高中留学生必选的课程,然而AP微积 ...
- 干货! 快速上手typescript的学习笔记 (对比JS的新特性,环境搭建,webpack配置,ts编译配置)
前提需要有js的基础 文章目录 TypeScript 产生背景 什么是TypeScript? TypeScript增加了什么 TypeScript开发环境搭建 基本类型 编译文件配置 tsconfig ...
最新文章
- 如何开启远程(win7win8)
- web前端培训:CSS中单行文本溢出显示省略号的方法
- 原来Transformer就是一种图神经网络,这个概念你清楚吗?
- @Conditional 和 @ConditionalOnProperty
- 华为鸿蒙OS合作方,华为发布鸿蒙OS元服务,超300家应用合作伙伴加入
- 如何洗脸才正确?洗脸也有讲究 - 生活至上,美容至尚!
- 【前端统计图】echarts改变颜色属性的demo
- GAC中的所有的Assembly都会存放在系统目录%winroot%/assembly下面
- javacript Function parameters(函数参数)
- 通过案例学习调优之--Oracle ASH
- 谷歌验证码(Recaptcha)对接教程
- 最轻松mflac转flac、mp3方法
- rxbus 源码_RxBus 这个 RxBus 稳如老狗 @codeKK Android开源站
- Lacuncher3---修改文件夹图标和修改桌面布置
- windows那些讨厌的CPU占用进程
- 冒烟测试和回归测试的区别
- 我们在这创业,我们在这融资,我们在这泡妞,我们在这死去...
- 【附源码】Python计算机毕业设计社区生鲜电商平台
- Java使用Graphics2D添加文字水印碰见的坑(给透明底图片加半透明水印)
- EVT, DVT, MVT, PVT常见软件节点是什么意思