从零开始学习typescript系列6: typescript各种类型以及类型特殊使用

news2024/9/24 15:28:48

基础类型的分类

常用

  • boolean: 布尔值
  • number: 支持2/8/10/16进制
  • string: 字符串
  • enum: 枚举类型，可根据value找到key
  • array: 普通数组，有2种方式，string[]或者 Array<string>
  • tuple: 特殊数组，指定数组里的每个元素的类型，同时也确定了元素个数

其他

  • any: 不确定类型的变量
  • void: 没有任何返回值的函
  • undefined/null: 2种特殊类型
  • <>: 非常确定的类型

array和tuple的区别？

// array例子: 数组元素类型相同，都是string
let arr1: string[] = ['a','b'];
// tuple例子: 数组元素类型可以不同
let tp1: [number, string] = [1,'abc'];

boolean

// boolean
let isDone: boolean = true;
let disabled: boolean = false;
console.log(`isDone: ${isDone}`);   // isDone: true
console.log(`disabled: ${disabled}`); //disabled: false

number

// number 可以是 十进制,十六进制,八进制,二进制
let n1: number = 666;
let n2: number = 0x0a;
let n3: number = 0o17;
let n4: number = 0b11;
console.log(`n1: ${n1}`); // n1: 666
console.log(`n2: ${n2}`); // n2: 10
console.log(`n3: ${n3}`); // n3: 15
console.log(`n4: ${n4}`); // n4: 3

string

// string 支持模板字符串
let myname: string = 'john';
let myage: number = 18;
let greeting: string = `i am ${myname} and i am ${myage} years old!`
console.log(greeting); // i am john and i am 18 years old!

// 对比 string 和 String
// 1. 普通变量 小写string
export type Todo = {
    id: number,
    title: string,
    completed: boolean
}
// 2. Vue props变量 大写String
defineProps({
    msg:{
        type: String
    }
})

object

// object类型
let obj_1:object;
obj_1 = {name:'peter'};
console.log(`obj_1:`,obj_1); // obj_1: { name: 'peter' }

array

// 2种array定义方式
let arr1: string[] = ['a','b'];
let arr2: Array<number> = [1,2,3]; // 数组泛型
console.log(arr1); // [ 'a', 'b' ]
console.log(arr2); // [ 1, 2, 3 ]

类数组是什么？

  • 比如 arguments 是类数组，不能用普通数组类型，应该用interface类型
  • 比如 let args:IArguments = arguments
  • 其他常见的类数组interface有: IArguments, NodeList, HTMLCollection 等

arguments 的1种错误类型和2种正确类型图解如下

tuple

// tuple 元组
// 特殊的数组 定义了类型和数目的数组(指定每个元素的类型)
let tp1: [number, string] = [1,'abc'];
let tp2: [number, string, string] = [1,'abc', ''];
tp2[2] = 'x'; // ok 
tp2[3] = 'y'; // error y is not assignable to type => tuple定义后，不能再新增元素

enum

// 先定义枚举集合
enum Color {Red = 2, Green = 1, Blue};
// 使用1: 获取枚举常量值 
let c1: Color = Color.Red; // c1=2
let c2: Color = Color.Green;  // c2=1 
let c3: Color = Color.Blue; // c3=2 自动计算
// 使用2: 通过常量值反过来获取对应的key 
let cname1: string = Color[2]; // cname1='Blue'

any

// 任意值 不确定类型的变量 
let notSure: any;
notSure = 1; // OK 
notSure = 'abc'; // OK

// 变量声明未指定其类型 会被识别为任意值类型
let a;  // 等价于 let a:any;

void

// void: 表示没有任何类型
// 使用场景: 函数没有返回值的情况
function f1(): void{
    console.log('no return');
}
function f2(): string{
    return 'have return'
}
console.log(f1()); // void -> no return
console.log(f2()); // have return

undefined null

// undefined null
let empty1: undefined = undefined;
let empty2: null = null;

console.log(empty1); //  undefined
console.log(empty2); //  null

内置对象

  • ECMAScript 的内置对象 Boolean、Error、Date、RegExp
  • DOM 和 BOM 的内置对象 Document、HTMLElement、Event、NodeList
let body: HTMLElement = document.body;
let allDiv: NodeList = document.querySelectorAll('div');
document.addEventListener('click', function(e: MouseEvent){
    // do something
})

自动类型推论 type inference

// 1. 变量定义时有赋值: 根据[赋值]推测出[类型]
let  myName = 'Jim'; // 推断类型为string
myName = 7; //error: type number 

