基本类型

一.最最基础的类型

  • 布尔、数字、字符串类型
let bool:boolean = true;
let num:number = 10;
let str:string = 'hello world';

二.元组类型

  • 限制长度个数、类型一一对应,ts中自己实现的,内容固定,类型固定
let tuple:[string,number,boolean] = ['zf',10,true];
// 像元组中增加数据,只能增加元组中存放的类型,就是说你只能Push进去你定义过的类型,也不可以通过索引去赋值(不可以tuple[2]=false这样写)
tuple.push('回龙观');

三.数组类型

  • 声明数组中元素数据类型,两种声明方式,可参考arr3和arr4的写法
let arr1:number[] = [1,2,3];
let arr2:string[] = ['1','2','3'];
let arr3:(number|string)[] = [1,'2',3]; // 这个叫做联合类型,要记得加括号哦~
let arr4:Array<number | string> = [1,'2',3]; // 泛型方式来声明
let arr5:any[] = ['', 1, {}] // 如果是无规律的,没得办法咯~

四.枚举类型

  • ts最终会被编译成JS,是没有类型的,枚举只是在开发时候使用

  • 写好以后,经过编译,会变成一个对象

  • 枚举可以支持反举,但是限于索引,会根据上一个的值进行自动推断

  • 大写是规范

  • 使用赋值声明(const)的话,不会生成一个对象更简洁

enum USER_ROLE {
USER, // 默认从0开始
ADMIN,
MANAGER
}
// {0: "USER", 1: "ADMIN", 2: "MANAGER", USER: 0, ADMIN: 1, MANAGER: 2}
  • 可以枚举,也可以反举
// 编译后的结果
(function (USER_ROLE) {
USER_ROLE[USER_ROLE["USER"] = 0] = "USER";
USER_ROLE[USER_ROLE["ADMIN"] = 1] = "ADMIN";
USER_ROLE[USER_ROLE["MANAGER"] = 2] = "MANAGER";
})(USER_ROLE || (USER_ROLE = {}));



  • 异构枚举
enum USER_ROLE {
USER = 'user',
ADMIN = 1,
MANAGER,
}
  • 常量枚举
const enum USER_ROLE {
USER,
ADMIN,
MANAGER,
}
console.log(USER_ROLE.USER)// console.log(0 /* USER */);

五.any类型

  • 不进行类型检测
let arr:any = ['jiagou',true,{name:'zf'}]

六.null 和 undefined

  • 任何类型的子类型,如果strictNullChecks的值为true,但是tsconfig严格模式下,则不能把null 和 undefined赋值给其他类型,
let name:number | boolean;
name = null;

七.void类型

  • 只能接受null,undefined。一般用于函数的返回值
let a:void;
a = undefined;
  • 严格模式下不能将null赋予给void

八.never类型

  • 任何类型的子类型,never代表不会出现的值。不能把其他类型赋值给never
  • 出错,死循环,永远走不到的判断就是never类型
  • 它也是其他类型的子类型,但是一般很少用
function error(message: string): never {
throw new Error("err");
}
function loop(): never {
while (true) { }
}
function fn(x:number | string){
if(typeof x == 'number'){ }else if(typeof x === 'string'){ }else{
console.log(x); // never
}
}

九.Symbol类型

  • Symbol表示独一无二
const s1 = Symbol('key');
const s2 = Symbol('key');
console.log(s1 == s2); // false

十.BigInt类型

const num1 = Number.MAX_SAFE_INTEGER + 1;
const num2 = Number.MAX_SAFE_INTEGER + 2;
console.log(num1 == num2)// true,因为它们已经超过了最大值了,所以我们用下面的写法 let max: bigint = BigInt(Number.MAX_SAFE_INTEGER)
console.log(max + BigInt(1) === max + BigInt(2))
  • number类型和bigInt类型是不兼容的

十一.object对象类型

  • object表示非原始类型
let create = (obj:object):void=>{}
create({});
create([]);
create(function(){})

联合类型

一.类型推导

  • 声明变量没有赋予值时默认变量是any类型
let name; // 类型为any
name = 'zhufeng'
name = 10;
  • 声明变量赋值时则以赋值类型为准
