这是我参与「第五届青训营」伴学笔记创作活动的第8天。
一、本堂课重点内容
本节课学习TypeScript的概念与基本语法。
二、详细知识点介绍
TypeScript定义
- TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准([ES6 教程]
- TypeScript 由微软开发的自由和开源的编程语言。
- TypeScript 设计目标是开发大型应用,它可以编译成纯 JavaScript,编译出来的 JavaScript 可以运行在任何浏览器上。
TypeScript语言特性
TypeScript 是一种给 JavaScript 添加特性的语言扩展。增加的功能包括:
- 类型批注和编译时类型检查
- 类型推断
- 类型擦除
- 接口
- 枚举
- Mixin
- 泛型编程
- 名字空间
- 元组
- Await
以下功能是从 ECMA 2015 反向移植而来:
- 类
- 模块
- lambda 函数的箭头语法
- 可选参数以及默认参数
TypeScript基础语法
TypeScript 程序由以下几个部分组成:
- 模块
- 函数
- 变量
- 语句和表达式
- 注释
const hello : string = "Hello World!"
console.log(hello)
上面为使用ts编写的helloworld,在通过tsc命令编译后即可得到如下所示js代码:
var hello = "Hello World!"; console.log(hello);
JavaScript 与 TypeScript 的区别
- TypeScript 是 JavaScript 的超集,扩展了 JavaScript 的语法,因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改,TypeScript 通过类型注解提供编译时的静态类型检查。
- TypeScript 可处理已有的 JavaScript 代码,并只对其中的 TypeScript 代码进行编译。
TypeScript 基础类型
TypeScript 包含的数据类型如下表:
| 数据类型 | 关键字 | 描述 |
|---|---|---|
| 任意类型 | any | 声明为 any 的变量可以赋予任意类型的值。 |
| 数字类型 | number | 双精度 64 位浮点值。它可以用来表示整数和分数。``` |
| let binaryLiteral: number = 0b1010; // 二进制 let octalLiteral: number = 0o744; // 八进制 let decLiteral: number = 6; // 十进制 let hexLiteral: number = 0xf00d; // 十六进制 |
| 字符串类型 | string | 一个字符系列,使用单引号(')或双引号(")来表示字符串类型。反引号(`)来定义多行文本和内嵌表达式。```
let name: string = "Runoob"; let years: number = 5; let words: string = `您好,今年是 ${ name } 发布 ${ years + 1} 周年`;
``` |
| 布尔类型 | boolean | 表示逻辑值:true 和 false。```
let flag: boolean = true;
``` |
| 数组类型 | 无 | 声明变量为数组。```
// 在元素类型后面加上[] let arr: number[] = [1, 2]; // 或者使用数组泛型 let arr: Array<number> = [1, 2];
``` |
| 元组 | 无 | 元组类型用来表示已知元素数量和类型的数组,各元素的类型不必相同,对应位置的类型需要相同。```
let x: [string, number]; x = ['Runoob', 1]; // 运行正常 x = [1, 'Runoob']; // 报错 console.log(x[0]); // 输出 Runoob
``` |
| 枚举 | enum | 枚举类型用于定义数值集合。```
enum Color {Red, Green, Blue}; let c: Color = Color.Blue; console.log(c); // 输出 2
``` |
| void | void | 用于标识方法返回值的类型,表示该方法没有返回值。```
function hello(): void { alert("Hello Runoob"); }
``` |
| null | null | 表示对象值缺失。 |
| undefined | undefined | 用于初始化变量为一个未定义的值 |
| never | never | never 是其它类型(包括 null 和 undefined)的子类型,代表从不会出现的值。 |
**注意:** TypeScript 和 JavaScript 没有整数类型。
## 三、引用参考
csdn