// 接口interface
// 定义对象类型的另外一种方式 写法 与 type 对象 相差一个 = 号 用法一样
interface Point {
x:number,
y:number
}
function printCoordInter(pt:Point){
console.log(pt.x);
console.log(pt.y);
}
printCoordInter({x:1,y:2});
// 类型别名与 接口interface 有什么不同
//扩展接口 接口interface
interface Aniaml {
name:string
}
interface Bearextends Aniaml{
honey:boolean
}
const bear:Bear ={
name:'winie',
honey:true
}
console.log(bear.name);
console.log(bear.honey);
// 扩展接口 type 交叉扩展
type Aniaml02 = {
name:string
}
type dog = Aniaml02 & {
honey:boolean
}
const cat : dog = {
name:'小黑',
honey:true
}
console.log(cat.name)
console.log(cat.honey)
// 向现有的类型中添加新的字段 接口interface 再写一个相同的名称 不同的字段即可
interface myWindow {
name:string
}
interface myWindow {
title:string,
age:number
}
const w: myWindow = {
name:'小白',
title:'小白的title',
age:100
}
console.log(w.name)
console.log(w.title)
// 通过 tyle 扩展的时候 是不可以通过同名扩展
//类型断言 指定更具体的类型
const myCanvas =document.getElementById('main_canvas')as HTMLCanvasElement;
//或者
const OrmyCanvas = document.getElementById('main_canvas');
const x ='hello' as string;
const y1 = ('hello' as unknown)as number;//不知道 hello 是什么类型
const y2 = ('hello' as any)as number;//不知道 hello 是什么类型
// 文字类型 这种情况 state 只能传入固定的 'left'| 'right'|'center' 这三种的其中一个 就是文字类型
function pring(s:string,state:'left'|'right'|'center'){
console.log(s)
console.log(state)
}
pring('22','left');
//扩展
function request(url:string,methods:'GET'|'POST'|'PUT'){
console.log(url)
console.log(methods)
}
const req = {
url:'https://localhost',
method:'GET' as 'GET'// 这里 只能这样写 是最合适的 或者在调用的时候 断言成 request(req.url,req.method as 'GET') 也是可以的
}
request(req.url,req.method)// 这里写成req.method 会报错 要修改 上面 的 req 进行断言 才可以
//写function 的时候 做一个 可选参数传入 就是在参数后面 增加一个 ? 号即可
function change(x?:string |null){
if(x){
console.log(x)
}
//或者 写成
console.log(x!.toString())// 增加一个 ！ 表示x 不为 null 的时候 不要过多使用!
}
change()
// 枚举enum
enum Direction {
Up =1 ,
Down,
Left,
Right
}
输出的时候 就会依次 输出 1 2 3 4 不赋默认值的话 就是从0 开始 依次累加
// bigint Symbol
// const num2:bigint = BigInt(100)
//Symbol 全局唯一引用 赋同样的 值 但是 返回的 不一样
typeof 类型守卫 真值缩小 等值缩小等 这些的 我个人理解就是将数据类型通过判断 更加具体化 细节代码我就不做了 有兴趣的小伙伴可以去学习视频
//in 操作符缩小
type Fish = {swim: () =>void};
type Brid = {fly:() =>void};
type Human = {swim?:() =>void,fly?:() =>void}
function move(aniaml:Fish | Brid | Human){
if('swim' in aniaml){
return (aniamlas Fish).swim();
}
return (aniamlas Brid).fly();
}
// instanceof 方法 来检查一个值是不是另外一个值的实例
function log(x:Date | string){
if(xinstanceof Date){
}else{
}
}
log(new Date());
log('hey')
分配缩小 我个人理解的就是 利用三元表达式 进行类型判断
控制流分析 就是增加if条件判断 控制返回数据类型
// unions never 穷尽性检查
// 个人理解 这块就是一个 类似 switch case 的默认判断类型 可以设置成never
interface Circle {
kind:'circle',
slideLength:number
}
interface Square {
kind:'square',
slideLength:number
}
interface Triangle {
kind:'triangle',
slideLength:number
}
type Shape = Circle | Square | Triangle
function getArea(shape : Shape){
switch (shape.kind){
case "circle":
return 'xxx'
case "square":
return 'xxx'
case "triangle":
return 'xxx'
default:
const others :never =shape
return others
}
}
