TypeScript 学习笔记1: 简介
2017-07-01 14:44
453 查看
原文链接:https://leanpub.com/essentialtypescript/read#introduction
1. TypeScript 是什么?
TypeScript 是JS的超集,它给JS添加了静态类型的支持。
看一段 js 代码:
因为js是动态类型语言,只有等到程序运行到这一行时,才会报错。静态类型语言有一个编译的过程。 编译器会帮助我们发现此类错误。
TypeScript 提供了一个编译器(tsc),它会把TypeScript编写的代码转换成 js 代码。
2. JavaScript 的版本和历史
操作系统版本,浏览器版本,js版本,bla bla bla 会一直困扰着每一个开发人员。
这个页面可以看各种平台对JavaScript 语言新版本的兼容性统计:http://kangax.github.io/compat-table/es6/
有了 tsc (TypeScript transpiler),我们可以随便使用ES6提供的新语言特性,而不必考虑系统兼容性问题。因为,使用tsc可以把高版本的js代码转换成低版本的js代码。
3. 第一个TypeScript程序
TypeScript 官网提供了一个 playground 页面,使我们不用安装tsc也可以编译、运行TypeScript代码:https://www.typescriptlang.org/play/index.html<
4000
/span>
3.1. 在Playground中输入如下代码:
注意:
1. 能看到最后一行下面有条红色曲线,那是错误提示,因为,whaToSay 拼写错误。
2. 鼠标hover在任意一个变量、函数上面,都可以看到它的定义。
3. Playground 右侧区域显示的是编译后的js代码。
3.2. 字符串 vs. Number
修改代码:
var greeted = 1;
var greeting = 20;
输出: 21
上面代码的本意是把两个字符串连接在一起,输出到网页上。 可是,当greeted和greeting都变成Number类型时,输出的是两个数之和。
3.3. 函数参数类型声明
给speak() 加上参数类型声明: speak(value: string)
speak(whatToSay); 下面又有红色曲线了,因为,编译器认为函数的参数类型不对。
3.4. 变量类型声明
给whatToSay加上string类型:
var whatToSay: string = greeting + greeted;
3.5. 函数返回值类型声明
1. TypeScript 是什么?
TypeScript 是JS的超集,它给JS添加了静态类型的支持。
看一段 js 代码:
var bill = { name: "Bill", quack: function() { document.write("Quack!"); } } function sayQuack(target) { target.quake(); } sayQuack(bill);这段代码运行会出错,因为,在sayQuack(target) 中,target.quake() 应该写成 target.quack()。
因为js是动态类型语言,只有等到程序运行到这一行时,才会报错。静态类型语言有一个编译的过程。 编译器会帮助我们发现此类错误。
TypeScript 提供了一个编译器(tsc),它会把TypeScript编写的代码转换成 js 代码。
2. JavaScript 的版本和历史
操作系统版本,浏览器版本,js版本,bla bla bla 会一直困扰着每一个开发人员。
这个页面可以看各种平台对JavaScript 语言新版本的兼容性统计:http://kangax.github.io/compat-table/es6/
有了 tsc (TypeScript transpiler),我们可以随便使用ES6提供的新语言特性,而不必考虑系统兼容性问题。因为,使用tsc可以把高版本的js代码转换成低版本的js代码。
3. 第一个TypeScript程序
TypeScript 官网提供了一个 playground 页面,使我们不用安装tsc也可以编译、运行TypeScript代码:https://www.typescriptlang.org/play/index.html<
4000
/span>
3.1. 在Playground中输入如下代码:
function speak(value) { document.write(value); } var greeted = "World"; var greeting = "Hello, "; var whatToSay = greeting + greeted; speak(whaToSay);
注意:
1. 能看到最后一行下面有条红色曲线,那是错误提示,因为,whaToSay 拼写错误。
2. 鼠标hover在任意一个变量、函数上面,都可以看到它的定义。
3. Playground 右侧区域显示的是编译后的js代码。
3.2. 字符串 vs. Number
修改代码:
var greeted = 1;
var greeting = 20;
输出: 21
上面代码的本意是把两个字符串连接在一起,输出到网页上。 可是,当greeted和greeting都变成Number类型时,输出的是两个数之和。
3.3. 函数参数类型声明
给speak() 加上参数类型声明: speak(value: string)
speak(whatToSay); 下面又有红色曲线了,因为,编译器认为函数的参数类型不对。
3.4. 变量类型声明
给whatToSay加上string类型:
var whatToSay: string = greeting + greeted;
3.5. 函数返回值类型声明
function speak(value: string): string { document.write(value); return value; }
相关文章推荐
- AppFuse学习笔记-简介
- PHP学习笔记(5)----phplib的简介及安装[原创]
- 微软解决方案框架(MSF)学习笔记(一)~MSF简介
- jBPM-jPDL学习笔记—框架设计简介(六)
- jBPM-jPDL学习笔记—框架设计简介(五)
- awk简介与学习笔记收集第1/3页
- jBPM学习笔记—框架设计简介
- HTML 简介(学习笔记一)
- jBPM-jPDL学习笔记—框架设计简介(四)
- awk简介与学习笔记收集第1/3页
- Python学习笔记 一 Python简介
- Velocity学习笔记3——Velocity 模板语言(VTL: Velocity Template Language)简介
- UML学习笔记(一):UML简介
- WinInet学习笔记(一)WinInet简介
- Jpcap包的学习笔记(二)Jpcap的功能简介
- 懒人的UML学习笔记1——UML简介
- SQL Server 2005盛宴系列之一:SQL Server 2005产品简介-----学习笔记
- 算法学习笔记--排序(简介)
- jBPM-jPDL学习笔记—框架设计简介(三)
- jBPM学习笔记—框架设计简介