asp网站调试,网站策划书的撰写流程?,具有品牌的微网站建设,济南房地产网站建设书接上上文#xff1a;关于vue3的知识点 和 上文 #xff1a;TypeScript的安装与报错 我们来接着看TypeScript 的基础语法
TypeScript 语法
1. 类型注解
类型注解是 变量后面约定类型的语法#xff0c;用来约定类型#xff0c;明确提示
// 约定变量 age 的类型为 numbe…书接上上文关于vue3的知识点 和 上文 TypeScript的安装与报错 我们来接着看TypeScript 的基础语法
TypeScript 语法
1. 类型注解
类型注解是 变量后面约定类型的语法用来约定类型明确提示
// 约定变量 age 的类型为 number 类型
let age: number 18;
age 19;TS数据类型
TS 常用类型
JS 已有类型 简单类型number string boolean null undefined复杂类型对象 数组 函数 TS 新增类型 联合类型、自定义类型(类型别名)、接口、元组、字面量类型、枚举、void、any、泛型 等
简单类型
完全按照 JS 的类型来书写即可
let age: number 18;
let myName: string 王小明;
let isEating: boolean false;
let nullValue: null null;
let undefinedValue: undefined undefined;复杂类型
数组类型
// 写法一推荐
let numbers: number[] [1, 3, 5];
// 写法二
let strings: Arraystring [a, b, c];对象类型
let obj : {name:string,age:number} {name:jack,age:18}let person: {name: string;sayHi(): void;
} {name: jack,sayHi() {},
};
额外内容
对象中的函数是箭头函数时
let person: {name: stringsayHi: () void
} {name: jack,sayHi() {},
};
对象中的属性是可选时,关键字是 ? 例如axios中的get请求method就是可以省略
// axios({url,method}) 如果是 get 请求 method 可以省略
const axios (config: { url: string; method?: string }) {};
函数类型
// 普通函数
function add1(a: number, b: number): number {return 1
}
// 函数表达式
const arr5 function (a: number, b: number): number {return a b
}const add (a: number, b: number): number {return 1
}
// 箭头函数
const add2: () string () {return 1
}
const add3: (a: number, b: number) number (a, b) {return 1
}TS新增类型
1.联合类型
类型与类型之间使用 | 连接代表类型可以是它们当中的其中一种这种类型叫联合类型
当数组中既有 number 又有 string 类型时例如 arr[‘1’,a] 这种就要用到| 来连接了写法是
let arr:( number | string)[][1,a]再举个例子
let arr[{id: 1,name: jack,hobby: [唱歌],family: {mather: jack妈妈}},{id: 2,name: rose,hobby: [跳舞],family: {mather: rose妈妈}}
]2.自定义类型类型别名type
类型别名:
type 类型别名 具体类型 基本语法定义类型别名遵循大驼峰命名规范类似于变量使用类型别名与类型注解的写法一样即可当同一类型复杂被多次使用时可以通过类型别名简化 该类型的使用
let arr: ( number | string )[] [ 1, a, 4]// 使用类型别名写法: type 类型别名 具体类型
type CustomArr (number | string)[];
let arr: CustomArr [1, a, 4];
let arr2: CustomArr [2, b, 8];
2.1 type的交叉类型
使用 可以合并连接的对象类型也叫交叉类型
// 使用 type 来定义 Point2D 和 Point3D
type Point2D {x: number;y: number;
};// 使用 交叉类型 来实现接口继承的功能
// 使用 交叉类型 后Point3D { x: number; y: number; z: number }
type Point3D Point2D {z: number;
};let o: Point3D {x: 1,y: 2,z: 3,
};
3. 接口 interface
interface 后面是接口名称和类型别名的意思一样。指定 接口名称 作为变量的类型使用。接口的每一行只能有 一个 属性或方法每一行不需要加分号。使用 extends 实现接口继承达到类型复用。
// 通过interface定义对象类型
interface Person {name: string;age: number;sayHi: () void;
}
// 使用类型
let person: Person {name: jack,age: 19,sayHi() {},
};
3.1 接口的extends 继承
接口继承的语法interface 接口A extends 接口B {}继承后 接口A 拥有 接口B 的所有属性和函数的类型声明
interface Point2D {x: number;y: number;
}
// 继承 Point2D
interface Point3D extends Point2D {z: number;
}
// 继承后 Point3D 的结构{ x: number; y: number; z: number }
3.2 type和interface 的相同点与区别
关键的区别在于不能重新打开类型以添加新属性而接口总是可扩展的。
interfacetype支持对象类型支持对象类型其他类型复用可以继承复用交叉类型
它们都可以定义对象类型它们都可以复用interface 使用 extends , type 使用 type 不能重复定义interface 可以重复定义但是会合并
详解不同的点
type 不可重复定义
type Person {name: string;
};
// 标识符“Person”重复 Error
type Person {age: number;
};interface 重复定义会合并
interface Person {name: string;
}
interface Person {age: number;
}
// 类型会合并注意属性类型和方法类型不能重复定义
const p: Person {name: jack,age: 18,
};4. 类型推断 在 TS 中存在类型推断机制在没有指定类型的情况下TS 也会给变量提供类型。 // 函数返回值的类型被自动推断为number
const add (num1: number, num2: number) {return num1 num2;
};
将来在开发项目的时候能省略类型注解的地方就省略充分利用TS推断 的能力提高开发效率。如果你不知道类型怎么写可以把鼠标放至变量上可以通过 Vscode 提示看到类型
5. 字面量类型 使用 js字面量 作为变量类型这种类型就是字面量类型使用字面量类型更加精确、严谨 let str1 Hello TS;
const str2 Hello TS;
// str1的字面量是string str2的字面量是Hello TS
// 因为const声明的变量不能再改变而str2 是 const 声明的值只能是 Hello TS所以类型只能是 Hello TS再例如性别只有男和女
type Gender 男 | 女
let gender: Gender 男
gender 女字面量类型配合联合类型来使用表示一组明确的可选的值
// 使用自定义类型:
type Direction up | down | left | rightfunction changeDirection(direction: Direction) {console.log(direction)
}// 调用函数时会有类型提示
changeDirection(up)
6. any any 类型的作用是逃避 TS 的类型检查 显式any情况当变量的类型指定为 any 的时候不会有任何错误也不会有代码提示TS会忽略类型检查
let obj: any { age: 18 }
obj.bar 100
const n: number obj
console.log(n,n);隐式any的情况声明变量不给类型或初始值函数参数不给类型或初始值
// 声明变量不给类型或初始值
let a;
// 函数参数不给类型或初始值
const fn (n) {}
7. 类型断言 -as
一种将变量或表达式的类型强制转换为开发者指定的类型的方式 使用 as 关键字实现类型断言也可以使用尖括号语法进行类型断言不推荐关键字 as 后面的类型是一个更加具体的类型使用场景 消除类型检查错误、处理联合类型、处理any类型 这里我们将一个any类型的变量str断言为string类型并使用它的length属性获取字符串的长度。
// 1. 使用尖括号语法的类型断言
let str: any hello;
let len1: number (stringstr).length;
// 2.使用as语法的类型断言
let str: any hello;
let len2: number (str as string).length;
8.泛型 在TypeScript中泛型是一种创建可复用代码组件的工具。这种组件不只能被一种类型使用而是能被多种类型复用。类似于参数的作用泛型是一种用以增强类型types、接口interfaces、函数类型等能力的非常可靠的手段。 8.1 泛型别名
// 对后台返回的数据进行类型定义
type User {name: string;age: number;
}type Goods {id: number;goodsName: string;
}type DataT {msg: string;code: number;data: T
}// 使用类型
type UserData DataUser
let userData: UserData {msg: success,code: 200,data: {name: jack,age: 18}
}
console.log(userData.data.name);type GoodsData DataGoods
let goodsData: GoodsData {msg:success,code: 200,data: {id: 1,goodsName: iphone}
}
console.log(goodsData.data.goodsName);泛型定义类型别名后加上类型参数 就是泛型语法 使用的时候传入具体的类型即可T 是一个变量可以随意命名建议遵循大驼峰即可。和类型别名配合在类型别名后加上泛型语法然后类型别名内就可以使用这个类型参数泛型可以提高类型的复用性和灵活性
8.2 泛型接口
在接口名称的后面添加 类型变量那么这个接口就变成了泛型接口接口中所有成员都可以使用类型变量。
// 对象获取单个ID函数获取所有ID函数ID的类型肯定是一致的但是可能是数字可能是字符串
interface IdFnT {id: () T;ids: () T[];
}const idObj: IdFnnumber {id() { return 1 },ids() { return [1, 2] },
};
8.3 泛型函数
export { }
// 泛型---函数
type F1 {id: number
}// 普通函数
function fn1T(a: T, b): T {return a b
}
fn1number(1, 2)// extends
function fn2T extends F1(a: T): T {return a
}
fn2({ id: 1 })
9.枚举型-enum
enum Day {sunday,monday,tuesday,wednesday,thursday,friday,saturday
}
function day(Day: Day) {console.log(Day);}
day(Day.saturday)// 可以给初始值,不给就是从0开始
enum num {one 1,two, //2three, //3four //4
}