let name = 'zhufeng'; // name被推导为字符串类型
name = 10;

二.包装对象

  • 我们在使用基本数据类型时,调用基本数据类型上的方法,默认会将原始数据类型包装成对象类型
let bool1:boolean = true;
let bool2:boolean = Boolean(1);
let bool3:Boolean = new Boolean(2);
  • boolean是基本数据类型 , Boolean是他的封装类

三.联合类型

  • 在使用联合类型时,没有赋值只能访问联合类型中共有的方法和属性
  • 使用场景:在取值的时候会遇到联合类型
  • !表示此值非空(ele!.innerHtml = ''),可做非空断言,就是你认为这个一定有,有问题了你来担责任
  • 强转类型在下图
  • 最常用的:ele?.style?.color 等同于 ele && ele.style && ele.style.color
  • false ?? true // 表示排除null 和 undefined
let name:string | number // 联合类型
console.log(name!.toString()); // 公共方法
name = 10;
console.log(name!.toFixed(2)); // number方法
name = 'aaaaa';
console.log(name!.toLowerCase()); // 字符串方法





let ele: HTMLElement | null = document.getElementById('#app');
ele!.style.color = 'red'; // 断定ele元素一定有值

四.类型断言

  • 类型断言
let name: string | number;
(name! as number).toFixed(2); // 强制
((<number>name!).toFixed(2));
  • 尽量使用第一种类型断言因为在react中第二种方式会被认为是jsx语法

  • 双重断言

let name: string | boolean;
((name! as any) as string);
  • 尽量不要使用双重断言,会破坏原有类型关系,断言为any是因为any类型可以被赋值给其他类型

五.字面量类型

type Direction = 'Up' | 'Down' | 'Left' | 'Right';
let direction:Direction = 'Down';
  • 可以用字面量当做类型,同时也表明只能采用这几个值(限定值)。类似枚举。

函数类型

一.函数的两种声明方式

  • 通过function关键字来进行声明
function sum(a: string, b: string):string {
return a+b;
}
sum('a','b')
  • 可以用来限制函数的参数和返回值类型

  • 通过表达式方式声明

type Sum = (a1: string, b1: string) => string;
let sum: Sum = (a: string, b: string) => {
return a + b;
};

二.可选参数

let sum = (a: string, b?: string):string => {
return a + b;
};
sum('a'); // 可选参数必须在其他参数的最后面

三.默认参数

let sum = (a: string, b: string = 'b'): string => {
return a + b;
};
sum('a'); // 默认参数必须在其他参数的最后面

四.剩余参数

const sum = (...args: string[]): string => {
return args.reduce((memo, current) => memo += current, '')
}
sum('a', 'b', 'c', 'd')

五.函数的重载

function toArray(value: number): number[]
function toArray(value: string): string[]
function toArray(value: number | string) {
if (typeof value == 'string') {
return value.split('');
} else {
return value.toString().split('').map(item => Number(item));
}
}
toArray(123); // 根据传入不同类型的数据 返回不同的结果
toArray('123');

