TS的特点
强大的类型系统： —— 能快速找错 Interface —— 接口 Strongly Typed —— 强制类型 Generics —— 泛型
安装typescript
cmd进入终端输入命令全局安装ts
npm install -g typescript
版本查看
tsc -V
TypeScript基本类型
类型注解： 是一个轻量级的函数或者变添加的约束或者声明
ts可以转换成任意版本的JS
在非严格模式下：ts文件类型注解不匹配时 tsc 对应ts文件 是可以将该文件改变为JS文件，但编译时会报错
基本语法：
给函数的参数和返回值确定类型
function sum(a:number,b:number):number{
return a+b
}
联合类型： 可以使用 | 实现联合类型
字面量 —— let a:10
any
-
any类型相当于关闭了TS的语法检测，隐式any —— 变量不指定类型
-
any类型变量可以赋值给任意类型变量:
let a
let c:string
a=c
console.log(a=c) //输出undefined
unknow —— 表示未知类型的值
- unknown类型变量不可以直接赋值给任意类型变量，其他变量可以给unknown赋值:
let a:unknown
let c:string
c=a //报错 ，不能将类型“unknown”分配给类型“string”
a=c //正确
- unknown类型变量可以通过类型判断检查或者断言将值赋值给其他类型变量:
类型判断检查
let a:unknown
a='hi'
let c:string
if(a===string){
c=a
}
类型断言
c = a as string;
c=<string>a
类型断言
- xxx变量 as 类型;
- <类型>xxx变量
void、never
1. void 表示返回值为空
function fn1():void{
}
2. never表示没有返回值，用于报错
function fn1():never{
throw new Error('报错')
}
定义对象
let a:{name:string,[propName:string]:any} —— 表示name属性值必须为string，其他属性为任意类型的属性
[propName:string]:any —— 表示任意类型的属性
如下：
a={name:'ts',age:18，sex：'男'}
a={name:'ts',age:18}
a={name:'ts',c:true}
在属性名后面加? 表示可选属性
let a:{name:string,age?:number}
以下两种都成立
a={name:'ts',age:18}
a={name:'ts'}
函数结构的类型声明
let fn:(a:number,b:number)=>num
fn=function(n1,n2)=>{return n1+n2}
数组的类型声明
- 类型[ ]
- Array<类型>
let e:string[] 或 let a:Array<string> —— 表示字符串数组
e=['1','2','3'] //正确形式
e=['1','2',3] //错误形式
元组tuple —— 固定长度的数组
语法： xxx:[类型,类型,类型]
let e:[string，number]
e=['1',2] //正确形式
e=['1',2,'3'] //错误形式
e=['1','2',3] //错误形式
枚举enum —— 枚举
语法： xxx:[类型,类型,类型]
enum Sex{
Male=0,
Female=1
}
或链接： let e:{name:string,sex:0|1}
枚举：let e:{name:string,sex:Sex}
e={
name:'ts',
sex:Sex.Male
}
&、| 与、或
或： let e:{name:string,sex:0|1}
与： let e:{name:string}&{age:number}
e={name:'ts',age:18} //正确
e={name:'ts'} //错误
类型别名
- type myType=string
- type myType=1|2|3|4|5
比如：
type myType=1|2|3|4|5
let a:myType ——表示let a:1|2|3|4|5
a=1 //正确
a=5 //正确
a=6 //错误
TypeScript编译选项配置
- 自动编译文件
监视TS文件，保存ts文件后，自动编译为JS文件
webstorm:
tsc 文件名 -w //w(watch) —— 表示开启监视，当前文件
vscode：
1). 生成配置文件tsconfig.json
tsc --init
2). 修改tsconfig.json配置
"outDir": "./js",
"strict": false,
3). 启动监视任务:
终端 -> 运行任务 -> 监视tsconfig.json
- 自动编译项目
监视TS文件，保存ts文件后，自动编译为JS文件
webstorm:
1). 创建文件tsconfig.json
tsc //没有配置会监视当前项目的所有ts文件
2)配置文件
**：所有目录
*：所有文件
1. "include":{
"./src/**/*"
}
2. "exclude":{
"./src/**/*" //不设置的默认值：["node_modules","bower_components","jspm_packages"]
}
3. "extends":{
}
4. "files":{
//类似include单独引入单个文件
}
5. //编译器的选项
"compilerOptions":{
//指定转换es版本
"target":"ES5",
//指定项目中所需要的库，配置后能提示，并检查
"lib":[],
//指定模块化规范
"module":"",
//指定编译后的JS文件所在目录
"outDir":"./dist",
//全局作用域下的代码合并为一个文件，合并模块的话需要module配置为system
"outFile":"./dist/app.js",
//是否对JS文件进行编译，默认false
"allowJs":true,
//是否检查js语法符合语法规范，默认false
"checkJs":false,
//编译之后是否移除注释，默认false
"removeCommonts":false,
//所有严格检查的总开关
"strict":false,
//不生成编译后的文件，默认false
"noEmit":true，
//发生错误的不生成编译后的文件，默认false
"noEmitOnError":true,
//编译后的JS文件使用严格模式，默认false，引入导出的模块代码自动进入严格模式，无需设置
"alwaysStrict":false,
//不允许隐式any类型
"noImplicitAny":true,
//不允许不明确类型的This，严格模式和非严格模式
"noImplicitThis":false,
//严格检查空值
"strictNullChecks":true
}
6. "file":[
类似include单独引入单个文件
]
7. "file":{
类似include单独引入单个文件
}
vscode:
1). 生成配置文件tsconfig.json
tsc --init
2). 修改tsconfig.json配置
"outDir": "./js",
"strict": false,
3). 启动监视任务:
终端 -> 运行任务 -> 监视tsconfig.json
使用webpack打包ts代码
- 创建package.json 初始化包管理：
npm init -yes - 安装包 webpack webpack-cli typescript ts-loader(ts的加载器)
- 配置webpack.config.js文件
