ts类型
2022-04-01 本文已影响0人
MenChem
1、基础类型
- 常用:string, number, boolean, array, enum, any, void
- 不常用: tuple、null、undefined、never
2、对象类型
interface和type (type更强大,interface可以进行类型声明)
3、数组类型
interface item {
name:string;
age: number;
sex?:string;
}
const strArr:string[] = ['测试', '数据', '字符串'];
const numArr:number[] = [1,2,3];
const itArr:item[] = [{name: "tom", age: 18}, {name: "rose", age: 20}];
4、元组类型
// 数组 某个位置的值可以是注解中的任何一个
const LOL: (string | number)[] = ["zed", 25, "darts"];
// 元祖 每一项数据类型必须一致
const LOL: [string, string, number] = ["zed", "darts", 25];
5、联合| or 交叉&类型
- 联合类型:某个变量可能是多个 interface 中的其中一个,用 | 分割
- 交叉类型:由多个类型组成,用 & 连接
interface Waiter {
eat: boolean;
say: () => {};
}
interface Teacher {
eat: boolean;
sayHello: () => {};
}
// 联合类型
function lianHe(animal: Waiter | Teacher) {}
// 交叉类型
// 同名类型会进行合并,同名基础类型属性的合并返回:never
// 同名非基础类型属性可以正常合并
function lianHe(jishi: Waiter & Teacher) {}
6、enum枚举
enum typeEnum {
GSBB= "公司本部",
GSWB = "外部",
GSYX = "营销部"
}
7、 泛型
-
简单说就是:泛指的类型,不确定的类型,可以理解为一个占位符(使用T只是习惯,使用任何字母都行)
-
K(Key):表示对象中的键类型;
-
V(Value):表示对象中的值类型;
-
E(Element):表示元素类型。
// T 自定义名称
function myFun<T>(params: T[]) {
return params;
}
myFun <string> (["123", "456"]);
// 定义多个泛型
function join<T, P>(first: T, second: P) {
return `${first}${second}`;
}
join <number, string> (1, "2");
8、断言
- 断言用来手动指定一个值的类型。值 as 类型 or <类型>值( <类型>值这种写法在jsx语法中会冲突)
class Person{
sayHello(){
console.log("hello")
}
}
class Child extends Person{
sayWorld(){
console.log("世界")
}
}
// child.sayHello
let c = new Child();
c.sayHello();//父类
c.sayWorld();
function fn(p: Person){
p.sayHello();
(p as Child).sayWorld()
}
fn(c);