let age:number = 18 给变量定义类型
1.ts新增类型
let s : symbol = symbol()
表示独一无二的值 调用的方式创建
定义类型都是小写的
let a :number[] = ['1','2','3'] 或者 let a :Array = ['1','2','3'] 都表示定义了一个数值类型的数组
let b boolean[] = [true,false] 布尔值类型的数组创建
1.1联合类型
let c:(number|string)[] = [1,2,3,'1','2','4']
表示这些类型中的任意一种,
1.2类型别名(自定义类类型)
type CustomArray = (number|string)[]
let arr1: CustomArray = [1,'2'3,'a']
let arr2: CustomArray = [1,'6'3,'a']
使用type 关键字创建类型关键字
1.3 函数类型
函数声明
function add ( num1:number,num2:number ) : number {
retrun num1 + num2
}
函数表达式
const add = ( num1:number,num2:number ) : number {
retrun num1 + num2
}
当函数作为表达式时,可以通过类似箭头函数形式的语法来为函数添加类型. 这种形式只适用于函数表达式.
const add:(num1:number,num2:number) => number = ( num1,num2 ) => {
retrun num1 + num2
}
如果函数没有返回值, 那么, 函数的返回值类型为:void
function greet (name:string):void{
console.log('Hello',name)
}
可选参数 在可传可不传的参数名称后面添加?(问号)
注意: 可选参数只能出现在参数列表的最后,也就是说可选参数后面不能再出现必选参数.
function greet (start?:string,end?:string):void{
console.log('起始索引:'start ,'结束索引:'end)
}
1.4对象类型
js中的对象是由属性和方法构成的,而ts中的对象类型就是在描述对象的结构(又什么类型的属性和方法)
let person:{name:string;age:number;sayHi():void} = {
name:;jack
age:19,
sayHi(){}
}
1.直接使用{}来描述对象结构. 属性采用属性名:类型的形式;方法采用方法名():返回值的形式.
2.如果方法有参数,就在方法后面的小括号中指定参数类型(比如:greet(name:string):void).
3.在一行代码中指定对象的多属性类型时,使用;(分号)来分隔.
如果一行代码只制定一个属性类型(用过换行来分隔多个属性类型),可以去掉;(分号).
方法类型也可以使用箭头函数形式(比如:{sayHi:()=>void})
对象的属性或方法,也是可选的,此时就用到可选属性了. 比如,我们在使用axios({...})时,如果发送GET请求,method 属性就可以省略.
function myAxios(config:{url:string;method?:string}) { console.log(config)
可选属性的语法he函数可选参数的语法一致,都是用?(文号来表示)
1.4.1接口
当一个对象的类型被多次使用时一般会用接口(interface)来表述对象的类型,打到复用的目的.
interface IPerson {
name:string
age:number
sayHi():void
}
let person:IPerson = {
name:'jack',
age:19,
sayHi(){}
}
1.使用interface关键字来声明接口.
2.接口名称(比如,此处的IPerson),可以是任意合法的变量名称.
3.声明接口后,直接使用接口名称作为变量的类型.
4.因为每一行只有一个属性类型,因此,属性类型后面没有;(分号).
interface 和 type 对比:
相同点 : 都可以给对象指定类型.
不同点 : 类型别名,不仅可以为对象指定类型,实际上可以为任意类型指定别名.
1.4.2接口之间的复用
如果这两个接口之间有相同的属性或方法,可以将公共的属性或方法抽离出来,通过继承的方式来实现复用.
比如,这两个接口都有 x,y 两个属性,重复写两次,可以,但很繁琐.
interface Point2D {x:number;y:number}
interface Pointt3D {x:number; y:number; z:number}
更好的方式:
interface Point2D {x:number;y:number}
interface Pointt3D extends Point2D {z:number}
解释:
1 使用extends(继承) 关键字实现了接口Point3D继承Point2D.
2 继承后,point3D就有了point2D的所有属性和方法(此时,point3D同时又x,y,z三个属性)
1.4.3元组
经纬度坐标
let position:number[] = [39.123.114.232]
使用这个不严谨 可以出现任意多个数字
let position:[number,number] = [39.123.114.232]
1.元组类型可以确切的标记有多少个元素,以及每个元素的类型.
2 该示例中 元组中有两个元素,每个元素都是number
类型断言
<a href = 'https://juejin.cn/editor/drafts/7193580567358046267' id = "link"> 传智教育 </a>
const alink = document.getElementById('link')as HTMLAnchorElemnet
aLink.href
在控制台 打印 console.dir() 可以看dom元素类型
当自己比ts 更清楚元素的类型时可以使用类型断言
字面量类型
可以通过字面量来定义元素类型
const str2 :'hello' = 'hello'
let age:18 = 18
枚举类型
枚举的功能类似于字面量类型+联合类型组合的功能,也可以表示一组明确的可选值.
枚举:定义一组命名常量.他描述一个值,该值可以是这些命名常量中的一个.
enum Direction {Up,DoWm,left,Right}
function changeDirection(direction:Direction) {
console.log(direction)
}
changeDirection(Direction.Up)
1.使用enum 关键字定义枚举.
2.约定枚举名称,枚举中的值以大写字母开头.
3.枚举中的多个值之间通过,(逗号)分隔.
4.定义好枚举后,直接使用枚举名称作为类型注解.
5.类似于js中的对象可直接通过(.)语法访问枚举成员.
枚举作为实参的值
枚举的成员是有值的,默认为:从0 开始的自增的数值.
我们把枚举成员的值为数字的枚举,称为:数字枚举.
当然,也可以给枚举中的成员初始化的值.
字符串枚举
enum Direction {Up="Up"
,DoWn="DoWn",left="left",Right="Right"}
字符串枚举是没有初始值的因此,要赋值
枚举是TS为数不多的非js类型级扩展(不仅仅是类型)的特性之一.
因为其他类型仅仅被当做类型, 而枚举不仅用作类型,还提供值(枚举成员都是有值的).
也就是说,其他类型会在编译为js代码时自动移除.但是,枚举类型会被变异成js代码
any类型
不推荐使用, 不会有代码提示 相当于屏蔽ts
