• 周一. 6月 24th, 2024

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签

TypeScript之简单类型&复杂类型

admin

11月 28, 2021

简单类型

let my_name: string = '333';

void => 返回空值

function getName(str: string): void {
    // 使用void 即 没有返回值
}
getName('222')

any => 任意类型,这里当类型不确定的时候,就可以使用 any 任意类型,不到万不得已不使用

let abc: any
abc = {}

字面量 => 定义什么,就只能赋值什么

let animal: 'dog' | 'cat';
animal = 'dog';
animal = 'cat';

复杂类型

数组 array => 声明单一指定类型的数组
let arr: number[] = [1, 2, 3]

元组 tuple => 声明多个类型的数组,但长度要一致
let tuple: [number, string] = [2, '4']

接口 interface => 它能很方便的帮我们定义 Object 类型,它是非常的灵活可以描述对象的各种类型

interface device {
    readonly id: 1, // readonly => 不可更改的
    type: string,
     number,
    height?: number, // ? => 可以省略
}

let phone: device = {
    id: 1,
    type: 'xiaomi',
     40,
}

函数 funtion => 我们要规定函数的 输入类型 和 返回类型; 在形参后面接冒号声明 形参的类型,在 ()后面冒号声明 返回值类型

function sum(num1: number, num2: number, num3?: number): number {
    return num1 + num2;
}
sum(2, 3) // 传入多余的参数,或非指定类型的参数均会报错
sum(2, 3, 4)

const sum2 = (num1: number, num2: number): number => {
    return num1 + num2;
}

const sum3 = (num1: any, num2: any) => {
    return num1 + num2;
}
interface sum {
    (num1: number, num2: number): number
}

let mySum: sum = sum3

联合类型 union types => 可以指定哪几种类型

let union: number | string;
union = '3';
union = 'aaa';

对象 object => let a: object; 是不是没有什么意义,因为 js 中对象太多了

let object: { name: string, age: number }
object = {
    name: 'zhangsan',
    age: 18
} // 属性必须在类型 { name: string; age: number; } 中

断言 type inference => 我们声明了这个类型为 number | string 它不能调用 length 方法,因为不知道到底是number类型还是string类型

  • 写法一:as => 通过 as 来指定某种具体的类型
function getLength1(params: number | string): number {
    const str = params as string;
    if (str.length) {
        return str.length
    }
    return str.toString().length
}
getLength1('345');
  • 写法二:<类型>
function getLength2(params: number | string): number {
    const str = <string>params;
    if (str.length) {
        return str.length
    }
    return str.toString().length
}

类型守卫 type guard => 遇到联合类型的时候,使用 类型守卫可以 缩小范围
类型守卫 除了 typeof 之外 ,还有 instanceof、 in

function getLength3(params: number | string): number {
    if (typeof params === 'string') {
        return params.length
    }
    return params.toString().length
}

《TypeScript之简单类型&复杂类型》有2个想法
  1. Wow, superb blog structure! How lengthy have you
    ever been blogging for? you made blogging glance easy.

    The full look of your website is fantastic, as
    neatly as the content material! You can see similar here sklep online

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注