TypeScript入门(一)
TypeScript是微软官方的一种语言,是JavaScript的超集。它遵循的ECMA Script 6.0是下一代的JavaScript。浏览器还没有完全支持ES6,而ES5是弱类型的语言,还没有面向对象的概念,没有类、没有命名空间等等。所以从微软的角度来说,推出TypeScript是帮助web开发者过渡到未来的web开发技术当中。
生态:微软推出,Google支持(Angular2开发语言)。
特点:面向对象+类型检查(编译时提前发现错误)
好处:支持ES6,强大的IDE支持(类型检查,语法提示,重构)
一、开发环境搭建
搭建开发环境就是安装typescript的compiler。
在线开发:
http://www.typescriptlang.org/play/index.html
安装本地compiler tsc:
1,用npm全局安装typescript: npm install -g typescript
安装成功后就可以可以通过 tsc -v查看版本。当前最新版本是2.7.2
使用:
通过tsc命令编译tsc Hello.ts会编译生成对应的Hello.js文件。
2,可能出现问题
tsc : 无法加载文件 C:\Users\86185\AppData\Roaming\npm\tsc.ps1,因为在此系统上禁止运行脚本。

解决:以管理员身份运行powershell,执行命令set-ExecutionPolicy RemoteSigned,选“是Y”,或者“全是A”。

然后就可以执行tsc命令了

IDE
IDE帮我们执行了tsc命令。
webstorm 201602版本

二、字符串新特性
1、多行字符串
2、字符串模板
在多行字符串中,在${}里写属性或者函数调用,不用再字符串拼接了。开发速度快,可读性好。

3、自动拆分字符串
用字符串模板去调用一个方法时,字符串模板里表达式的值会自动赋值给被调用方法的参数。

被调用的方法test,有3个参数。 使用字符串拆分特性去调用test方法。

运行一下就能看的字符串被自动拆分后赋值了。
第一个参数是一个字符串数组,被根据&{}表达式的值做了拆分。 数组第一个元素是${myname}之前的字符串,第二个元素是${myname}和${getAge}之间的字符串,第三个是${getAge}之后的字符串。
三、参数新特性
1、参数类型
在参数名称后面使用冒号来指定参数的类型

指定来类型后编译器能给出错误提醒。
编译器也可以根据类型推断机制给出错误提醒。
第一个为变量赋值时自动推断变量类型。

