文章目录
- 一、TypeScript 介绍
- 1. TypeScript 是什么
- 1.2 静态类型和动态类型
- 1.3 Why TypeScript
- 1.4 TypeScript 使用场景
- 1.5 TypeScript 不仅仅用于开发 Angular 应用
- 1.6 前置知识
- 二、如何学习 TypeScript
- 2.1 相关链接
- 三、起步
- 3.1 搭建 TypeScript 开发环境
- 3.2 编辑器的选择
- 3.3 Hello World
- 四、类和接口
- 4.1 接口(Interface)
- 4.2 类(Class)
一、TypeScript 介绍
1. TypeScript 是什么
TypeScript 是 JavaScript 的强类型版本。然后在编译期去掉类型和特有语法,生成纯粹的 JavaScript 代码。由于最终在浏览器中运行的仍然是 JavaScript,所以 TypeScript 并不依赖于浏览器的支持,也并不会带来兼容性问题。
TypeScript 是 JavaScript 的超集,这意味着他支持所有的 JavaScript 语法。并在此之上对 JavaScript 添加了一些扩展,如 class / interface / module 等。这样会大大提升代码的可阅读性。
和 JavaScript 若类型不同,TypeScript 这种强类型语言最大的优势在于静态类型检查,可以在代码开发阶段就预知一些低级错误的发生。
- 一种类似于 JavaScript 的语言,在 JavaScript 的基础之上增加了类型,同时增强了 JavaScript 部分语法功能
- 遵循 EcmaScript 6 标准规范
- 由微软开发
- Angular 2 框架采用 TypeScript 编写
- 背后有微软和谷歌两大公司的支持
- TypeScript 可以编译成 JavaScript 从而在支持 JavaScript 的环境中运行
- TypeScript 和 JavaScript 的关系就好比 less 和 css 的关系
1.2 静态类型和动态类型
静态(static):无需运行,根据程序代码就能确定结果。
动态(dynamic):只有运行才能确定结果。
类型:对某个数据所具有的性质进行的描述。如它的结构是怎样的,能进行什么操作。
静态类型:数据拥有类型,且仅有数据拥有类型。
动态类型:数据拥有类型,存放数据的变量、表达式也拥有类型,且类型在编译时是固定的。
下图是静态语言和动态语言的比较:
从表中可见,动态语言和静态语言各有优劣,而TypeScript提供了静态语言强类型支持,同时兼容动态语言弱类型的语法,使用者根据项目需求自由选择。
这种动静结合的特性,目前还没在其他语言见过。
1.3 Why TypeScript
-
从 Angular 2 之后,官方推荐使用 TypeScript 作为开发 Angular 应用的首选语言
-
遵循 EcmaScript 6
-
强大的 IDE 支持
- 类型检查
- 严谨的语法提示
-
代码重构
-
可读性良好
1.4 TypeScript 使用场景
-
大型团队开发
-
Angular 官推语言
-
其它…
这里引用知乎上一位开发者对使用推广 TypeScript 的看法:
typescript绝对是好东西,不过推广是有难度的:1、TS是微软制造,最好的开发工具是VS,想想有些人就激动了(什么vi流,sublime流,macbook流,虽然也能写ts,但你无法跟他们说用vs写有多么好);2、即使你告诉他们TS有多好,但是几十人的团队里总有一半以上的人不想学新的东西(当然我没有权利说不学新东西的人应该全部滚动,因为互联网打工的是大爷,想跳槽随便找工作);3、JSer很多没有学习OOP开发经验(特别是从设计/页面重构转过来的);4、很多人接触TS前根本没学过JS,经常有人问“使用TS如何写元素拖拽”这样的问题(那是DOM API好伐,不过你跟初学者很难解释明白);
1.5 TypeScript 不仅仅用于开发 Angular 应用
https://www.typescriptlang.org/samples/index.html
- React
- Angular
- Node.js
- Vue.js
- …
凡是可以写 JavaScript 的都可以使用 TypeScript。
1.6 前置知识
- EcmaScript 6
- TypeScript 概念及关系
- 具有一定的 JavaScript 开发经验
- 有 Java、C#、C++、C 等静态类型语言使用经验更佳
二、如何学习 TypeScript
- 官方文档为准
- 阅读别人的代码
- 由于 TypeScript 是兼容 EcmaScript 6 的,所以在开发的时候不需要完全学会 TypeScript 再使用
- 一个建议是有空就学,会了就用
- 虽然兼容 EcmaScript 6,但建议既然使用了 TypeScript 就让你的 TypeScript 代码更加 TypeScript,这样才能发挥出 TypeScript 的威力。
2.1 相关链接
-
维基百科 - TypeScript
-
如何评价 TypeScript?
-
flow.js/typescript 这类定义参数类型的意义何在?
-
TypeScript Github
-
TypeScript 官网
-
TypeScript 中文网
三、起步
3.1 搭建 TypeScript 开发环境
-
什么是 compiler?
-
less 编译器:
less
-
EcmaScript 6 编译器:
babel
-
TypeScript 编译器:
typescript
-
一句话:把 TypeScript 转换为 JavaScript ,浏览器就具有运行了
-
在线测试编译环境 compiler
- https://www.typescriptlang.org/play/index.html
-
本地开发编译环境
npm i -g typescript# 查看版本号 tsc --version# 查看使用帮助 tsc --help
3.2 编辑器的选择
- Visual Studio Code
- Sublime
- Webstorm
- …
3.3 Hello World
新建 greeter.ts
并写入以下内容:
function greeter(person) {return "Hello, " + person;
}let user = "Jane User";document.body.innerHTML = greeter(user);
安装编译器:
npm i -g typescript
编译:
tsc greeter.ts
修改 greeter.ts
文件中的代码,为 greeter 函数的参数 person 加上类型声明 :string
:
function greeter(person: string) {return "Hello, " + person;
}let user = "Jane User";document.body.innerHTML = greeter(user);
重新编译执行。
让我们继续修改:
function greeter(person: string) {return "Hello, " + person;
}let user = [0, 1, 2];document.body.innerHTML = greeter(user);
重新编译,你将看到如下错误:
error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.
四、类和接口
4.1 接口(Interface)
interface Person {firstName: string;lastName: string;
}function greeter(person: Person) {return "Hello, " + person.firstName + " " + person.lastName;
}let user = { firstName: "Jane", lastName: "User" };document.body.innerHTML = greeter(user);
4.2 类(Class)
class Student {fullName: string;constructor(public firstName: string, public middleInitial: string, public lastName: string) {this.fullName = firstName + " " + middleInitial + " " + lastName;}
}interface Person {firstName: string;lastName: string;
}function greeter(person : Person) {return "Hello, " + person.firstName + " " + person.lastName;
}let user = new Student("Jane", "M.", "User");document.body.innerHTML = greeter(user);