深入Typescript--02-Typescript数据类型的更多相关文章

  1. TypeScript之基本数据类型

    前言 最近项目很急,所以没有什么时间回答关于Xamarin.Android方面的问题,也有一段时间没有更新.主要是手头很缺人,如果有谁有兴趣加入我们的话,可以私聊我,这样我就能继续造福社区了,同时还有 ...

  2. typeScript中的数据类型

    /* typeScript中的数据类型 typescript中为了使编写的代码更规范,更有利于维护,增加了类型校验,在typescript中主要给我们提供了以下数据类型 布尔类型(boolean) 数 ...

  3. Learining TypeScript (一) TypeScript 简介

    Learining TypeScript (一) TypeScript 简介 一.TypeScript出现的背景    2 二.TypeScript的架构    2 1.    设计目标    2 2 ...

  4. TypeScript:TypeScript 百科

    ylbtech-TypeScript:TypeScript 百科 TypeScript是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类 ...

  5. TypeScript——02——TS基本数据类型介绍和使用

    一,TS的数据类型 ES6的数据类型: 6种基本数据类型 Boolean Number String Symbol undefined null 3种引用类型 Array Function Objec ...

  6. typescript 02 数据类型

    ---恢复内容开始--- 1.数据类型 ts为了使代码更加规范并利于维护,增加了类型校验 提供了以下几种类型 布尔类型 boolean 数字类型 number 字符串类型 string 数组类型 ar ...

  7. TypeScript入门-基本数据类型

    ▓▓▓▓▓▓ 大致介绍 TypeScript是由C#语言之父Anders Hejlsberg主导开发的一门编程语言,TypeScript本质上是向JavaScript语言添加了可选的静态类型和基于类的 ...

  8. TypeScript学习笔记—数据类型

    TypeScript 数据类型 Boolean 类型 let isDone: boolean = false; // tsc => var isDone = false; Number 类型 l ...

  9. Typescript基础(1)——数据类型

    前言 这是开始学习Typescript的一些笔记,涉及的都是很基础的知识点.大神们请绕路或者欢迎指点.今天开始第一部分数据类型的学习. 数据类型 Typescript中为了使代码编写更加规范,更加易于 ...

  10. [TypeScript] Installing TypeScript and Running the TypeScript Compiler (tsc)

    This lesson shows you how to install TypeScript and run the TypeScript compiler against a .ts file f ...

随机推荐

  1. 大文件分片上传,后端拼接保存(前端:antd;后端:.Net 5 WebAPI)

    前言 对于普通业务场景而言,直接用 FormData() 将文件以入参的一个参数传给后端即可,但此方法有一个弊端就是,有个 30M 的上限. 对于动辄几百 M.几个 G 的文件上传需求,FormDat ...

  2. Sublime Text - Linux Package Manager Repositories

    Linux Package Manager Repositories http://www.sublimetext.com/docs/linux_repositories.html Sublime T ...

  3. JS 学习笔记 (六) 函数式编程

    1.函数闭包 1.1 概述 JavaScript采用词法作用域,函数的执行依赖于变量作用域,这个作用域是在函数定义时决定的,而不是函数调用时决定的. 为了实现这种词法作用域,JavaScript函数对 ...

  4. v-for中key的作用与原理

    一.虚拟DOM中key的作用 key是虚拟DOM对象的标识,当数据发生变化时,Vue会根据新数据生成新的虚拟DOM,随后Vue会对新虚拟DOM与旧虚拟DOM的差异进行比较. 二.如何选择key 最好使 ...

  5. Django系列---开发三 前后端分离

    数据交互接口规范REST,全称 Representational State Transfer,意为"表现层状态转化". django的第三方拓展--django-rest-fra ...

  6. jmeter执行报错:java.lang.UnsupportedClassVersionError解决办法

    做个记录. 问题记录: jmeter版本:5.4.1 本地Java版本:1.8.0_151 执行jmeter,报错: 2022-10-14 12:06:27,372 ERROR o.a.j.JMete ...

  7. Go语言核心36讲52

    你好,我是郝林. 专栏到这里,就要结束了. 差不多在半年以前(2018年的第二个季度),极客时间的总编辑郭蕾找到我,说想让我写一个关于Go语言的技术专栏. 我那时候还在轻松筹担任大数据负责人,管理着四 ...

  8. Oracle12c异常关闭后启动PDBORCL(ORA-01033)

    这个问题已经困扰了我好几天找解决方案,终于找到: 由于Oracle12c的特殊性,但许多用户并不想在创建用户时前面要加"C##" 那么就要创建PDBORCL数据库,来与Oracle ...

  9. 同一服务器部署多tomcat以及MyEclipse添加多tomcat

    tomcat有很多版本但他们的部署方式并不因为版本的不同而改变其的部署方式,操作者不必考虑此等原因.本人办公电脑使用的是tomcat7,家里自用的是6版本,这里就以6版本为例实现同一台机器上部署多to ...

  10. 24V转5V降压芯片,24V转3.3V的稳压芯片,中文规格书

    一般说明PW2312 是一个高频,同步,整流,降压,开关模式转换器内部功率 MOSFET.它提供了一个非常紧凑的解决方案,以实现 1.5A 的峰值输出电流在广泛的输入电源范围内,具有优良的负载和线路调 ...