TypeScript
介绍
-
TypeScript是什么?
ts是js的超集,typeScript=type+script(为js添加了类型) -
为什么要有TypeScript?
1> 在编译期间就可以发现错误
2>提高开发体验,有代码提示
3>强大类型系统,提高代码可维护性
4>支持最新的ES特性
5>面向对象
6>各大框架的加持 -
TypeScript可以在浏览器直接运行吗?
1> 安装:npm i -g typescript
2>通过:tsc xxx.ts 编译为js文件运行
常用类型
1>类型注解
语法:变量:type(类型)
let age:number=18
作用:为变量添加类型约束
2>原始类型
1.Js已有类型
1.原始类型: number/string/boolean/null/undefined/symbol
2.对象类型:object(包括:数组,对象,函数等对象)
2.ts新增类型
联合类型,自定义类型(类型别名),接口,元组,字面量类型,枚举,void,any等
let age:number=18
let myName:string='lei'
let isLoading:boolean=false
let nullValue:null=null
let undefinedValue:undefined=undefind
let fn:object=()=>
//特点:symbol()创建的值是唯一的
//作用:可以作为对象属性的键,防止与对象中其他键冲突
let uniqKey:symbol=Symbol()
let obj={
a:'123',
[uniqKey]:100,
}
//取值
console.log(obj[uniqKey])
3>数组类型
type[] 说明:type指数组中每项的类型
Array
//写法一:推荐
let numbers:number[]=[1,3,8]
//写法二
let strings:Array<string>=['a','b','c']
4>联合类型
type1 | type2 |…
说明:竖线分割多个类型
//此处()的目的是为了将提升优先级,表示:number类型的数组或string 类型的数组
let arr:(number| string)[]=[1,'a',3,'b']
5>类型别名(自定义类型)
场景:当同一类型(复杂)被多次使用时,可以通过类型别名,简化该类型的使用
type peng=number | string
let my:peng='1'
6>函数类型
1.函数的类型实际上指的是:函数参数
和返回值
的类型
2.可选参数 参数?:type 说明:参数可以传也可以不传
//函数声明
function add(num1:number,num2:number):number{
return num1+num2
}
//箭头函数
const add=(num1:number,num2:number):number=>{
return num1+num2
}
7>对象类型
1.描述对象的结构
//空对象
let person:{}={}
//有属性的对象
let person:{name:string}={
name:'lei'
}
//既有属性又有方法的对象
//在一行代码中指定对象的多个属性类型时,使用`;`(分号)来分隔
let person:{name:string;sayHi(name:string):void}=>{
name:'jack',
sayHi(name){}
}
//对象中如果有多个类型,可以换行写:
//通过换行来分割多个属性类型,可以去掉`;`
let person:{
name:string
sayHi():void
}={
name:'jack',
sayHi(){}
}
2.使用类型别名
//创建类型别名
type Person={
name:string
sayHi():void
}
//使用类型别名作为对象的类型
let person:Person={
name:'jack',
sayHi(){}
}
3.对象类型属性可选
type Config={
url:string
method?:string
}
function myAxios(config:Config){
console.log(config)
}
8>对象类型-接口
1.使用interface
关键字来声明接口
interface Iperson{
name:string
age:19,
sayHi(){}
}
2.接口继承
interface Point2D { x:number;y:number}
//继承 Point2D
interface Point3D extends Point2D{
Z:number
}
//继承后Point3D 的结构 {x:number;y:number;Z:number}
9>元组类型(元组类型可以确切地标记出有多少个元素,以及每个元素的类型)
//该示例中,元素中有两个元素,每个元素的类型是 number
let position:[number,number]=[1116,39]