// 2. 定义时没有赋值: 被推断成 [any 类型]
let  myName; // 推断类型为any
myName = 'Jim'; //ok
myName = 7; //ok

联合类型 union types

// 什么是联合类型？ 变量可能为多种类型
let myLuckyNumber : string | number;
myLuckyNumber = 'two' // OK 
myLuckyNumber = 2 // OK 


// 联合类型自动推断
let myLuckyNumber : string | number;
myLuckyNumber = 'two' 
console.log(myLuckyNumber.length)  // OK 类型推断为string length ok 
myLuckyNumber = 2 // OK 
console.log(myLuckyNumber.length)  // 类型推断为string number no! 报错: Property 'length' does not exist on type 'number'. 


// 联合类型变量的方法调用
function getString1(luck: string | number):string{
    return luck.toString() // OK 因为 string number 都存在 toString 方法 
}
function getString2(luck: string | number):string{
    return luck.slice(1)// ERROR 因为 string  有slice方法，但是 number 没有 slice方法 
}

类型别名 type aliases

// 语法: 关键字是type
// 用途: 常用于联合类型
type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {
    if (typeof n === 'string') {
        return n;
    } else {
        return n();
    }
}

类型断言 type assertion

类型断言:

  • 表示程序员非常确认类型，可以实现类型自动转化
// 语法1. as关键字 ，如 str as string, counter as number 
let verysure: any = 'very sure type';
let len: number = (verysure as string).length; 
console.log(verysure); // very sure type
console.log(len); // 14

// 语法2. 尖括号，如`<string>str, <number>counter`
let verysure: any = 'very sure type';
let len: number = (<string>verysure).length; 
console.log(verysure); // very sure type
console.log(len); // 14

泛型 Generics

// without Generics
function genArray (n: Number, v: any): Array<any> {
    let result = [];
    for(let i=0; i<n; i++){
        result[i] = v;
    }
    return result; // 返回N个v数组 [v,v,...]
}

// with Generics
// 函数名后的T： 定义泛型 
// 参数和返回值后的T： 使用泛型
function genArray1<T> (n: Number, v: T): Array<T> {
    let result = [];
    for(let i=0; i<n; i++){
        result[i] = v;
    }
    return result;
}
console.log('泛型 Generics');
console.log(genArray(3, 'x')); // [ 'x', 'x', 'x' ]
console.log(genArray1<Number>(3, 100)); // 显示指定泛型类型 [ 100, 100, 100 ]
console.log(genArray1(3, true)); // 没有显示置顶 ts能类型推论 [ true, true, true ]

// with Generics multi
function gen2<T, U> (a: [T, U]): Object{
    return {
        x: a[0],
        y: a[1] 
    };
}
console.log(gen2(['abc', 123])); // { x: 'abc', y: 123 }

总结

  • 是什么: [预先不指定]具体类型，[使用时指定]类型
  • 定义: 函数名后定义泛型参数，
  • 使用: 函数入参和返回值使用泛型参数

声明合并 declaration merging

  • 是什么: 如果定义两个相同名字的函数、接口或类，那么它们会自动合并成一个类型
  • 合并类型: 函数合并、 接口合并、 类合并
// 1. 函数合并
function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: number | string): number | string | undefined {
    if (typeof x === 'number') {
        return Number(x.toString().split('').reverse().join(''));
    } else if (typeof x === 'string') {
        return x.split('').reverse().join('');
    }
}
// 个人理解 第3个reverse会覆盖前2个方法，调用时直接调用第3个reverse
console.log('reverse(123)=',reverse(123)) // reverse(123)= 321
console.log('reverse("abc")=',reverse("abc")) // reverse("abc")= cba

// [关于函数重载]
function overload(a){console.log('一个参数')}
function overload(a,b){console.log('两个参数')}
// 在支持重载的编程语言中，比如 java
overload(1);   	  //一个参数
overload(1,2);    //两个参数
// ❗ 在 JavaScript 中，不同的参数都调用第2个方法
overload(1);     //两个参数 
overload(1,2);    //两个参数


// 2. 接口合并 注意，合并的属性可以重复，但是重复属性的类型必须相同
interface Alarm {price: number;}
interface Alarm {weight: number;}
// 相当于  interface Alarm {price: number; weight: number;}
let fireAlarm1:Alarm = {price:1000} // error 
let fireAlarm2:Alarm = {weight:500} // error 
let fireAlarm3:Alarm = {price:1000,weight:500} // ok

// 3. 类的合并 类的合并与接口的合并规则一致。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1534181.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

[Halcon学习笔记]标定常用的Halcon标定板规格及说明

