针对 JavaScript 上面的问题,聪明的同学就想那我们就给 JavaScript 加个类型吧,和 Java 一样,能够对变量的类型进行定义,这个想法就是 TypeScript 的类型系统, 在很大程度上弥补了 从 TypeScript 的名字就可以看出来,「类型」是其最核心的特性,TypeScript 也主要致力于解决 JavaScript 的类型混乱问题。 TypeScript 是静态类型 类型系统按照「类型检查的时机」来分类,可以分为下面 2 种 动态类型 静态类型 动态类型是指在运行时才会进行类型检查,这种语言的类型错误往往会导致运行时错误。 TypeScript 在运行前需要先编译为 JavaScript,而在编译阶段就会进行类型检查,所以 TypeScript 是静态类型,这段 TypeScript 代码在编译阶段就会报错了: let foo 大部分 JavaScript 代码都只需要经过少量的修改(或者完全不用修改)就变成 TypeScript 代码,这得益于 TypeScript 强大的[类型推论][],即使不去手动声明变量 foo 的类型
系列安排: 上帝视角看 TypeScript[1](已发布) TypeScript 类型系统(就是本文) types 和 @types 是什么? 你不知道的 TypeScript 泛型(万字长文,建议收藏)[2](已发布) TypeScript 配置文件该怎么写? TypeScript 是如何与 React,Vue,Webpack 集成的? 总之,我们使用 Typescript 的主要目的仍然是要它的静态类型检查,帮助我们提供代码的扩展性和可维护性。因此 Typescript 需要维护一套完整的类型系统。 「类型系统包括 1. 类型 和 2.对类型的使用和操作」,我们先来看类型。 类型 TypeScript 支持 JavaScript 中所有的类型,并且还支持一些 JavaScript 中没有的类型(毕竟是超集嘛)。 总结 本文主要讲了 Typescript 的类型系统。Typescript 和 JavaScript 的类型是很不一样的。
一.JavaScript类型 JavaScript有7种类型:Boolean、Number、String、Undefined、Null、Object,以及ES6新增的Symbol 这7种TypeScript 类型 TypeScript共有13种基本类型,除了JavaScript所有的7种之外,还有: Array:数组,表示一组类型相同的元素 Tuple:元组,表示一组固定数量的元素(不要求元素类型相同),如二元组 ,比如无返回值函数的返回值类型 Never:绝不存在的值的类型,如永远不会返回的函数(必定抛异常的,或函数体有死循环的)的返回值类型 示例如下: // TypeScript新增的6种类型 let list // 空类型 function neverReturn(): never {throw 'error';} // 绝不存在的类型 需要注意几点: Array类型有2种声明格式(elemType []和 ,见Improve type safety of name global variable 三.类型断言 可以通过类型断言告知TypeScript编译器某个值的确切类型: Type assertions
TypeScript 是 JavaScript 的一个超集,添加了类型系统和编译期错误检查等功能 => 静态类型检查。 类型指的是一组具有相同特征的值。 静态类型系统描述了运行程序时的值的形状和行为。 TypeScript 支持块级类型声明,即类型可以声明在代码块(用大括号表示)里面,只在当前代码块有效。 动态类型 pk 静态类型 JavaScript 动态类型语言,没有使用限制。 let test = 'ligang' test = 33 TypeScript 静态类型语言,引入了类型系统。 未来兼容性 随着 ECMAScript 的更新而更新 需要更新 TypeScript 以支持新特性 TypeScript 本身不执行任何代码,只是添加了一个类型系统,用于在编译时提供类型安全和错误检查 : string; } 如果一个变量有多种类型,读取该变量时,往往需要进行==“类型缩小”==2,区分该值到底属于哪一种类型,然后再进一步处理。
[] Null、Undefined和Never是其它类型的子类型,因此可以赋值给任何其它类型变量 (摘自基本类型_TypeScript笔记2) 也就是说,要确定数组类型的话,先要确定每个元素的类型,再考虑其兼容关系 语句 二.子类型兼容性 TypeScript的13种基本类型中,类型层级关系如下: ? ),反过来的话是安全的,因为返回值类型相同,参数绰绰有余,msg的类型也兼容(string是any的子类型) 具体的,TypeScript类型系统对函数类型的兼容性判定规则如下: 参数:要求对应参数的类型兼容 ,因此为了保持类型系统简单,有的语言也认为类型构造器不变,虽然这样可能会违反类型安全 特殊地,TypeScript里的函数类型是双变的,例如: interface Comparer<T> { compare 所以TypeScript并没有强制约束函数类型逆变,而是允许双变。
theme: nico 现代JavaScript高级小册 深入浅出Dart 现代TypeScript高级小册 类型系统层级 TypeScript 的类型系统是强类型和静态类型的,这为开发者提供了强大的类型检查和类型安全保障 为了更好地理解 TypeScript 的类型系统,本文将全面介绍其类型系统层级,包括顶层类型(Top Type)和底层类型(Bottom Type),以及在这个层次结构中如何处理和操作各种类型。 理解 TypeScript 的类型系统层级有助于我们更好地使用和掌握 TypeScript,写出更健壮、可维护的代码。 1. 2. 底层类型(Bottom Type) 与顶层类型相对,底层类型是所有类型的子类型。这意味着,在类型系统的层次结构中,任何类型都可以被看作是底层类型的超类型。 理解 TypeScript 的类型系统层级有助于我们编写更健壮、可维护的 TypeScript 代码。尽管 any 类型提供了很大的灵活性,但是它的滥用可能会削弱 TypeScript 的类型安全性。
2. 数据类型 ? ? Ts在es 6基础上加了不少类型。同时还弄出了不少玩法。本章从基础数据类型开始讲起 ? 注意:在ts中,定义数据类型,除了Function,其它全部都是开头小写。 ,它的定义也类似: // 元组类型:限定了数组成员的类型和个数 let tuple:[number,string]= [1,'2'] let tuple: [number, string] = ["1" (s1 === s2) // false 2.1.7 其它数据类型 在ts的定义中,undefined和null是任何其它数据类型的子类型,按理来说类似这种操作是应该允许的: let aaa: number = () => { while (true) {} } 2.2 枚举类型(enum) 假设有一个用户登录系统,根据角色来显示不同的界面。 2.硬编码问题:如果要改,改动肯定很大。 如果到了ts,可以用枚举类型来处理这种场景。 所谓枚举类型者,就是一组有名字的常量组合。
[TypeScript] 前言 在初步学习了 TypeScript 的变量声明后,对它的静态类型检查功能简直是爱不释手,但同时也发现一个问题:在正常的开发中,一个变量的类型有时可能不仅仅只限于 number 到底该怎样限制 res 的类型,让它同时满足 number 和 string 的类型检查呢?这就涉及到我们今天要学的 TypeScript 的另一种类型声明——联合类型。 基本语法如下: let tag:Type1|Type2|Type3 其中使用“|”分隔的三种类型代表变量 tag 可被赋值的类型范围。 在给 res 赋值为 12 后,TypeScript 推断 res 的类型为 number,number 类型不存在 .length 属性,所以报错。 总结 以上就是 TypeScript 联合类型的相关知识,总结起来就是: 联合类型包含了变量可能的所有类型; 对联合类型变量赋值为联合类型之外的值,会产生报错; 在不能确定联合类型变量的最终类型之前,只能访问联合类型所共有的属性和方法
前言 TypeScript 包含的基础类型总结起来有: 布尔值 数字 字符串 数组 元组 枚举 任意值 空值 Null 和 undefined Never Object 今天,我们就来详细了解一下各个类型所代表的含义及表示方法 let arr2:[number, string, number] = [1,"2",3]; // 若果写成 [1,2,3] 会报错 元素是严格规定了数组的长度和每个位置的元素类型,并且在赋值时需要严格对应 = Color[2]; console.log(colorName); // 显示'Green'因为上面代码里它的值是2 任意值 any 代表任意类型的值。 ("编程三昧"); } 扩展 1、TypeScript 会根据你给变量的初始值判断默认类型。 总结 以上就是 TypeScript 中的基础数据类型介绍,总结起来就是: 在变量(函数的括号)后面添加冒号,后面跟上期望的类型,即可限制类型的前后一致性; 如果没有显式的添加类型限制,TypeScript
当我们在TypeScript中声明变量但没有明确指定其类型时,TypeScript会尝试根据变量的值进行类型推断。这样可以帮助我们避免手动指定所有类型,使代码更简洁,同时也提供了更好的类型安全性。 TypeScript 推断 y 为 string 类型let z = true; // TypeScript 推断 z 为 boolean 类型在这个例子中,我们没有显式地给变量x、y和z指定类型,TypeScript 数组类型推断let numbers = [1, 2, 3]; // TypeScript 推断 numbers 为 number[] 类型let names = ["Alice", "Bob", "Charlie "]; // TypeScript 推断 names 为 string[] 类型TypeScript会检查数组中所有元素的类型,并根据元素类型推断出数组的类型。 } 类型TypeScript会根据对象字面量中的键值对进行类型推断。
类型守卫在前几篇介绍了断言,在使用断言时我们已经确定了变量的类型,确定该类型时一定存在(否则则会欺骗编译,运行时报错),那么为什么还要类型守卫呢? 因为类型断言还是需要借助类型守卫的,类型守卫主要是用来判断未知类型是不是所需要的类型。 val.study) }}getInfo({ name: 'student', study: "Philosophy" });//打印结果为Philosophy,因为传参中含有study属性,所以走了第二个判断2、 这种写法称作类型谓词,使用类型谓词的函数称为类型谓词函数,该函数的返回值必须的boolean类型。 const getName = (cls: Teacher | Student) => { if(isTeacher(cls)) { return cls.courses; }}(2)
当我们使用TypeScript编写代码时,类型声明是非常重要的,它帮助我们定义变量、函数、类等的类型,从而提供更好的代码提示、类型检查和代码可读性。 以下是关于TypeScript类型声明的详细内容:基本类型声明在TypeScript中,我们可以使用以下关键字来声明基本类型:let num: number = 42;let str: string = "Hello";let bool: boolean = true;let arr: number[] = [1, 2, 3];let tuple: [string, number] = ["hello (Type Assertion)类型断言允许我们手动指定变量的类型,并告诉TypeScript编译器我们知道更多关于变量的类型信息。 : number; readonly id: number;}以上是关于TypeScript类型声明的一些重要内容。通过合理使用类型声明,我们可以增强代码的可读性、类型安全性和可维护性。
TypeScript 基础类型 TypeScript 包含的数据类型如下表: 数据类型 关键字 描述 任意类型 any 声明为 any 的变量可以赋予任意类型的值。 // 在元素类型后面加上[] let arr: number[] = [1, 2]; // 或者使用数组泛型 let arr: Array<number> = [1, 2]; 元组 无 元组类型用来表示已知元素数量和类型的数组 enum Color {Red, Green, Blue}; let c: Color = Color.Blue; console.log(c); // 输出 2 void void 用于标识方法返回值的类型 **注意:**TypeScript 和 JavaScript 没有整数类型。 ---- Any 类型 任意值是 TypeScript 针对编程时类型不明确的变量使用的一种数据类型,它常用于以下三种情况。
一、TypeScript 的安装及使用 1、安装 npm i typescript -g // ts 全局包 npm i ts-node -g // 使用 ts-node 直接运行 ts 文件 2、使用 将 TypeScript 转换为 JavaScript 代码: tsc test.ts 使用 node 命令来执行 test.js 文件: $ node test.js 二、TypeScript (any1); // false any1 = undefined console.log(any1); // undefined 2、数字类型 number TS 的 number 类型继承了 ES6 // 在元素类型后面加上 [] let arr: number[] = [1, 2, 3]; // 或者使用数组泛型 let arr: Array<number> = [1, 2, 3]; 6、元组 {Red, Green, Blue}; let c: Color = Color.Blue; console.log(c); // 输出 2 8、void 表示没有任何类型,方法无返回值时可以使用此类型
数学理论与计算机的发展是相辅相成的,底部类型在计算机科学中也有一定的应用场景。 在子类型系统中,底部类型是所有类型的子类型。(但是,相反情况并非如此,所有类型的子类型不一定是底部类型。) 它与顶端类型(它跨越系统中的所有可能值)和单元类型(恰好具有一个值)形成对比。 底部类型通常用于以下作用: 表示函数或运算有所不同,换句话说,就是不会将结果返回给调用方。 二、never 类型 在 TypeScript 中,never 类型表示的是那些永不存在的值的类型。 五、never 类型运算 因为 never 类型为底部类型,所以任意类型与 never 交叉都得到 never: type T1 = number & never; // never type T2 = string & never; // never 对于上面的运算结果,我们可以这样理解:若 type T = T1 & T2,则 T 类型的值可以赋给 T1 或 T2 类型的变量。
在 JavaScript 中是没有元组的,元组是 TypeScript 中特有的类型,其工作方式类似于数组。 元组可用于定义具有有限数量的未命名属性的类型。每个属性都有一个关联的类型。 很明显元组类型 [number, string] 的长度是 2,在位置索引 2 处不存在任何元素。 三、元组类型的可选元素 与函数签名类型,在定义元组类型时,我们也可以通过 ? 针对这种情形,在 TypeScript 中就可以利用元组类型可选元素的特性来定义一个元组类型的坐标点,具体实现如下: type Point = [number, number?, number?] 在该函数的第一行中,我们把 args 元组中保存的值解构赋值给 arg1、arg2 和 arg3 这三种不同类型的变量,最后我们分别输出三个变量的值。 六、只读的元组类型 TypeScript 3.4 还引入了对只读元组的新支持。我们可以为任何元组类型加上 readonly 关键字前缀,以使其成为只读元组。
[类型+方括号] 在我们创建数组的时候同样我们可以定义数组内数据的类型,如下所示 var arr:number[]=[1,2,3] var arr2:string[]=["1","2","3"] var arr3:any[]=[1,"2",true] 泛型Array<T> 如下代码所示我们可以以泛型的方式进行创建数组 var arrType:Array<number>=[1,2,3] var arrType1 :Array<string>=["1","2","3"] var arrType2:Array<any>=["1",2,true] 接口形式 interface IArr{ [index:number ]:number } var arrType3:IArr=[1,2,3] 通过如上代码我们限制了值只能为number类型 当然我们也可以约束我们数组里面为我们的对象,我们可定义一个泛型的数组如下所示. age:number } var arrType5:Array<IArrStudent>=[{ name:"Mr.A",age:18},{ name:"Mr.B",age:20}] 同样在这类型加方括号的形式也可以描述
一、交叉类型(Intersection types)什么事交叉类型呢?简单来说就是通过&符号将多个类型进行合并成一个类型,然后用type来声明新生成的类型。 这里分两种情况,如果同名属性的类型相同则合并后还是原本类型,如果类型不同,则合并后类型为never2.基本数据类型交叉any和number交叉结果是any类型,any和boolean交叉结果是any类型 string,b:string) => voidtype AB = A&B;let func:AB = (a:number | string ,b:number | string) => {} func(1,2) :string) => voidtype ABC = A&B&C;let func:ABC = (a:number | string ,b:number | string) => {} func(1,2) 二、联合类型(Union types)联合类型和交叉类型比较相似,联合类型通过|符号连接多个类型从而生成新的类型。它主要是取多个类型的交集,即多个类型共有的类型才是联合类型最终的类型。
TypeScript 中使用联合类型经常会有下面的错误出现: ? ? 这时就需要用到类型保护,类型保护允许你使用更小范围下的对象类型,常见的类型保护如下: 一、类型断言的类型保护 ? 二、in 语法的类型保护 ? 三、typeof 类型保护 先来看另一种常见的错误: ? ? 通过 typeof 类型保护: ? 四、instanceof 类型保护 ?
前言本文主要讲解TypeScript的基本数据结构,主要包括JS基本数据类型以及TS特有的数据类型。 ] = ['a'](2)数组的数据类型不一致联合数据声明:比如(string|number)[],声明一个数组,数组类型为字符串、数字。 valueA = Valuedemo['A'];var valueNameA = Valuedemo[8];console.log(valueA);console.log(valueNameA);(2) 常量demo如下:enum constantEnum{ num, //枚举表达式字面量 age = num, //引用常量枚举成员 count = 2 << 1, //枚举表达式字面量参与二元运算符 let testValue1: unknown = unknownValue;//赋值给any类型的变量let testValue2: any = unknownValue;错误示范://赋值给boolean