TypeScript基本用法
一、什么是 TypeScript ?
- TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准。
- TypeScript 是由微软开发的自由和开源的编程语言。
- TypeScript 设计目标是开发大型应用,它可以编译成纯 JavaScript,编译出来的 JavaScript 可以运行在任何浏览器上。
二、语言特性
TypeScript 是一种给 JavaScript 添加特性的语言扩展。增加的功能包括 :
- 类型批注和编译时类型检查
- 类型推断
- 类型擦除
- 接口
- 枚举
- Mixin
- 泛型编程
- 名字空间
- 元组
- Await
从 ECMA 2015 反向移植而来的功能 :
- 类
- 模块
- lambda 函数的箭头语法
- 可选参数以及默认参数
三、JavaScript 与 TypeScript 的区别?
-
TypeScript 是 JavaScript 的超集,扩展了 JavaScript 的语法,因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改,TypeScript 通过类型注解提供编译时的静态类型检查。
-
TypeScript 可处理已有的 JavaScript 代码,并只对其中的 TypeScript 代码进行编译。
![]() |
![]() |
四、TypeScript 开发环境搭建
1. 下载Node.js
首先根据自己电脑系统配置,然后进行选择下载
64 位 : 点我下载 64 位 !
32 位 : 点我下载 32 位 !
2. 安装Node.js
我们下载完之后,点击安装 node.js
3. 使用npm全局安装typescript
点击快捷键 win + r,输入 cmd 回车,输入 命令行进行安装 typescript
npm i -g typescript
4. 使用编译
1. 先创建一个文件夹,在里面创建 xxx.ts
2. 在 xxx.ts 里面输入简单的代码
3. 打开文件夹的路径,输入 cmd 打开命令行,输入命令 tsc xxx.ts,将 ts 文件转为 js
4. 在输入 node xxx.js 就可以输出内容
在 1.ts 中编辑代码 :
const name1 : string = "hello typescript"
console.log(name1)
在 cmd 中显示 :
五、基础语法
1. typeScript 程序由以下几个部分组成:
- 模块
- 函数
- 变量
- 语句和表达式
- 注释
2. typeScript 程序由以下几个部分组成:
3. TypeScript 保留关键字:
4. TypeScript 区分大小写字符
5. 空白和换行
TypeScript 会忽略程序中出现的空格、制表符和换行符。
空格、制表符通常用来缩进代码,使代码易于阅读和理解。
6. 分号是可选的
每行指令都是一段语句,你可以使用分号或不使用, 分号在 TypeScript 中是可选的,建议使用。
合法代码 :
console.log("张三")
console.log("李四");
如果语句写在同一行则一定需要使用分号来分隔,否则会报错
合法代码 :
console.log("张三");console.log("李四");
7. TypeScript 注释
注释是一个良好的习惯,虽然很多程序员讨厌注释,但还是建议你在每段代码写上文字说明。
注释可以提高程序的可读性。
注释可以包含有关程序一些信息,如代码的作者,有关函数的说明等。
编译器会忽略注释。
TypeScript 支持两种类型的注释
// 我是单行注释哦!
/*
我是
多行
注释
!
*/
六、TypeScript 与面向对象
面向对象是一种对现实世界理解和抽象的方法。TypeScript 是一种面向对象的编程语言。
面向对象主要有两个概念:对象和类
- 对象 : 对象是类的一个实例,有状态和行为.
- 类 : 类是一个模板,它描述一类对象的行为和状态.
- 方法 : 方法是类的操作的实现步骤
七、基本类型
1. 类型声明
- 类型声明是TS非常重要的一个特点
- 通过类型声明可以指定TS中变量(参数、形参)的类型
- 指定类型后,当为变量赋值时,TS编译器会自动检查值是否符合类型声明,符合则赋值,否则报错
- 简而言之,类型声明给变量设置了类型,使得变量只能存储某种类型的值
- 语法 :
let 变量: 类型;
let 变量: 类型 = 值;
function fun1(参数: 类型, 参数: 类型): 类型{
...
}
2. 自动类型判断
- TS拥有自动的类型判断机制
- 当对变量的声明和赋值是同时进行的,TS编译器会自动判断变量的类型
- 所以如果你的变量的声明和赋值时同时进行的,可以省略掉类型声明
3. 基本类型
类型 | 例子 | 描述 |
---|---|---|
number | 1,2,3 | 任意数字 |
string | ‘hello’,‘zhang’ | 任意字符串 |
boolean | true,false | 布尔值 true / false |
字面量 | 其本身 | 限制变量的值就是该字面量的值 |
any | 任意类型 | |
unknown | 类型安全的any | |
void | 空值(undefined) | 没有值(或undefined) |
never | 没有值 | 不能是任何值 |
object | {“name”:“张三”} | 任意的JS对象 |
array | [1,2,3] | 任意JS数组 |
tuple | [4,5] | 元素,TS新增类型,固定长度数组 |
enum | enum{A, B} | 枚举,TS中新增类型 |
- number
let num1: number = 2;
let num2: number = 0xf00d;
- boolean
let flag: boolean = false;
- string
let name1: string = "zhangsan";
- 字面量
也可以使用字面量去指定变量的类型,通过字面量可以确定变量的取值范围
let color: 'red' | 'blue' | 'black';
let num: 1 | 2 | 3 | 4 | 5;
- any
let a: any = 4;
a = 'hello';
- unknown
let a: unknown = 4;
a = 'hello';
- void
let aa: void = undefined;
- never
function error(message: string): never {
throw new Error(message);
}
- object
let obj : object ={};
- array
let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3];
- tuple
let x: [string, number];
x = ["hello", 10];
- enum
enum Color {
Red = 1,
Green = 2,
Blue = 4,
}
let c: Color = Color.Green;
4. 类型断言
类型断言可以用来手动指定一个值的类型,即允许变量从一种类型更改为另一种类型。
有些情况下,变量的类型对于我们来说是很明确,但是TS编译器却并不清楚,此时,可以通过类型断言来告诉编译器变量的类型,断言有两种形式:
let str: unknown = "this is a string";
let strLength: number = (str as string).length;
let str: unknown = "this is a string";
let strLength: number = (<string>str).length;
八、tsc 常用编译参数
–help显示帮助信息
–module载入扩展模块
–target设置 ECMA 版本
–declaration额外生成一个 .d.ts 扩展名的文件。tsc ts-hw.ts --declaration ,以上命令会生成 ts-hw.d.ts、ts-hw.js 两个文件。
–removeComments删除文件的注释
–out编译多个文件并合并到一个输出的文件
–sourcemap生成一个 sourcemap (.map) 文件。sourcemap 是一个存储源代码与编译代码对应位置映射的信息文件。
–module noImplicitAny在表达式和声明上有隐含的 any 类型时报错
–watch在监视模式下运行编译器。会监视输出文件,在它们改变时重新编译。
九、总结
需要注意的地方: 变量不要使用 name 否则会与 DOM 中的全局 window 对象下的 name 属性出现了重名. 还有 Typescript 中的对象必须是特定类型的实例