TypeScript
是类型化的 Javascript
, 它不仅支持JavaScript
的所有特性,还在 JavaScript
的基础上添加了静态类型注解扩展。
在 TypeScript
中,我们不仅可以轻易复用 JavaScript
的代码、最新特性,还能使用可选的静态类型进行检查报错,使得编写的代码更健壮、更易于维护
接下来我们一起看看 TypeScript 的基本语法。
基础语法
定义变量
let age = 23;
上面代码既符合 typescript
也符合 javascript
语法
区别在于,typescript
还可以像下面那样定义 age
let age : number = 1; // 显示指定 age是 number类型
同样的,我们也可以显示定义 string
, boolean
,null
, undefined
等类型
下表是 javascript
类型与 typescript
类型的对照表
|Javascript原始类型|TypeScript类型|
|-|-|
|string|string|
|number|number|
|boolean|boolean|
|null|null|
|undefined|undefined|
下面我们来了解一下typescript
中的类型
字符串 string
let name: string = 'tom'; // 字符串字面量
let url: string = String('www.helloworld.net'); // 显式类型转换
let hello: string = `my site is ${url}`; // 模板字符串
说明:所有 JavaScript 支持的定义字符串的方法,我们都可以直接在 TypeScript 中使用。
数字 number
同样,我们可以使用number
类型表示 JavaScript
已经支持或者即将支持的十进制整数、浮点数,以及二进制数、八进制数、十六进制数,具体的示例如下所示:
let n: number = 11; // 十进制整数
let n1: number = Number(12); //十进制整数
let num10: number = 3.1415926; // 十进制浮点数
let num2: number = 0b1010; // 二进制整数 ,0b开头
let num8: number = 0o744; // 八进制整数 ,0o开头
let num16: number = 0xf00d;// 十六进制整数, 0x开头
布尔值 boolean
使用boolean
表示 true
或者 false
,如下代码所示。
let isLogin: boolean = true;
let hasMoney: boolean = false;
静态类型检测
在编译时期,静态类型的编程语言即可准确地发现类型错误,这就是静态类型检测的优势。
在编译时,TypeScript 编译器将通过对比检测变量接收值的类型与我们显示注解的类型,从而检测类型是否存在错误。
- 如果两个类型完全一致,显示检测通过;
- 如果两个类型不一致,它就会抛出一个编译期错误,告知我们编码错误,具体示例如下代码所示:
const age: number = 23; const age2: number = "23"; // ts(2322) Type 'string' is not assignable to type 'number'.
小结
这一讲通过与 JavaScript
的基础类型进行对比,我们得知:TypeScript
其实就是添加了类型的 JavaScript
,它并没有任何颠覆性的变动
所以,学习 typescript
并不是一件难事