一、简介
image.png
二、环境搭建
npm install -g typescript
安装完打开cmd --- tsc 测试有没有安装成功
image.png
三、TypeScript的基本数据类型
TypeScript 原始数据类型
image.png
undefined和null是其他类型的子类型，所以其他类型可以赋值成undefined和null
var str:string = "hello"
var num:number = 1
var flag:boolean = true
var un:undefined = undefined
var unl:null = null
str = null
//void用来规定函数无返回值
var callBack = function():void{
//return 10 报错
}
var num2:void = 3 // error
TypeScript 中的任意值
image.png
var num:any = 1;
num = true;
num = "safd"
var num2;//没有赋值操作，就会被认为任意值类型等价于 var num2:any
num2 = 1;
num2 = true
TypeScript 中的类型推论
image.png
/、给变量赋值初始值的时候，如果没有指定类型，根据初始值倒推类型
var b = 1
b = 2 //error
四、TypeScript的联合类型
image.png
//通过 | 来增加多种类型
var muchtype:string|number = "hello"
muchtype = 10
console.log(muchtype.toString)//用到属性和方法的时候要注意要符合两种类型的属性和方法
TypeScript 中的对象类型--接口
image.png
//定义接口
interface Istate {
name:string
age:number
}
var obj1:Istate;
obj1 = {name:"张三"，age:10}
//可选属性
interface Istate2 {
name:string
age?:number // 存疑 可有可无
}
var obj2:Istate2;
obj2 = {name:"李四"，age:20}
obj2 = {name:"李四"}
//属性个数不确定的时候,any必须是任意类型
interface Istate3 {
name:string|number,
age?:number,
[propName:string]:any
}
var obj3:Istate3 = {name:"张三"，age:10,sex:"男",isMary:true}
//只读属性
interface Istate4 {
name:string,
readonly age:number
}
var obj4:Istate4 = {name:"张三"，age:10}
obj4.name = "李四"
obj4.age = 20 //error readonly 设置完之后不能修改
五、TypeScript的数组类型
image.png
//数组表示法
//类型+方括号
var arr:number [] = [1,2,3]
var arr2:string [] = ["1","2","3"]
var arr3:any [] = ["2",1,true]
//数组泛型Array<elemType>表示法
var arrType:Array<number> = [1,2,3]
var arrType2:Array<string > =["1","2","3"]
var arrType3:Array<any > =["2",1,true]
//采用接口表示法（常用）
interface Istate {
username:string,
age:number
}
interface IArr{
username:string,
age:number
}
var arrType4:IArr = [{username:"张三"，age:10}]
var arrType5:Array<Istate> = [{username:"张三"，age:10}]
var arrType6:Istate[] = [{username:"张三"，age:10}]
六、TypeScript的函数类型
image.png
//声明式类型的函数
function funcType(name:string,age:number):number{
return age
}
var ageNum:number = funcType("张三"，18)
//函数参数不确定
function funcType(name:string,age:number,sex?:string):number{
return age
}
var ageNum2:number = funcType2("张三",18,"男")
//函数参数的默认值
function funcType3(name:string="张三",age:number=18):number{
return age
}
//表达式类型函数
//不完整的约束规范
var funcType4 = function(name:string,age:number):number{
return age
}
//完整的约束
var funcType5:(name:string,age:number)=>number = function(name:string,age:number):number{
return age
}
interface funcType6{
(name:string,age:number):number
}
var funcType6:funcType6 = function(name:string,age:number):number{
return age
}
//对于联合类型的函数，可以采用重载的方式
//输入时number,输出也是number
//输入时string,输出也是string
function getValue(value:number):number;
function getValue(value:string):string;
function getValue(value:string|number):string|number{
return value
}
let a:number = getValue(1)
let b:string = getValue("1")
七、TypeScript的类型断言
image.png
在联合类型中要使用某一类型的属性和方法就可以使用类型断言
// let num:number|string = "10"
//num = 20
//console.log(num.length) error
//类型断言 只能断言联合类型中存在的类型
function getAssert(name:string|number){
//return (<string>name).length 方法一
return (name as string).length
}
八、TypeScript的类型别名
image.png
就是把某些联合类型单独定义出来，然后就使用这个定义的名字就可以了；
type strType = string|number|boolean;
var str:strType = "10"
str = 10
str = true
//可以对于接口也采用类型 别名
interface muchType1{
name:string
}
interface muchType2{
age:number
}
type muchType = muchType1 | muchType2
var obj:muchType = {name: "张三"}
var obj:muchType = {age:10}
var obj:muchType = {name:"李四",age:10}
//限制字符串的选择
type sex = "男" | "女"
function getSex(s:sex):string{
return s
}
getSex("男")
九、TypeScript 枚举
image.png
//使用枚举可以定义一些有名字的数字常量
enum Days{
Sun,
Mon,
Tue,
Wed,
Thu,
Fri,
Sat
}
console.log(Days.Sun) //0
console.log(Days.Sat) //6
console.log(Days) //枚举类型会被编译成一个双向映射的对象
console.log(Day[0] === "Sun")
enum Days{
Sun=3,
Mon,
Tue,
Wed,
Thu,
Fri,
Sat
}
console.log(Days.Sun) //3
console.log(Days.Sat) //9
console.log(Days) //枚举类型会被编译成一个双向映射的对象
console.log(Day[0] === "Sun")
编译成的js
image.png
十、TypeScript 类的修饰符
image.png
class Person{
private name = "张三"
protected age=18
say(){
console.log("我的名字是"+this.name+",我的年龄为"+this.age)
}
}
//创建Person的实例
//var p = new Person()
//p.say()
//private属性只能在类的内部进行访问
//console.log(p.name) //当一个类成员变量没有修饰的时候，外界是可以进行访问的，默认就是public进行修饰
//创建child子类
//一旦父亲将属性定义成私有的之后，子类就不可以进行访问了
//父亲的属性定义成受保护的之后，可以在子类里面进行访问
class child extend Perxon{
callParent(){
console.log(super.age)
super.say()
}
static test(){
console.log("test")
}
}
var c = new Child()
c.callParent()
//console.log(c.age) //error 子类继承了父类，但没有办法直接获取到父类私有的属性或者受保护的属性(实例的不行)
//console.log(c.say()) //子类继承了父类，子类就可以访问到父类的公开属性或者方法；
console.log(child.test()) //类的静态方法里面，是不予许用this
十一、TypeScript 泛型
image.png
//没有确切定义返回值类型，运行的数组每一项都可以是任意类型
function createArray(length:number,value:any):Array<any>{
let arr = []
for(var i=0;i<length;i++){
arr[i] = value
}
return arr
}
createArray(3,1)
//使用泛型将其改造
//不传的时候根据类型进行倒推
//泛型可以用来帮助我们限定约束规范
function createArray<T>(length:number,value:T):Array<T>{
let arr = []
for(var i = 0;i<length;i++){
arr[i] = value
}
return arr
}
var strArry:string[] = createArray<string>(3,'1')
var numArray:number[] = createArray(3,1)
//接口当中采用泛型
interface ICreate{
<T>(name:string,value:T):Array<T>
}
let func:ICreate;
func = function<T>(name:string,value:T):Array<T>{
return []
}
var strArr:number [] = func("zhangsan",3)
