前言
是JavaScript的、软件系统开发定制带有类型的超集,软件系统开发定制并且能够编译为普通的JavaScript。软件系统开发定制它是一种建立在JavaScript软件系统开发定制上的编程语言,软件系统开发定制也是一种工具。软件系统开发定制它是一个强大的编译器,软件系统开发定制你可以在代码上运行,将typescript编译为JavaScript。
它为JavaScript软件系统开发定制添加新功能和优势。但是,typescript在JavaScript软件系统开发定制环境无法运行,软件系统开发定制浏览器无法执行类型脚本。
优点:类型检查;代码补全;易于维护;入门简单。软件系统开发定制它使编写干净的代码变软件系统开发定制得非常容易。
typescript软件系统开发定制添加类型和数据对类型非常重要,软件系统开发定制我们必须更明确地了解软件系统开发定制事情的运作方式,软件系统开发定制可以避免很多使用类型的意外和不必要的错误。typescript是可配置的。
typescript可以在开发过程中帮助我们进行检查,允许我们更早地修复错误。typescript只能在开发期间获得支持,不在运行时,因为这些类型脚本功能和检查没有内置到JavaScript引擎中,这样的逻辑就不能在浏览器中执行,它只能在开发期间执行。
一、安装TypeScript
首先,确保你的电脑安装了.js。
输入命令npm install -g typescript;把typescript安装到全局,这样,所有的typescript项目都可以使用它。安装完成,我们可以使用 tsc 命令来执行 typescript 的相关代码,输入tsc - v命令来查看版本号,看到typescript的版本号说明安装成功了。
二、基本使用
新建一个LearningTypeScript文件夹,用打开。在这个文件夹中新建一个demo01.ts文件。里面写一点内容,如下所示。
在终端输入tsc demo01.ts,TypeScript编译器就可以把ts文件编译成js文件了。
可以看到在文件夹中生成了一个新的demo01.js文件。
运行一下,输入:node demo01.js,可以看到输出了数字13。
三、配置编译版本
那么,JavaScript的版本这么多,tsc如何知道应该编译成哪种版本呢?
tsc默认会编译成ES3版本。我们试一下在demo01.ts文件中加一个async异步函数,它是ES1017版本的,应该如何编译呢?
我们可以在文件夹中新建一个tsconfig.json配置文件,通过compilerOptions属性来配置tsc编译器,target⽤于指定要编译成的版本,这里指定ES2017。
现在,再次运行tsc,后面不需要加文件名了。因为有了tsconfig.json文件之后,这个文件夹会自动成为typescript的项目,tsc会自动找到ts文件并进行编译。如果制定了文件名,那么这个配置文件的配置就会被忽略了。
打开js文件,发现和ts文件的async函数一样。
四、相关特性
1.基本类型
给变量定义类型有两种方式,一种是隐式的,一种是显式的。
隐式类型由typescript根据变量的值来推断类型。代码写法与js一样,但是,它后面不能用其他类型的值给它重新赋值。比如定义一个let a = 10,a = ‘hello’;这样编译器就会报错,提示“hello字符串不能赋值给数字类型”!
let a = 10;a = 'hello';
- 1
- 2
基本类型与javascript一样:boolean number string undefined null 。显示类型的定义,就跟之前运行的ts代码示例一样,用冒号加类型来显示地规定这个变量是什么类型的。
// : boolean 表示是布尔类型的let b: boolean = true;// : number 表示是数字类型的let c: number = 22;// 字符串类型let s: string = 'john';// undefinedlet u: undefined = undefined;// nulllet n: null = null;
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
如果想让一个变量可以是任何类型的,那么可以把它的类型定义为any。声明为 any 的变量可以赋予任意类型的值。
例如:给a一个数字类型的值,再改成字符串,这时候就不报错啦。
let a:any = 10;a = "hello"
- 1
- 2
2.函数
类型也可以用在函数的参数和返回值中。
比如下面的例子中:定义一个加法函数,接收类型为number的两个参数a、b;返回值的类型也是number,返回值的类型定义在参数列表的小括号后面;再后面才是函数体。
//类型也可以用在函数的参数和返回值中// 比如:定义一个加法函数,接收类型为number的参数n1、n2;返回值的类型也是number,返回值的类型定义在参数列表的小括号后面;再后面才是函数体。// 实例中定义了函数 add(),返回值的类型为 number。// add() 函数中定义了两个 number 类型的参数,参数之间用,分隔,函数内将两个参数相加并返回。function add(n1: number, n2: number): number { // 通过使用 return 语句就可以实现返回值,在使用return语句时,函数会停止执行,并返回指定的值。 // 返回a+b return n1 + n2;}// 如果函数没有返回值,可以使用void类型表示函数没有返回值。如下所示:// function add(n1:number,n2:number):void{// console.log(n1+n2)// }// 调用函数// 不能使用字符串变量来接收函数的返回值,会报错。比如:let res:String = add(1,2);提示“number类型不能赋值给string类型!”// 不能给函数传递字符串。比如:add("1",2);那么编译器会提示“字符串1不能传给number类型的函数!”// 调用函数时,必须传递与参数列表一样的参数,不像js,可以不传或只传一个参数。比如:add(1);就会提示“没有给n2传值!”// 在 TypeScript 函数里,如果我们定义了参数,则我们必须传入这些参数。除非将这些参数设置为可选,可选参数使用问号标识 ?。add(1, 2);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
3.组合类型
如果一个变量可以有多个类型,但是又不想使用any破坏类型检查,就可以使用组合类型。组合类型使用 | 来定义。
比如:一个变量p既可以是数字类型也可以是字符串类型。
let p:number | string = 10;p = "hello typescript";
- 1
- 2
不过,代码这样看起来不大方便。并且这个组合类型只能给p使用。如果有别的变量也是数字或字符串类型,还要重复定义。
要解决这个问题,可以使用type关键字给这个组合类型起一个别名,让代码更易读,也方便变量使用。
例子如下:
// 定义一个type名为NumStr。定义了一个number | string的联合类型变量,因此给变量赋值数值或字符串都是可以的。 type NumStr = number | string;// p变量定义一个数字let p:NumStr = 10;p = "hello typescript";// q变量定义一个字符串值let q:NumStr = "hi";// 组合类型也可以直接使用字面值来定义,这样,就规定了一个变量的取值范围。// 比如:想让字符串类型的变量只能去on或者off两者之一;那么就可以这么定义,在变量o后面直接使用on offlet o: "on" | "off" = "on";// 可以给它赋值offo = "off";// 但是,不能给它赋值除了on、off之外的值,会报错,提示"hah不能赋值给用on或off定义的类型里面!"// o = "hah";
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
4.对象类型
TypeScript 中,使用interfaces接口,接口是用来规范一个对象里应该都有哪些属性,包括它的名字和它的类型。接口一般首字母大写。
定义的变量⽐接⼝多了或者少了⼀些属性都是不允许的。
// 比如:有一个person文档变量,我想让它有name和hobby属性,并且都是String类型的,那么我们可以使用接口来定义一个person类型。// 定义一个接口Person 接口首字母要大写interface Person { // 大括号里面有属性和类型;每个属性后面用分号分隔 name:string; hobby:string;}// 定义一个person对象,使用Person接口类型;person对象实现了接口Person的属性和方法。 // 对象里面只能包括接口里定义的属性。对象里面也不能少定义属性,会提示“缺少属性!”;let person: Person={ name:"ym", hobby:"唱歌",}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
可选属性:有时我们希望不要完全匹配接口中的所有属性,那么可以用可选属性,表示该属性可以不存在。
// 带有可选属性的接口与普通的接口定义差不多,只是在可选属性名字定义的后面加一个?interface Person1 { name: string; hobby:string; // age为可选属性 age?: number;}let James: Person1 = { name: 'James', hobby:"跑步",};
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
5.数组类型
给数组规定类型,可以保证里面的元素都是同一个类型,以防在统一处理数组元素时,混进来其他类型的元素,导致异常。或者防止意外给数组元素赋了其他类型的值。
要定义数组类型的方法有如下两种:
第一种,可以在类型后面加一对空的方括号 [],表示由此类型元素组成的一个数组;
第二种方式是使用数组泛型,Array<元素类型>。
// 定义一个number类型的数组 // 第一种,可以在类型后面加一对空的方括号 [],表示由此类型元素组成的一个数组let arr1: number[] = [1, 2, 3];// 第二种方式是使用数组泛型,Array<元素类型>。// 泛型属于面向对象语言中比较高级的特性。 应用在数组身上,同样可以用来规定数组中元素的类型。let arr2: Array<number> = [1, 2, 3];
- 1
- 2
- 3
- 4
- 5
- 6
6.元组tuple
我们知道数组中元素的数据类型都一般是相同的(any[] 类型的数组可以不同),如果存储的元素数据类型不同,则需要使用元组。
// TypeScript中有一个元组tuple。它是一个有限元素数量的数组(固定的数组),并且长度也是固定的。但是,每个元素需要分别指定是什么类型。// 比如:这里有一个三元组就是这个数组中有三个元素。规定第一个元素是number类型,第二个元素是string类型,第三个元素是boolean类型。// 声明一个元组并初始化let mytup:[number,string,boolean] = [1,"joy",true];
- 1
- 2
- 3
- 4
访问元组:元组中元素使用索引来访问,第一个元素的索引值为 0,第二个为 1,以此类推第 n 个为 n-1。
元组运算:我们可以使用以下两个函数向元组添加新元素或者删除元素。
- push() 向元组添加元素,添加在最后面。
- pop() 从元组中移除元素(最后一个),并返回移除的元素。