TypeScript 学习笔记1: 简介
来源:互联网 发布:3d数学基础游戏编程 编辑:程序博客网 时间:2024/05/21 11:37
原文链接:https://leanpub.com/essentialtypescript/read#introduction
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
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;}
- TypeScript 学习笔记1: 简介
- TypeScript 学习笔记1
- TypeScript学习-TypeScript数据类型简介
- TypeScript数据类型-TS学习笔记(1)
- TypeScript 学习笔记
- TypeScript 学习笔记2
- TYPESCRIPT 学习笔记3
- TypeScript学习笔记一
- TypeScript 学习笔记
- Typescript学习笔记
- TypeScript学习笔记
- TypeScript学习笔记一
- TypeScript学习笔记之 类
- TypeScript学习笔记之函数
- TypeScript学习笔记之 泛型
- TypeScript 学习笔记6: Classes
- TypeScript 学习笔记7: Generics
- TypeScript 学习笔记8: Modules
- SVN 与 Web 之间同步
- linux中执行jps进程没有完全显示5个进程
- [Android]根据名称name来获取string的值
- 葵花宝典第五天
- 一.scrapy豆瓣登陆篇
- TypeScript 学习笔记1: 简介
- 深入浅出ES6(四):模板字符串
- mapreduce多路径输入单文件输出
- Android setting.db 配置注释
- bzoj 1706: [usaco2007 Nov]relays 奶牛接力跑(倍增floyd)
- NSString字符串的截取,拼接,匹配,反转处理
- HDFS的工作原理
- uboot和kernel中关于nand分区的定义
- VRTK 3.2.0版本Demo详解