TypeScript

ts优点 可读性，可维护性 非常包容 拥有活跃的社区

原始的数据类型

string number boolean null undefind enum symbol

var str:string = 'hello'
var num:number = 1
var flag:boolean = true
var un:undefined = undefined
var unl:null = null

空值一般采用void来表示，void可以表示变量，也可以表示函数无返回值

var num:void = 3 //报错
var callBack = function():void{
// return 10   //报错 不能有返回值
}

任意值（Any）用来表示允许赋值为任意类型

var num:any = 1
num = true //后续赋值没有问题

var num2; // 没有赋值操作  就会被认为任意值类型  等价于var num2:any;
num2 = 2

ts中的类型推论

var b = 1;// 给变量赋值初始值的时候，如果没有指定类型，根据初始值推断出一个类型
b = "2" //报错

var b; //没有给变量b赋初始值， 就是any  等价于var b:any;
b = 1;
b = true;

ts联合类型 表示取值可以为多种类型中的一种 只能访问联合类型内所有的类型里共有的属性或方法

var muchtype:string|number = 'hello';
muchtype = 10 

console.log(muchtype.length) // 报错
console.log(muthtype.toString())

ts 对象类型-接口

可描述类的一部分抽象行为，也可描述对象的形状结构

接口中可定义可选属性，任意属性，只读属性

// 定义接口 强约束
interface Istate {
 name:string
}
var abj1:Istate;
abj = {name :'张三'} // 必须有name  不然会报错

// 可选属性
interface Istate2 {
    name:string,
    age?:number  // 存疑 可有可无
}
var abj2:Istate2;
abj2 = { name:'李四'}

//属性个数不确定的时候  
interface Istate3 {
    name:string|number,   //可以使用联合属性
    age?:number,
    [propName:string]:any    //any必须是任意类型，不然会和上面的冲突
}
var obj3:Istate3 = {name:'张三'， age：10， sex:'男'，isMarry：true}


interface Istate {
    name:string,
    readonly age:number
}
var obi4:Istate = {name:'张三'，age:10}
obj4.name = '李四' //报错  一旦赋予初始值就不能进行更改了

ts 数组类型

// 数组表示方法
//类型 + 方括号
var arr:number [] = [1,2,3]
var arr2:string []=['1','2','3']
var arr3:any [] = [1,'2',true]

// 可采用数组泛型 Array< elemType > 表示法
var arrType:Array<number> = [1,2,3]
var arrType2:Array<string> = ['1','2']

// 可采用接口表示法
interface Istate {
    username:string,
    age:number
}

interface IArr {
    [index:number]:Istate
}
var arrType4:IArr = [{username:'张三'，age:10}]


var arrType5:array<Istate> = [{username:'张三'，age:10}]
var arrType6:Istate[] = [{username:'张三'，age:10}]

ts 函数类型

// 声明式函数
function funcType(name:string,age:number):number{
    return age
}
var ageNum:number = funcType('张三'，18)

// 函数参数不确定
function funcType2(name:string,age:number,sex?string):number {
    return age
}
var ageNum2:number = funcType ('张三'，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 gerValue(value:string):string;
function getValue(value:string|number):string|number {
    return value
}
var a:number = getValue(1)
var b:string = getValue('1')

ts 类型断言 可以手动指定一个值的类型 类型断言不是类型转换 只能断言联合类型中存在的类型

// let num:number|string = '10'
// num = 20
// console.log(num.length) // 报错


// 类型断言
function gerAssert(name:string|number){
    // return (<string>name).length
    return (name as string).length  // jsx 用这一种，不然 < 括号会冲突 
    
}

ts 类型别名 给一个类型起一个新的名字

// 类型别名
// var str:string|number = '10'

type strType = string|number;
var str:strType = '10';
str = 10

// 可以对于接口也采用类型别名
interface muchType1 {
    name:string
}
interface muchType2 {
    age:number
}
type muchType = muchType1 | muchType2
var obj1：muchType = {name:'张三'}
var obj2: muchType = {age:'10'}
var obj3: muchType = {name:'张三',age:'10'}


//限制字符串的选择
type sex = '男'|'女'
function getSex(s:sex):string {
    return s
}
getSex('男')

枚举 类型用于取值被限定在一定范围内的场景

枚举成员会被赋值为0开始递增的数字，同时也会被枚举值到枚举名进行反向映射

// 使用枚举可以定义一些有名字的数字常量
enum Days {
    // Sun = 3,
    Sun,
    Mon,
    Tue,
    Wed,
    Thu,
    Fri,
    Sat
}
console.log(Days.Sun) // 0
console.log(Days.Sat) // 6

console.log(Days) // 枚举类型会被编译成一个双向映射的对象
console.log(Days[0] === 'Sun') // true

ts 类的修饰符

public private protected

// 创建Person类
class Person {
    // private name = '张三'，
    name = '张三'，
    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 extends Person {
    callParent() {
        super.say()
    }
    static test（）{
        console.log('test')
    }
}

var c = new Child()
c.callParent()
console.log(c.age) // 子类继承了父类，子类就可以访问到父类的公开的属性或方法了
console.log(c.say())

console.lgo(Child.test()) // 类的静态方法里面，是不允许使用this的

ts 泛型

泛型是指在定义函数，接口或者类的时候，不预先指定具体类型，而在使用的时候再指定类型的一种特性

// 没有确切的定义返回值类型，运行的数组每一项都可以是任意类型
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:any):Array<T>{
    let arr = []
    for (var i = 0;i<length; i++) {
            arr[i] = value
    }
    return arr;
}
// var strArray:string[]= createArray<string>(1,'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:string [] = func ('张三'，'str')
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 213,014评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,796评论 3赞 386
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 158,484评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,830评论 1赞 285
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,946评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,114评论 1赞 292
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,182评论 3赞 412
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,927评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,369评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,678评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,832评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,533评论 4赞 335
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,166评论 3赞 317
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,885评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,128评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,659评论 2赞 362
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,738评论 2赞 351