ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

TypeScript之简单类型&复杂类型

2021-08-23 22:31:52  阅读:167  来源: 互联网

标签:TypeScript return string 复杂 number length let 类型


简单类型

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,
    width: number,
    height?: number, // ? => 可以省略
}

let phone: device = {
    id: 1,
    type: 'xiaomi',
    width: 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,return,string,复杂,number,length,let,类型
来源: https://www.cnblogs.com/zpsakura/p/15178014.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有