[Halcon学习笔记]标定常用的Halcon标定板规格及说明

1、介绍 大多数标定的要求都是以实心圆或方格来作为标志点&#xff0c;所以一般的标定板为棋盘格或矩阵圆点图&#xff0c;高精度的相机标定过程中&#xff0c;大多是以比较明确的特征点来作为参考&#xff0c;所以通过识别标定板的圆形&#xff0c;拟合出精确的中心位置&…
阅读更多...
数据分析-Pandas多维数据平行坐标可视化

数据分析-Pandas多维数据平行坐标可视化

数据分析-Pandas多维数据平行坐标可视化 数据分析和处理中&#xff0c;难免会遇到各种数据&#xff0c;那么数据呈现怎样的规律呢&#xff1f;不管金融数据&#xff0c;风控数据&#xff0c;营销数据等等&#xff0c;莫不如此。如何通过图示展示数据的规律&#xff1f; 数据表…
阅读更多...
Kafka Producer异步发送消息技巧大揭秘

Kafka Producer异步发送消息技巧大揭秘

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 Kafka Producer异步发送消息技巧大揭秘 前言异步发送概述方法实现2. producer.send(msg) 方法详解方法签名和参数说明异步发送示例代码及效果分析 3. producer.send(msg, callback) 方法解析支持事务的…
阅读更多...
Java的类与对象

Java的类与对象

