TypeScript笔记 | 您所在的位置:网站首页 › cus是什么文件类型 › TypeScript笔记 |
TypeScript
什么是TypeScriptJS与TS区别TypeScript常用类型类型注解常用基础类型概述TypeScript 高级类型
什么是TypeScript
TypeScript (简称:TS)是JavaScript的超集(JS有的TS都有)TypeScript = Type + JavaScript(在JS基础之上,为JS添加了类型支持)TypeScript是微软开发的开源编程语言,可以在任何运行JavaScript的地方运行
JS与TS区别
TypeScript 属于静态类型的编程语言,JS 属于动态类型的编程语言 静态类型:编译期做类型检查; 动态类型:执行期做类型检查 也就是说:对于 JS 来说:需要等到代码真正去执行的时候才能发现错误(晚)。对于 TS 来说:在代码编译的时候(代码执行前)就可以发现错误(早)。 TypeScript常用类型 类型注解 let age: number=18number为类型注解,为变量添加类型约束 约定了什么类型,就只能给变量赋值该类型的值 常用基础类型概述分为JS已有类型和TS新增类型 1.JS已有类型 原始类型:number/string/boolean/null/undefined/symbol对象类型:object(包括对象、数组、函数等对象) 2.TS新增类型联合类型、自定义类型(类型别名)、接口、元组、字面量类型、枚举、void、any等。原始类型 let age:number=18 let name:string='甘雨晗' let f:boolean=false数据类型 两种写法 let numbers:number[]=[1,3,5]//推荐这一种写法 let strings:Array=['a','b','c']如果数组中既有number类型又有string类型 let arr:(number|string)[] = [1,'a',3,'b']== | (竖线)在TS中叫做联合类型(由两个或多个其他类型组成的类型,表示可以是这些类型中的任意一种)== 类型别名 =自定义类型:为任意类型起别名。 *当同一类型(复杂)被多次使用时,可以通过类型别名,简化类型的使用。 type Cus=(number | string)[] let arr1: Cus=[1,'a',2,'b'] let arr2: Cus=['x','y',6,7]函数类型 函数的类型实际上指的是:函数参数和返回值的类型 1.单独指定参数、返回值的类型: function add(num1:number,num2:number):number{ return num1+num2 } const add=(num1:number,num2:number):number=>{ return num1+num2 }2.同时指定参数、返回值的类型 const add:(num1:number,num2:number)=>number=(num1,num2)=>{ return num1+num2 }函数类型 function greet(name:string):void{//没有返回值的函数返回值类型为void console.log('Hello',name) }使用函数实现某个功能时,参数可以传也可以不传。这种情况下,在给函数参数指定类型时,就用到可选参数了。 function mySlice(start?:number,end?:number):void{ console.log('起始索引:',start,'结束索引:',end) }可选参数:在可传可不传的参数名称后面添加 ?(问号)。 注意:可选参数只能出现在参数列表的最后,也就是说可选参数后面不能再出现必选参数。 对象类型 JS 中的对象是由属性和方法构成的,而 TS 中对象的类型就是在描述对象的结构(有什么类型的属性和方法) 对象类型的写法: let person:{name:string;age:number;sayHi():void}={ name:'jack', age:19, sayHi(){} }接口 当一个对象类型被多次使用时,一般会使用接口(interface)来描述对象的类型,达到复用的目的 interface IPerson{ name:string age:number sayHi():void } let person:IPerson={ name:'jack', age:19, sayHi(){} } 使用 interface 关键字来声明接口。接口名称(比如,此处的 IPerson),可以是任意合法的变量名称。声明接口后,直接使用接口名称作为变量的类型。因为每一行只有一个属性类型,因此,属性类型后没有 ;(分号)。interface(接口)和 type(类型别名)的对比: 相同点:都可以给对象指定类型。不同点: - 接口,只能为对象指定类型。 - 类型别名,不仅可以为对象指定类型,实际上可以为任意类型指定别名。 元组场景:在地图中,使用经纬度坐标来标记位置信息。 可以使用数组来记录坐标,那么,该数组中只有两个元素,并且这两个元素都是数值类型。 let position:number[]=[39.5427,116.2317]使用 number[] 的缺点:不严谨,因为该类型的数组中可以出现任意多个数字。 更好的方式:元组(Tuple)。 元组类型是另一种类型的数组,它确切地知道包含多少个元素,以及特定索引对应的类型 let position:[number,number]=[39.5427,116.2317]解释: 元组类型可以确切地标记出有多少个元素,以及每个元素的类型。该示例中,元素有两个元素,每个元素的类型都是 number。字面量类型 let str1='Hello TS' const str2='Hello TS' 变量 str1 的类型为:string。变量 str2 的类型为:‘Hello TS’。解释: 3. str1 是一个变量(let),它的值可以是任意字符串,所以类型为:string。 4. str2 是一个常量(const),它的值不能变化只能是 ‘Hello TS’,所以,它的类型为:‘Hello TS’。 使用模式:字面量类型配合联合类型一起使用。 使用场景:用来表示一组明确的可选值列表。 比如方向只能是上下左右中的任意一个 function changeDirection(direction:'up'|'down'|'left'|'right'){ console.log(direction) }解释:参数 direction 的值只能是 up/down/left/right 中的任意一个。 优势:相比于 string 类型,使用字面量类型更加精确、严谨。 any 类型(不推荐) 因为当值的类型为 any 时,可以对该值进行任意操作,并且不会有代码提示。 typeof JS 中提供了 typeof 操作符,用来在 JS 中获取数据的类型。 TS 也提供了 typeof 操作符:可以在类型上下文中引用变量或属性的类型(类型查询)。 let p={x:1,y:2} function formatPoint(point:{x:number;y:number}){} formatPoint(p) function formatPoint(point:typeof p){}解释: 使用 typeof 操作符来获取变量 p 的类型,结果与第一种(对象字面量形式的类型)相同。typeof 出现在类型注解的位置(参数名称的冒号后面)所处的环境就在类型上下文(区别于 JS 代码)。注意:typeof 只能用来查询变量或属性的类型,无法查询其他形式的类型(比如,函数调用的类型)。 TypeScript 高级类型class类 class Person{} const p:Person const p=new Person() 根据 TS 中的类型推论,可以知道 Person 类的实例对象 p 的类型是 Person。TS 中的 class,不仅提供了 class 的语法功能,也作为一种类型存在。示例属性初始化: class Person{ age:number gender='男' //gender: string='男' } 声明成员 age,类型为 number(没有初始值)。声明成员 gender,并设置初始值,此时,可省略类型注解(TS 类型推论 为 string 类型)。构造函数 class Person{ age:number gender:string constructor(age:number,gender:string){ this.age=age this.gender=gender } } 成员初始化(比如,age: number)后,才可以通过 this.age 来访问实例成员。需要为构造函数指定类型注解,否则会被隐式推断为 any;构造函数不需要返回值类型。示例方法: class Person{ x=10 y=10 scale(n:number):void{ this.x *=n this.y *=n } }方法的类型注解(参数和返回值)与函数用法相同。 类继承的两种方式:1 extends(继承父类) 2 implements(实现接口)。 说明:JS 中只有 extends,而 implements 是 TS 提供的。 1. class Animal{ move(){console.log('Moving along')} } class Dog extends Animal{ bark(){console.log('汪')} } const dog = new Dog() 2. interface Single{ sing():void } class Person implements Single{ sing(){ console.log('甘雨晗') } }类成员可见性:可以使用 TS 来控制 class 的方法或属性对于 class 外的代码是否可见。 可见性修饰符包括:1 public(公有的) 2 protected(受保护的) 3 private(私有的)。 class Animal{ public move(){ //protected、private console.log('Moving along') } }除了可见性修饰符之外,还有一个常见修饰符就是:readonly(只读修饰符)。 readonly:表示只读,用来防止在构造函数之外对属性进行赋值。 class Person{ readonly age:number=18 constructor(age:number){ this.age=age } }类型兼容性 在结构类型系统中,如果两个对象具有相同的形状,则认为它们属于同一类型。 1. class point {x:number;y:number} class point2{x:number;y:number} const p:point = new point2() 2. interface point {x:number;y:number} interface point2{x:number;y:number} let p1 : point let p2 : point2=p1除了 class 之外,TS 中的其他类型也存在相互兼容的情况,包括:1 接口兼容性 2 函数兼容性 等。 函数之间兼容性比较复杂,需要考虑:1 参数个数 2 参数类型 3 返回值类型。 - 参数个数,参数多的兼容参数少的(或者说,参数少的可以赋值给多的)。 - 参数类型,相同位置的参数类型要相同(原始类型)或兼容(对象类型)。 - 参数类型,相同位置的参数类型要相同或兼容。 - 返回值类型,只关注返回值类型本身即可泛型 泛型是可以在保证类型安全前提下,让函数等与多种类型一起工作,从而实现复用,常用于:函数、接口、class 中。 创建一个 id 函数,传入什么数据就返回该数据本身 function id(value:number):number{return value}创建泛型函数: function id(value:Type):Type{return value} 语法:在函数名称的后面添加 (尖括号),尖括号中添加类型变量,比如此处的 Type。类型变量 Type,是一种特殊类型的变量,它处理类型而不是值。该类型变量相当于一个类型容器,能够捕获用户提供的类型(具体是什么类型由用户调用该函数时指定)。因为 Type 是类型,因此可以将其作为函数参数和返回值的类型,表示参数和返回值具有相同的类型。类型变量 Type,可以是任意合法的变量名称。调用泛型函数: const num:number const num=id(10) const str:string const str=id('a') 语法:在函数名称的后面添加 (尖括号),尖括号中指定具体的类型,比如,此处的 number。当传入类型 number 后,这个类型就会被函数声明时指定的类型变量 Type 捕获到。此时,Type 的类型就是 number,所以,函数 id 参数和返回值的类型也都是 number。泛型约束:默认情况下,泛型函数的类型变量 Type 可以代表多个类型,这导致无法访问任何属性。 比如,id(‘a’) 调用函数时获取参数的长度: function id(value:Type):Type{ console.log(value.length) return value }Type 可以代表任意类型,无法保证一定存在 length 属性,比如 number 类型就没有 length。 此时,就需要为泛型添加约束来收缩类型(缩窄类型取值范围) 添加泛型约束收缩类型,主要有以下两种方式:1 指定更加具体的类型 2 添加约束。 指定更加具体的类型 function id(value:Type[]):Type[]{ console.log(value.length) return value } 添加约束 interface gyh{length:number} function id(value:Type):Type{ console.log(value.length) return value } 创建描述约束的接口 ILength,该接口要求提供 length 属性。通过 extends 关键字使用该接口,为泛型(类型变量)添加约束。该约束表示:传入的类型必须具有 length 属性。泛型类:class 也可以配合泛型来使用。 创建泛型类: class gyh{ defaultValue:NumType add:(x:NumType,y:NumType)=>NumType } 类似于泛型接口,在 class 名称后面添加 ,这个类就变成了泛型类。此处的 add 方法,采用的是箭头函数形式的类型书写方式。 const myNum = new gyh() myNum.defaultValue=10映射类型 映射类型:基于旧类型创建新类型(对象类型),减少重复、提升开发效率。 可以使用映射类型来进行简化。 |
CopyRight 2018-2019 实验室设备网 版权所有 |