TS入门

一、ts字符串新特性:

1.多行字符串:

 es5里直接换行会报错,必须加上+号 ,如var content = 'aaa'+

'bbb'+

'ccc'

但es6双撇号``可以不用加上加号也能换行:var content = `aaa

bbb

ccc`

2.字符串模板


语法:`${变量或函数}`,比es5的字符串拼接要方便

3.自动拆分字符串

function test(template, name, age) {

    console.log(template);

    console.log(name);

    console.log(age);

}

var name = 'forrest';

var getAge = function (){

    return 18;

}

test`hello,my name is ${name},i'm ${getAge()} years old.` 


使用字符串模板运行test方法,注意格式,注意结果参数

二、参数新特性

1.参数类型

参数名称后面用冒号来指定参数类型,函数后面的声明类型表示返回值类型,:void表示没有返回值,如果写return会报错


2.默认参数

在参数声明后面用等号来指定参数默认值

带默认值的参数一定要声明在最后面,否则报错


3.可选参数

在方法的参数声明后面用问号来标明此参数为可选参数

可选参数必须声明在必选参数的后面,否则报错

function test(a:string,b?:string,c:string='lxc') { 

        console.log(a) 

        console.log(b)

        console.log(c)

}

test('a')

输出

a

undefined

lxc

不能写成function test(a?:string,b:string,c:string='lxc')

三、函数新特性

1.Rest and Spread操作符

用来声明任意数量的方法参数

反过来传:


2.generator函数

控制函数的执行过程,手工暂停和恢复代码执行


第一个next执行到第一个yield前面,只有再调用next方法才会往下走


yield xxx在调用next方法会返回一个对象{value:xxx,done:true/false},done表示是否执行完了。

3.destructuring析构(解构?)表达式

通过表达式将对象或数组拆解成任意数量的变量


四、表达式和循环

1.箭头表达式

用来声明匿名函数,消除传统匿名函数的this指针问题

比较以下几种情况:

function getSocktet(name) {

    this.name = name;

    setTimeout( () => {

        console.log(this);     // this指向实例化后的对象,this.name为IBM

    },1000);

}

var stock = new getSocktet("IBM");

function getSocktet(name) {

    this.name = name;

    setTimeout( function() {

        console.log(this);     // this指向全局,this.name为undefined

    },1000);

}

var stock = new getSocktet("IBM");

function getSocktet(name) {

    this.name = name;

    setTimeout(() => {

        console.log(this); 

    },1000);

}

var stock = getSocktet("IBM"); // 没有使用new,无论是否为箭头函数 ,this都指向window,this.name等于IBM(window也有name属性)

2.forEach(),for in,for of

myArray = [1,2,3,4];

myArray.desc = 'test';

myArray.forEach(value => {console.log(value)})    // 1,2,3,4  不能循环属性的值

for( n in myArray) {console.log(n)} // 0,1,2,3,desc 循环的是key,可以循环属性名

for( n in myArray) {console.log(myArray[n])}  // 1,2,3,4,test 循环的是value,可以循环属性值

for( n of myArray) {console.log(n)}  // 1,2,3,4 循环的是value,不能循环属性值 

for of 根据某个条件可以终止循环(break),其余两者均不能终止。

五、面向对象特性

1.类(class)

类是ts核心,使用ts开发时,大部分代码是写在类里

constructor是构造函数方法,只会在类被实例化的时候调用一次

class Person {

    constructor(public name:string) {  // 相当于直接声明了一个name属性,实例化时必须指定name属性,注意此处访问控制符不能省略

        console.log(1);

    }

    eat() {

        console.log("eating");

    }

}

class Employee extends Person {

    constructor(name:string,code:string) {

        super(name); // 子类定义自己的构造函数必须先调用父类的构造函数

        console.log(2);

        this.code = code;

    }

    code : string;

    work() {

        super.eat(); // 调用父类方法

        this.doWork();

    }

    private doWork(){

        console.log("working");

       }

}

var a = new Person("batman")

var e1 = new Employee("spiderman","123")   // 1 2

e1.eat() // eating working

e1.work() //报错 类外不能调用,访问控制符可以保证顺序,先吃饭再干活

2.泛型(generic)

参数化的类型,一般用来限制集合的内容

var workers:Array<Person> = [];   // 尖括号表示泛型,表明workers的数组里的值只能是Person类型

workers[0] = new Person("张三")

workers[1] = new Employee("lisi","test")

workers[2] = 'xxx'   // 报错

3.接口(Interface)

用来建立某种代码规定,使得其他开发者在调用某个方法或创建新的类时必须遵循接口所定义的代码约定

第一种用法:用于类的构造函数中参数的类型声明,实例化对象的时候传的参数类型必须和接口相同


第二种用法:在类中实现接口中声明的方法

4.模块(module)

模块可以帮助开发者将代码分割为可重用的单元。开发者可以自己决定将模块中的哪些资源(类、方法、变量)暴露出去供外部使用,哪些资源只在模块内使用


5.注解(annotation)

注解不是注释,注解为程序的元素(类、方法、变量)加上更直观更明了的说明,这些说明信息与程序的业务逻辑无关,而是供指定的框架或工具使用的

6.类型定义文件(*.d.ts)

类型定义文件用来帮助开发者在ts中使用已有的js工具包 如:jquery

下载JQuery类型定义文件:https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/jquery/jquery.d.ts

一个专门安装类型定义文件的工具 github地址:https://github.com/typings/typings

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

推荐阅读更多精彩内容

  • 慕课网@JoJozhai 老师 TypeScript入门课程分享 TypeScript入门 ES5,ES6,JS,...
    shangpudxd阅读 10,414评论 0 22
  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些阅读 2,027评论 0 2
  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 2,053评论 1 10
  • pyspark.sql模块 模块上下文 Spark SQL和DataFrames的重要类: pyspark.sql...
    mpro阅读 9,442评论 0 13
  • Lua 5.1 参考手册 by Roberto Ierusalimschy, Luiz Henrique de F...
    苏黎九歌阅读 13,727评论 0 38