TypeScript 摘要

1. 类型声明

Undefined :

Number:数值类型;

string : 字符串类型;

Boolean: 布尔类型;

enum:枚举类型;

any : 任意类型,一个牛X的类型;

void:空类型;

Array : 数组类型;

Tuple : 元祖类型;

Null :空类型。

never类型

提问:在哪种情况下我们应该去使用枚举类型?

这种变量的结果是固定的几个数据时,就是我们使用枚举类型的最好时机:

例如:

enum People{man,woman,hermaphrodite}  

console.log(People.woman) //返回了2,这是索引index,跟数组很像。

enum People{nan ='男', woman='女', hermaphrodite='人妖'}console.log(People.hermaphrodite) //返回了人妖 这个字

使用 void:

基本都是在使用函数方法时使用:


function  searchXiaoJieJie (age:number): string {

return'找到了'+age+'岁的小姐姐'(此时是string)

如果换成 console.log(" '找到了'+age+'岁的小姐姐' ")

 string 需要换成viod

}

var age:number=18

var result:string= searchXiaoJieJie(age)

console.log(result)

参数传递:

在函数调用的时候,我们需要按照形参的规则传递实参,有几个形参就要传递几个实参,并且每一个实参的类型要与对应的形参类型一致。

不过typescript更为灵活 

规定了 可选形参、默认形参、剩余参数形参等。

可选参数:

function searchXiaoJieJie2(age:number,stature?:string):string{

let  yy:string ='' 

yy ='找到了'+age+'岁'

if(stature !=undefined){

 yy = yy + stature 

 } 

return yy+'的小姐姐'

}

var result:string= searchXiaoJieJie2(22,'大长腿')

console.log(result)

默认参数:

function searchXiaoJieJie2 (age:number=18,stature:string='大胸'):string

