文章目录
一、快速入门
1.1 TypeScript简介
- TypeScript是JavaScript的超集:TypeScript = JavaScript + Type
- 对JS进行了拓展,向JS中引入了类型等概念并加入了接口枚举等功能
- TS代码需要通过编译器编译为JS,然后再交由JS解析器执行
- TS完全兼容JS,任何的JS代码都可以直接当成TS使用
- TS拥有了静态类型,更加严格的语法,更强大的功能
- TS可以在代码执行前就完成代码的检查,减小了运行时异常的出现的几率
- TS代码可以编译为任意版本的JS代码,可有效解决不同JS运行环境的兼容问题
- 同样的功能,TS的代码量要大于JS,但由于TS的代码结构更加清晰,变量类型更加明确,在后期代码的维护中TS却远远胜于JS
1.2 TypeScript开发环境搭建
-
下载安装Node.js
-
安装TS解释器,在终端中输入
npm i -g typescript
-
创建一个TS文件
-
在TS文件目录下启动终端执行命令
tsc 文件名.ts
-
此时会在目录内生成一个.js文件
-
如果终端报错
无法将“XXX”项识别为 cmdlet、函数、脚本文件或可运行程序的名称...
- 用管理员身份打开PowerShell,并执行命令
Get-ExecutionPolicy -List
,查看当前所有作用域 - 显示仅最后一个作用域有权限,输入
Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
,将CurrentUser权限打开 - CurrentUser权限显示RemoteSigned即可
- 用管理员身份打开PowerShell,并执行命令
-
如果终端报错
tsc : 无法加载文件,因为在此系统上禁止运行脚本
- 用管理员身份打开PowerShell,并执行命令
set-ExecutionPolicy RemoteSigned
,将执行策略改为RemoteSigned - 按Y同意修改,输入
get-ExecutionPolicy
,查看执行策略是否改为RemoteSigned - 显示RemoteSigned即可
- 用管理员身份打开PowerShell,并执行命令
1.3 第一个TypeScript文件
- TS代码不能直接在Node.js或浏览器中运行,需要将TS代码转换成JS代码
执行代码:
- 将TS代码转换成JS代码,在终端中输入
tsc 文件名.ts
回车 - 执行JS代码,在终端中输入
node 文件名.js
回车
简化执行TS的步骤
使用ts-node包,即可一句命令转换运行TS文件
- 安装命令
npm i -g ts-node
- 使用方式:
ts-node 文件名.ts
- 若终端报错
return new TSError(diagnosticText, diagnosticCodes);....
,在终端输入npm install -D tslib @types/node
,新增一个依赖包即可
1.4 注释和输出语句
1.4.1 注释
注释是对代码的解释说明,用来帮助阅读和理解代码。注释内容是不会执行的
-
单行注释:快捷键
Ctrl+/
//这是单行注释
-
多行注释:快捷键
Shift+Alt+A
/* 这是多行注释 */
1.4.2 输出语句
-
输出语句会在终端中打印信息
console.log('Hello TypeScript!');
二 、变量和数据类型
2.1 变量
变量是用来存储数据的容器,并且可以更改
2.1.1 变量的声明及使用
-
变量的声明:
let age:number;
- let是TS的关键字,用来声明变量
- age是自己定义的变量名称
- :number用来指定变量age的类型为number
- 分号可有可无,但是若两个语句在同一行,中间必须用分号隔开
-
变量的基本使用
-
声明变量并指定类型
let age:number;//未赋初值系统自动赋undefined
-
给变量赋值
age = 18;
-
简化形式:声明的同时赋值,推荐使用
let age:number = 18;
-
-
奇怪的变量声明
let b = 3;//自动类型判断b为number类型 let c:boolean|string;//使用|连接多个类型(联合类型),c变量只能为boolean或string类型 c = true; c = "Hello"; let d:"A" | "B";//规定变量的字面量,d的值只能为"A"或者"B" d = "A"; d = "B"; let e:{ name:string} & { age:number};//表示e变量必须有两个对应类型的值 e = { name:'孙悟空',age:18}; //{}用来表示对象中可以包含哪些属性 let f:{ name:string,age?:number};//?表示可有可无 f = { name:'孙悟空',age:18}; f = { name:'孙悟空'}; let g:{ name:string,[propName:string]:any};//表示可以继续添加任意类型数量的变量 g = { name:'猪八戒',age:18,gender:'男'}; let h:(a:number,b:number)=>number;//希望函数d有两个number的参数,且返回值为number类型 h = function(n1,n2):number{ //写不写number都行 return n1 + n2; }
2.1.2 变量的命名规则和规范
命名规则
- 变量名称只能为字母、数字、下划线(_)、美元符号($),且不能以数字开头
- 变量名称区分大小写
命名规范
- 变量名称要见名知意
- 使用驼峰命名法(首字母小写,后面每个单词首字母大写)
2.2 基本数据类型
-
number数字:包括整数值浮点值和进制数
let age:number = 18; let score:number = 99.9; let balance:number = -18; let hex: number = 0xf00d;
-
string字符串:由零个或多个字符串串联而成,用于表示文本信息
let name:string = 'Alan';//推荐使用单引号 let sex:string = "Girl"; let age: number = 37; let sentence: string = `I'll be ${ age + 1} years old next month.`
-
boolean布尔:只有两个值true和false
let idStudying:boolean = true; let idPlaying:boolean = false;
-
array数组:可以放不同数据类型的数据,但是建议只存放同一类型
let names:string = ['胡歌','川宝','王冰冰'];//第一种 names = ['胡歌','川宝','王冰冰']; let num:Array<number> = [1,2,3];//第二种 let names:string = new Array('胡歌','川宝','王冰冰');//不推荐这种
-
any任意
let a: any;//相当于关闭了TS的类型检测,可以为任意类型,不建议使用,显式any let b;//声明变量不写指定类型,系统自动将其变为any类型,隐式any a = 'hello'; a = true; let s:string; s = a;//a是any类型,s是string类型,可以赋值,不会报错
-
unknow未知:类型安全的any
let notSure: unknown; notSure = 'hello'; let s:string; s = notSure as string;//类型断言,告诉编译器notSure就是string,别报错了
-
void
function fn(){ //此时fn返回值是void:表示没有返回值 return;//空着和只写return都表示void }
-
never
function fn():never{ //never拿来报错的,永远不会返回 throw new Error('报错了!'); }
-
undefined和null:仅有一个值,且均为本身
let u:undefined;//声明但未赋值的变量值 let n:null = null;//声明且已赋值,值为null