Typescript是什么？Typescript是微软公司开发的一款开源的Javascript超集语言！那什么是Javascript超集语言呢？Javascript超集： 当前任何Javascript都是合法的Typescript代码！意思就是Typescript的语法中包含了当前所有的Javascript语法。那么Typescript的作用是什么呢？Typescript主要为Javascript提供了类型系统和ES6语法的支持！Typescript与Flow的区别在哪呢？Flow是一个类型检查工具，Typescript是一种开发语言！Typescript有自己的编译工具，我们写好的Typescript代码最终会通过编译器编译成Javascript代码进行运行！如何使用Typescript安装Typescript命令行工具的安装（TS编译器）---注意：在使用npm命令前我们需要先安装node.jsnpm i typescript -g安装好了之后，全局会提供一个tsc命令给我们使用！编写Typescript代码通过tsc进行编译，最终运行ts配置文件的说明
- 创建配置文件
tsc --init- 设置配置项
- target: 指的就是将ts代码要转换成哪个版本的js代码 es5 es6
- module: 指的就是将ts代码转换成js代码之后，使用的模块化的标准是什么
- outDir: 指的就是将ts代码转换成js代码之后，js代码存放的文件夹路径
- rootDir: 指的就是要将哪个目录中的ts代码进型转换，ts代码的存放路径
- strict: 是否要将ts代码转换为严格模式的js代码！
- 使用配置文件
tsc -p ./tsconfig.jsonTypescript中的数据类型数字类型 typescript中的数据类型可以被赋值为数字，NaN，Infinity，还有进制数字。let a : number = 10 ; let b : number = NaN ; let c : number = Infinity ; let d : number = 0xA12 ; //十六进制数字 let e : number = 0b1010101 ; //二进制数字 let f : number = 0o75 ; //八进制数字
// string let str string = "这是一个字符串" let str1 string = '这是一个字符串' let str2 string = `hello 这是一个模板字符串 ${ a } ` // boolean let flag boolean = true ; let flag1 boolean = false ; // 数组 // Array<数据类型> let arr Array < number > = [ 1 , 2 , 3 , 4 ]; // 数据类型[] let arr1 number [] = [ 1 , 2 , 3 , 4 ];
元组的元素可以通过下标进行访问。
通过索引得到元组元素并修改其中的内容时，只能改变该索引位置定义的数据类型。如下代码中，定义了一个arr2元组，其中arr2[0]必须是数字类型，arr[1]必须是字符串类型。当我们要修改索引0的元素时，只能将其修改为数字类型的，而不能是其他类型的。
注意：当我们访问修改的元素超过元组的长度时，该元素默认的类型可以是该索引前面的所有数据类型。如我们访问了arr[2]此时我们即可以将其赋值为字符串，又可以将其赋值为数字。 // 元组（Tuple） let arr2 : [ number , string ] = [ 1 , 'a' ]; // arr2[0] = 'a'; // arr2[0] = 1000; arr2 [ 2 ] = 'a' ; arr2 [ 2 ] = 1 ; // arr2[2] = [];
// void 空值 let res void = undefined ; // undefined let res1 undefined = undefined ; // null let res2 null = null ;
// any 表示任意类型 let somevar any = 10 ; somevar = "abc" ; somevar = []; function test : never { while { } }
也可以类似flow中的语法规定对象的参数。 // object类型 // let o: object = {}; // let o1: object = []; // 对象类型 //这种方法和flow的限制对象参数的方法类似 let o : { name string , age number } = { name : "张学友" , age 18 }; // gender: 0 1 -1 enum Gender { male = 1 , female = 0 , unknow = - 1 } let gender Gender = Gender . male ; let obj = { gender Gender.male }
// 类型断言 let stri any = "abc" ; let len number = . length ; class Person { constructor { this . name = name ; this . age = age ; } sayHello { console . log ; } } class Person { //先声明name变量和age变量并在构造函数中进行初始化 name string age number constructor { this . name = name ; this . age = age ; } sayHello : void { console . log ; } }
如下代码中复写父类的constructor方法中先调用了super方法，并传入了父类的constructor方法中要求传入的参数age。如果子类的方法和父类的同名，子类中的方法会覆盖父类的方法。 //父类Animal class Animal { age number constructor { this . age = age ; } //父类的eat方法 eat { console . log } } //继承Animal类的子类Dog class Dog extends Animal { type : string constructor { //继承的字类中的构造方法中必须先调用super方法，并且要传入父类中构造函数定义的参数。 super ; this . type = type ; } // 子类中如果出现了和父类同名的方法，则会进行覆盖 // 也就是调用的时候，调用的就是子类中的方法了！ eat { console . log } } //初始化一个Dog实力并传入种类和年龄参数 var dog = new Dog ; dog . eat ; enum Color { red , yellow , blue } class Car { // 如果不加访问修饰符 则当前成员默认是公开的 所有人都可以访问的 public color Color constructor { this . color = Color . red ; } // 加了private之后，当前成员就只能在当前类中使用了！ private run { } // 加了protected之后，当前成员就只能在当前类或者子类中使用了！ protected loadPeople { } } let byd = new Car ; class Audi extends Car { sayHi { console . log } } let audi = new Audi ;
class Cat { //此时将name属性设置为只读属性，外界只能访问name变量的值，但不能进行修改 readonly name string //在constructor构造函数中直接添加修饰符并定义了一个type属性用来接收用户传入的参数值 constructor { this . name = "加菲" } } var cat = new Cat ; // cat.name = "123" //由于name属性是可读属性，不能被重新赋值，此时编译器会报错 class Person { //定义内部变量 public _name ; //在构造函数中对name属性进行初始化 constructor { this . _name = "" } } //实例化一个Person类 let personName1 = new Person ; //获取name变量 personName1 . name ; //"" //设置set变量 personName1 . name = "徽柔" ; //此时实例化后的personName1类中的name属性值为徽柔 class Person { //定义内部name属性 private _name ; //在构造函数中对name属性进行初始化 constructor { this . _name = "" } //变量取用函数get get name { return this . _name ; } //变量设置函数set set name { if { throw new Error } this . _name = value ; } } //在类的外部调用存取器进行变量的读取和修改 let people = new Person ; //当我们访问类中的name变量时，会自动调用get方法 let personName = people . name ; console . log ; //控制台输出 ： "" //当我们为变量赋予新的值时，会自动调用set方法 people . name = "徽柔" ; console . log ; //控制台输出 ： 徽柔
当我们只定义了set方法的时候，该属性无法读取，只能调用set方法设置其中的值。Typescript中的接口Typescript中接口的基本使用接口可以理解为一个规范，当我们需要的限制传入的参数具有什么样的值时，我们可以使用接口来规范传入的参数对象，例如下面的代码中，声明了一个AjaxOptions接口，其中有四个属性。我们要在ajax函数中限制其传入的参数必须有这四个属性的时候我们就可以让该参数继承AjaxOptions接口。
然后我们再调用ajax函数时传入的参数就必须有该四个属性，否则就会报错。 // 使用interface声明AjaxOptions接口 interface AjaxOptions { url string , type : string , data object , success : void } // option参数中 需要包含 url type data success function ajax { } ajax { } }) // 使用interface声明AjaxOptions接口 interface AjaxOptions { url string , // 给属性加上？之后，这个属性就是可选的！ type : string , data object , success : void } // option参数中 需要包含 url type data success function ajax { } ajax { } })
interface Point { readonly x number , readonly y number , } let poi Point = { x 10 , y 10 } // poi.x = 100; //这样会报错，因为xs属性是只读属性，不能重新赋值 interface 接口名 { 属性 1 ：数据类型， 属性 2 ，数据类型， [ 额外检查属性名：数据类型 ] : any } interface Point { readonly x number , y number , [ propName string ] : any } let poi Point = { x 10 , y 10 } // poi.x = 100; let poi1 Point = { x 10 , y 10 , //此时我们在写多一个z属性的时候就不会报错了 z 100 }
其基本语法如下： interface 函数接口名 { : 函数返回值 } interface SumInterFace { : number } let sum SumInterFace = function : number { return a + b ; } interface 类接口名 { 属性1 数据类型 , 属性2 数据类型 , ... } /*定义Person类的接口PersonInterFace，其中有三个属性，分别是 字符串类型的name 数字类型的。