剩余参数:functionsearchXiaoJieJie3(...xuqiu:string[ ]):string{

searchXiaoJieJie3('22岁','大长腿','瓜子脸','水蛇腰')

数组用法:

//定义一个数组时,直接给数组赋值 let  arr2:number[ ] = [1,2,3,4,5]

// 定义一个 字符串的数组  let arr3:Array< string> = ['jspang','技术胖','金三胖']

//定义一个对象的数组 let arr4: {id: number,name: string }[ ] = [ {"id":0,"name":"Available"}, {"id":1,"name":"Ready"}, {"id":2,"name":"Started"}];

// 联合定义:

// 元祖  很少使用

对于Object的声明:

1.我们在跟后台对接的时候data 建议采用接口的形式:

2:接口该注意什么


2. 可选属性

Class :

class  Person {

name:string;//实例属性

age:number;//实例属性

//构造函数

constructor (name,age){

this.name=name;

this.age=age;

    }

//实例方法

    sayHi(){

return"hi,我的姓名是:"+this.name+",我年龄是:"+this.age;

    }

//静态方法

static  hello(){

console.log("hello!!");

    }

//静态属性

static  PI:number=Math.PI;

//静态方法中可以返回静态属性,,静态成员只能使用类名.静态成员的方式进行访问。

static  area(r:number){

     return  Person.PI * r*r;

    }

}

//计算r为3的圆的面积 ,调用静态方法不需要new实例对象,直接用类名.静态方法调用即可。

console.log(Person.area(3));//28.274333882308138

// new 对象

var  p = new Person("张三",22);

//调用对象的(实例)方法

console.log( p.sayHi());

// 继承

class Student  extends  Person {

score:number; //学生成绩,新的成员属性

constructor(name,age,score){

//子类调用父类构造函数进行初始化

super(name,age);

   this.score=score;

    }

//子类重写(覆盖)父类中的方法

    sayHi( ){

    return"hi,我的姓名是:"+this.name+",我年龄是:"+this.age+",我的成绩是:"+this.score;

    }

//子类中扩展的方法

    study(){

return this.name+"在学习";

    }

}

var  stu=new Student("李四",24,90);

console.log(stu.sayHi());

console.log(stu.study());

/*

抽象类 

abstract class Person {

 protected name: string;

 constructor(name: string) { 

 this.name = name; 

 }

abstract toString( ): string;

}

    // 子类必须实现该方法 


class Men extends Person {

 toString( ): string { 

 return `I am a men, my name is ${this.name}`; 

 }

}

class Women extends Person {   

 toString(): string {     

   return `I am a women, my name is ${this.name}`;  

  }

}

关于类中成员访问修饰符:

ts类中成员(成员属性、成员方法)的访问修饰符,类似于java中类成员的访问修饰符,不同的是ts中默认是被public修饰。

public :公有          在当前类里面、 子类  、类外面都可以访问

protected:保护类型    在当前类里面、子类里面可以访问 ,在类外部没法访问

private :私有        在当前类里面可以访问,子类、类外部都没法访问

属性如果不加修饰符 默认就是公有(public)

6 泛型

/**

*/

1 .泛型函数

/*假如我们有个方法  需要返回传进去的参数 */

// function returnVal(x: number): number {

//    return x;

// }

// returnVal(1);//不使用泛型的话这里只能传进去number类型

/*这里使用any虽然可以传进去任何类型的值 但是无法保证返回值就是传进去的参数值*/

// function returnVal(x: any): any {

//    return "" + x;

// }

//

// returnVal(1);

/*这里使用泛型  不仅可以传任何类型的值  也能保证返回值类型的正确性  而且代码可以复用*/

function returnVal<T>(x: T): T {

    return x;

}

returnVal<number>(1);

returnVal("1");

returnVal(true);

2.泛型接口


interface GenericIdentityFn {

    <T>(arg: T): T;

}

function identity<T>(arg: T): T {

    return arg;

}

let myIdentity: GenericIdentityFn = identity;

myIdentity(2)

我们可能想把泛型参数当作整个接口的一个参数。 这样我们就能清楚的知道使用的具体是哪个泛型类型。

interface GenericIdentityFn<T> {

    (arg: T): T;

}

function identity<T>(arg: T): T {

    return arg;

}

let myIdentity: GenericIdentityFn<number> = identity;

GenericIdentityFn(2)

3.泛型类

class Person<T> {

  love: T;

  say: (arg: T) => T;

}

let me = new Person<string>( );

me.love = 'TS';

// me.love = 520; // ERROR

me.say = function(love: string){

  return `my love is ${love}`;

}

console.log(me.say('TS')); // my love is TS


类有两部分,分为静态部分和实例部分,泛型类的类型指的是实例部分的类型,静态属性不能使用该泛型类型。


4.泛型约束


interface IArray {

length:number

}

function logIndex<T extends IArray>(arg: T): void {

for(leti =0; i < arg.length; ++i) {

console.log(i)

  }

}

let arr = [1,2,3]

// logIndex<string>(arr) // 报错

logIndex<number[ ]>(arr) // 允许

logIndex(arr)// 自动类型推导,允许

7. TS引用类型拓展

日期对象: let d:Date=new Date()


 正则对象:let reg3:RegExp=/jspang/


8.命名空间

在制作大型应用的时候,为了让程序更加有层次感和变量之间不互相干扰,我们可以使用命名空间来构建程序。

namespace shuaiGe{ 

      export class  Dehua{

           public  name:string='刘德华'talk(){

                 console.log('我是帅哥刘德华')

                    }

           }

  }

let  dehua1:shuaiGe.Dehua =newshuaiGe.Dehua()

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,830评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,992评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,875评论 0 331
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,837评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,734评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,091评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,550评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,217评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,368评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,298评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,350评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,027评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,623评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,706评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,940评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,349评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,936评论 2 341

推荐阅读更多精彩内容

  • 个人看视频整理出来的笔记,如果对你没有帮助,请关掉页面 js和ts的区别:js实现了ES5 规范;ts实现了ES6...
    没心x阅读 118评论 0 1
  • TypeScript简介: 微软开发 javascript的超集 遵循ES6脚本语言的规范 添加了遵循ES6的语...
    咖啡浮点阅读 821评论 0 3
  • 数据类型基本数据类型(undefined和null可以赋值给任何基础类型) let str: string = '...
    xinmin阅读 241评论 0 1
  • TypeScript最大的好处是引入了静态类型检查,可减少书写错误。 安装采用Node的包管理工具npm:npm ...
    gadfly1981阅读 7,565评论 0 2
  • 久违的晴天,家长会。 家长大会开好到教室时,离放学已经没多少时间了。班主任说已经安排了三个家长分享经验。 放学铃声...
    飘雪儿5阅读 7,458评论 16 22