前言 Java是一门纯面向对象的语言(Object Oriented Program&#xff0c;简称OOP)&#xff0c;在面向对象的世界里&#xff0c;一切皆为对象。面向对象是解决问题的一种思想&#xff0c;主要依靠对象之间的交互完成一件事情。用面向对象的思想来涉及程序&#xff0c;更符合人们…
阅读更多...
Java基础--集合

Java基础--集合

集合 1.可以动态的保存任意多个对象&#xff0c;使用比较方便。 2.提供了一系列方便的操作对象的方法&#xff1a;add&#xff0c;remove&#xff0c;set&#xff0c;get等。 3.使用集合添加&#xff0c;删除新元素的示意代码&#xff0c;简介明了。 集合主要是两种&#xff0…
阅读更多...
【Web】记录巅峰极客2023 BabyURL题目复现——Jackson原生链

【Web】记录巅峰极客2023 BabyURL题目复现——Jackson原生链

目录 前言 分析 EXP SignedObject打二次反序列化 打TemplatesImpl加载恶意字节码 前文&#xff1a;【Web】浅聊Jackson序列化getter的利用——POJONode 前言 题目环境:2023巅峰极客 BabyURL 之前AliyunCTF Bypassit I这题考查了这样一条链子&#xff1a; BadAttributeV…
阅读更多...
动态规划题目练习

动态规划题目练习

基础知识&#xff1a; 动态规划背包问题-CSDN博客 动态规划基础概念-CSDN博客 题目练习&#xff1a; 题目1&#xff1a;过河卒 题目描述 棋盘上 A 点有一个过河卒&#xff0c;需要走到目标 B 点。卒行走的规则&#xff1a;可以向下、或者向右。同时在棋盘上 C 点有一个对方的马…
阅读更多...
面试算法-68-将有序数组转换为二叉搜索树

面试算法-68-将有序数组转换为二叉搜索树

题目 给你一个整数数组 nums &#xff0c;其中元素已经按 升序 排列&#xff0c;请你将其转换为一棵 平衡 二叉搜索树。 示例 1&#xff1a; 输入&#xff1a;nums [-10,-3,0,5,9] 输出&#xff1a;[0,-3,9,-10,null,5] 解释&#xff1a;[0,-10,5,null,-3,null,9] 也将被视…
阅读更多...
力扣---子集---回溯（子集型回溯）---递归

力扣---子集---回溯（子集型回溯）---递归

递归法思路&#xff1a; 首先考虑为什么能用递归&#xff08;因为存在大问题和小问题之间的关系&#xff0c;大问题&#xff1a;从第 i 个数字到最后一个数字之间找子集&#xff0c;小问题&#xff1a;从第 i1 个数字到最后一个数字之间找子集&#xff09;。其次&#xff0c;用…
阅读更多...
新版 mac 浏览器乱码

新版 mac 浏览器乱码

现象 如下图&#xff0c;chrome 浏览器有的乱码了 解决方法 删除字体集中的微软雅黑&#xff08;下图已删除&#xff09;&#xff0c;右键移除
阅读更多...
aac可以直接改成mp3吗？快速转换的3个方法~

aac可以直接改成mp3吗？快速转换的3个方法~

AAC&#xff08;Advanced Audio Coding&#xff09;文件格式的诞生源于对音频压缩技术的不断追求。由Fraunhofer IIS、杜比实验室、AT&T、索尼等联合开发&#xff0c;旨在提供更高质量的音频压缩效果。AAC文件格式因其出色的音质和高效的压缩算法&#xff0c;成为数字音频领…
阅读更多...
NVIDIA NCCL 源码学习（十三）- IB SHARP

NVIDIA NCCL 源码学习（十三）- IB SHARP

背景 之前我们看到了基于ring和tree的两种allreduce算法&#xff0c;对于ring allreduce&#xff0c;一块数据在reduce scatter阶段需要经过所有的rank&#xff0c;allgather阶段又需要经过所有rank&#xff1b;对于tree allreduce&#xff0c;一块数据数据在reduce阶段要上行…
阅读更多...
Linux中路径正确但是就是查找不到某个文件

Linux中路径正确但是就是查找不到某个文件

显示文件不存在 Py4JJavaError&#xff1a;调用 o223.partitions 时出错。 &#xff1a; org.apache.hadoop.mapred.InvalidInputException&#xff1a; 输入路径不存在&#xff1a; 首先确定路径是否正确&#xff0c;文件是否存在 然后右键文件查看属性&#xff0c;确定文件…
阅读更多...
matlab simulink 电力系统同步发电机励磁系统的建模与仿真

matlab simulink 电力系统同步发电机励磁系统的建模与仿真

1、内容简介 略 77-可以交流、咨询、答疑 电力系统同步发电机励磁系统的建模与仿真 建立MATLAB的同步发电机励磁调节系统仿真模型&#xff0c;最后建立了以PID和PSS为励磁控制方式的同步发电机励磁调节系统数学模型&#xff0c;在Simulink环境下进行了仿真&#xff0c;收到…
阅读更多...
爬虫逆向sm3和sm4 加密 案例

爬虫逆向sm3和sm4 加密 案例

注意&#xff01;&#xff01;&#xff01;&#xff01;某XX网站逆向实例仅作为学习案例&#xff0c;禁止其他个人以及团体做谋利用途&#xff01;&#xff01;&#xff01; 案例--aHR0cDovLzExMS41Ni4xNDIuMTM6MTgwODgvc3Vic2lkeU9wZW4 第一步&#xff1a;分析页面和请求方式 …
阅读更多...
C++利用开散列哈希表封装unordered_set,unordered_map

C++利用开散列哈希表封装unordered_set,unordered_map

C利用开散列哈希表封装unordered_set,unordered_map 一.前言1.开散列的哈希表完整代码 二.模板参数1.HashNode的改造2.封装unordered_set和unordered_map的第一步1.unordered_set2.unordered_map 3.HashTable 三.string的哈希函数的模板特化四.迭代器类1.operator运算符重载1.动…
阅读更多...
Vue2（七）：脚手架、render函数、ref属性、props配置项、mixin(混入)、插件、scoped样式

Vue2（七）：脚手架、render函数、ref属性、props配置项、mixin(混入)、插件、scoped样式

一、脚手架结构&#xff08;Vue CLI&#xff09; ├── node_modules ├── public │ ├── favicon.ico: 页签图标 │ └── index.html: 主页面 ├── src │ ├── assets: 存放静态资源 │ │ └── logo.png │ │── component: 存放组件 │ │ …
阅读更多...
未来已来？国内10家AI大模型盘点（附体验网址）

未来已来？国内10家AI大模型盘点（附体验网址）

名人说&#xff1a;莫道桑榆晚&#xff0c;为霞尚满天。——刘禹锡&#xff08;刘梦得&#xff0c;诗豪&#xff09; 创作者&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 目录 1、阿里云——通义千问2、科大讯飞——星火大模…
阅读更多...
Cookie使用

Cookie使用

文章目录 一、Cookie基本使用1、发送Cookie2、获取Cookie 二、Cookie原理三、Cookie使用细节 一、Cookie基本使用 1、发送Cookie package com.itheima.web.cookie;import javax.servlet.*; import javax.servlet.http.*; import javax.servlet.annotation.*; import java.io.I…
阅读更多...
嵌入式开发--获取STM32产品系列的信息

嵌入式开发--获取STM32产品系列的信息

嵌入式开发–获取STM32产品系列和容量信息 获取STM32产品系列 有时候我们需要知道当前MCU是STM32的哪一个系列&#xff0c;这当然可以从外部丝印看出来&#xff0c;但是运行在内部的软件如何知道呢&#xff1f; ST为我们提供了一个接口&#xff0c;对于STM32的所有MCU&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023