5种基本类型:string,number(没有int),any,boolean,void
void是用来声明方法的返回值为空。
function test(): void {
}
可以在变量后面声明类型,方法的后面声明类型,也可以给方法的参数声明类型。
function test(name:string): void {
}
自定义类型。用的最多的,就是自定义一个类。
class Person{
name: string = 'defaultname';
age: number = 18;
}
var person: Person = new Person();
console.log(person.age)
好处:可以有语法提示。
2、参数默认值
在参数声明后面用等号来指定参数的默认值。
方法中带默认值的参数必须声明在最后面。
var myname: string = "lxy";
function test(a: string, b: string, c: string="haha") {
console.log(a);
console.log(b);
console.log(c);
}
test("xxx", "yyy");
3、可选参数
在方法的参数声明后面用问号来标明此参数为可选参数。
function test(a: string, b?: string, c: string="haha") {
console.log(a);
console.log(b);
console.log(c);
}
test("xxx");
//传入第一个参数,第二个参数可选,第三个参数有默认值
Note:
代码里必须处理可选参数没传的情况。
一个必填参数不能在一个可选参数后面。
参考:http://blog.csdn.net/yhhwatl/article/details/51205096
本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:http://www.cnblogs.com/starof/p/6817692.html 有问题欢迎与我讨论,共同进步。
2017-05-06
TypeScript入门(一)的更多相关文章
- TypeScript入门指南(JavaScript的超集)
TypeScript入门指南(JavaScript的超集) 你是否听过 TypeScript? TypeScript 是 JavaScript 的超集,TypeScript结合了类型检查和静态分析 ...
- TypeScript入门实例
前言 TypeScript是JavaScript的超集,微软公司开发,利用es6语法,实现对js的面向对象编程思想,写代码的时候会像强类型语言一样,指定参数类型.返回值类型,类型不对会报错,但编译后还 ...
- typescript 入门教程一
##### 从今天开始,持续更新typescript入门教程系列.... 目前ts越来越火,主流的前端框架,好比*angular,vue 3*均是采用ts来编写,所有很多公司的项目都是用**ts**来 ...
- TypeScript入门一:配置TS工作环境
配置手动编译TS文件工作环境 配置webpack自动化打包编译工作环境(后面补充) 一.TypeScript入门学习引言 进入主题之前,首先说明这个系列的博客是我刚刚接触TypeScript的学习笔记 ...
- TypeScript入门五:TypeScript的接口
TypeScript接口的基本使用 TypeScript函数类型接口 TypeScript可索引类型接口 TypeScript类类型接口 TypeScript接口与继承 一.TypeScript接口的 ...
- TypeScript 入门教程学习笔记
TypeScript 入门教程学习笔记 1. 数据类型定义 类型 实例 说明 Number let num: number = 1; 基本类型 String let myName: string = ...
- TypeScript 入门自学笔记 — 类型断言(二)
码文不易,转载请带上本文链接,感谢~ https://www.cnblogs.com/echoyya/p/14558034.html 目录 码文不易,转载请带上本文链接,感谢~ https://www ...
- TypeScript入门文档
typescript入门文档链接d地址:https://ts.xcatliu.com/basics/type-of-function.html 博主个人站点:www.devloper.top
- TypeScript入门
博客园首发,转载请注明出处,多谢支持.http://www.cnblogs.com/xuema/ 一.TypeScript TypeScript是一种由微软开发的自由和开源的编程语言.它是JavaSc ...
- 【转】JavaScript => TypeScript 入门
几个月前把 ES6 的特性都过了一遍,收获颇丰.现在继续来看看 TypesScript(下文简称为 “TS”).限于经验,本文一些总结如有不当,欢迎指正. 官网有这样一段描述: TypeScript ...
随机推荐
- 使用基于Android网络通信的OkHttp库实现Get和Post方式简单操作服务器JSON格式数据
目录 前言 1 Get方式和Post方式接口说明 2 OkHttp库简单介绍及环境配置 3 具体实现 前言 本文具体实现思路和大部分代码参考自<第一行代码>第2版,作者:郭霖:但是文中讲 ...
- 1000多个项目中的十大JavaScript错误以及如何避免
通过统计数据库中的1000多个项目,我们发现在 JavaScript 中最常出现的错误有10个.下面会向大家介绍这些错误发生的原因以及如何防止. 对于这些错误发生的次数,我们是通过收集的数据统计得出的 ...
- 嵌入式Linux基于framebuffer的jpeg格式本地LCD屏显示
在基于Linux的视频监控采集系统中,摄像头采集到的一帧视频图像数据一般都是经过硬件自动压缩成jpeg格式的,然后再保存到摄像头设备的缓冲区.如果要把采集到的jpeg格式显示在本地LCD屏上,由于我们 ...
- Error Code: 1360 - Trigger does not existQuery
1.错误描述 Query: DROP TRIGGER `t_sert_cs_approve` Error occured at:2015-04-12 13:37:32 Line no.:1 Error ...
- JSP中的编译指令和动作指令的区别
JSP中的编译指令和动作指令的区别 1.编译指令是通知Servlet引擎的处理消息,而动作指令只是运行时的脚本动作 2.编译指令是在将JSP编译成Servlet时起作用,而动作指令可替换成JSP脚本, ...
- canvas动画:自由落体运动
经过前面的文章,我们已经能够在canvas画布上画出各种炫酷的图形和画面,但是这些画面都是禁止的,怎么样才能让他们动起来呢? 如何绘制基本图形可以参考:canvas基本图形绘制 如何对基本图形移动旋转 ...
- html->html5->css->javascript(js)->jQuery->AJAX->JSON
首先来讲HTML,html是很多人接触到的第一种编写网页的语言,小编是在大学本科期间的编程课程上接触到html的,小小的几行代码就能编制出精彩绝伦的网页,不禁令人赞叹!HTML的语法自然不用多说,网上 ...
- eclipse和android studio的目录结构分析
不管你喜不喜欢,愿不愿意,自从Google宣布正式停止对于eclipse的支持,要开发android的APP,你都得乖乖的用android studio(以下简称AS)了,不过也不是什么悲伤的故事,对 ...
- hive查询结果输出到hdfs上
insert overwrite directory "/mapredOutput/UserYesterdayInterest/${hiveconf:day}"row format ...
- luogu【P3387】【模板】缩点
原题入口 PS:这个题数据是由Hany01大大出出来的 %%% 这个题显然是一道强联通+DAGdp的题 (题目背景有= =) 缩点的原因就是:不缩会一直在一个地方绕圈圈 而且不能进行后面的DAPdp ...