TypeScript 各个类型

117 阅读3分钟
  • js 已有类型

    number、string、boolean、null、undefined、symbol

let num: number = 1 
let str: string = 'string' 
let bool: boolean = false
let nul: null = null
let under: undefined = undefined
let sym: symbol = Symbol()
  • ts 新增类型

    联合类型、自定义类型(类型别名)、接口、元祖、字面量类型、枚举、void、any等

数组类型

number[]Array<number>

let arr1: number[] = [1, 2, 3];
let arr2: Array<number> = [1, 2, 3];

let arr3: (string | number)[] = [1, 'string', 2]
let arr4: Array<string | number> = [1, 'string', 3]

函数类型

单独指定参数、返回值的类型

function addNum(a: number, b: number): number {
  return a + b
}

同时指定参数、返回值的类型

const addNum: (a:number) => number = (a) => {
  return a
}

当返回值为 void 时表示没有返回值,或者不写返回值

// 参数名后面加上 ? 表示该参数可选
function addNum(a: number, b?: number): void {
  if(b) {
    console.log(a)
  }
}

promise

interface promiseType {
  // 接口表示该值是为一个函数 并且返回值为一个 Promise 函数,其 resolve 传递的是 字符串数组
  fun: ()=> Promise<string[]>;
  num: number;
}
// resolve 里传的是字符串数组
function promiseFun(): Promise<string[]> {
  return new Promise( (resolve, reject) => {
    resolve([
      '1', '222', '333333'
    ])
  })
}
function testFun(props: promiseType) {
  const { fun, num } = props
  fun().then( res => {
    console.log(res)
  })
}

onMounted(() => {
  testFun({
    fun: promiseFun,
    num: 10
  })
})

泛型

可以支持不特定的数据类型。 要求: 传入的参数和返回的参数一致

function test<T>(value: T): T {
  return value
}
onMounted(()=> {
  test<number>(1) // function test<number>(value: number): number
  test<number>('str') //err
  test<string>('str') // function test<string>(value: string): string
})

泛型接口

interface ConfigFn{
    <T>(value:T):T;
}
let getData:ConfigFn = function<T>(value:T):T {
    return value;
}

onMounted(()=> {
  getData<number>(123); // let getData: ConfigFn <number>(value: number) => number
  getData<number>('123'); // err
})

// 另一种方式
interface ConfigFn<T>{
    (value:T):T;
}
function getData<T>(value:T):T{
    return value;
}
let myGetData:ConfigFn<string> = getData;
myGetData('123');
myGetData(123);

类作为参数类型的泛型类

  • 定义一个类
  • 把类作为参数来约束数据传入的类型
/* 
定义一个 User的类,这个类的作用就是映射数据库字段
然后定义一个 MysqlDb的类,这个类用于操作数据库
然后把User类作为参数传入到MysqlDb中

var user = new User({
    username: '张三',
    password: '123456'
});
var Db = new MysqlDb();
Db.add(user);
*/
class User {
  username: string | undefined;
  password: string | undefined;
}
class MysqlDb<T> {
  add(info: T): boolean {
    console.log(info);
    return true;
  }
}
var u = new User();
u.username = "李斯";
u.password = "1232123";

var Db = new MysqlDb<User>();
Db.add(u); // User {username: '李斯', password: '1232123'}

never

never 表示一个无法被观测的类型

never 类型便为空类型和底部类型。never 类型的变量无法被赋值,与其他类型求交集为自身,求并集不参与运算。

unknown

unknown 指的是不可预先定义的类型,在很多场景下,它可以替代any的功能同时保留静态检查的能力。

unknown 的作用就跟 any 高度类似了,你可以把它转化成任何类型,不同的地方是,在静态编译的时候,unknown 不能调用任何方法,而 any 可以。

const foo: unknown = 'string';
foo.substr(1);           // Error: 静态检查不通过报错
const bar: any = 10;
bar.substr(1); 

any

当值为 any 类型时,可以对该值进行任意操作,并且不会有代码提示

infer

参考链接

参考链接

Vue3 跟着尤雨溪学 TypeScript 之 Ref 类型从零实现

TypeScript有哪些实用的类型体操?