typescript 入门

个人看视频整理出来的笔记,如果对你没有帮助,请关掉页面


js 和 ts 的区别:js实现了ES5 规范; ts实现了ES6 规范。

ts 的好处:(1)允许 为变量设置类型,像java一样 ;(2)安装开发环境,IDE语法提示; (3) 重构:很方便去修改变量名、文件名,假如 有三处 引入 了 index 变量名,只需要修改 最一处, 其余自动修改; (4)ts是 Augular2 的开发 语言, 微软公司维护,意味着有更好的支持

安装工具:

安装 compiler:    sudo npm install -g typescript 

查看版本:  tsc --version

Webstorm自动编译 TypeScript设置:(安装完 自动编译工具, 就可以省略了 tsc Hello.ts 命令)


先补充部分ES6 知识 :

字符串类:

function test(template, name, age) {console.log(template, name, age);}

var myname = " xiangfei";

var getAge = function () { return 23;}

test`${myname} ,my age is ${getAge()}`  * test 模版调用不要 加括号。

原理:是整个 模版会根据参数 ,切成个 对应数量的数组,放到方法的第一个参数里去

arr[0] = 第一个表达式之前的字符串 =" "

arr[1] =  第一个表达式和第二个表达式之间的字符串 = ",age is"

arr[2] =  第二个表达式 和最后的表达式的字符串 =" "

参数类型: 在参数名称后面使用冒号来指定参数的类型

var name :string = "xiangfei ";

name = 13 ;  // 浏览器提示标红:类型不对,但是编译以后的js 可以正常执行, 因为js 没有 强制 指定变量类型 一说。

参数类型:string、any(可以对变量设置任意类型的值 )、number、boolean、Array、void、Enum(num类型是为了给一个数字集合更友好地命名)

声明函数返回值的 

function test():void{} // 说明test 函数不需要 返回值,如果返回会报错

function test():string{}  //return "" 

给函数参数变量声明:

function test(name:string):string{ return ""}

test("12");  // 参数只能是字符串

自定义 声明类型

class Person {

name:string,

age:number

}

var zhangsan:Person = new Person();

zhangsan.age  =12; 

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

function test(a :string="jojo"){}

可选参数:在方法的参数声明后面用问号来标明此参数为可选参数(需要注意的是 ,一个必须填的参数 不能在可选的参数后面)

function test(a :string,b?:string,c:string="jojx"){}

? 对应的参数可不传, 调用test('33');   = a的参数


函数新特性

Rest and Spread 操作符:用来声明任意数量的方法参数

function fun(...arg){

args.forEach(function(arg){

console.log(arg)

})

}

...arg 实际上是个数组,可以传任意数量

fun(1,2,3);

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

yeild 就像一个断点一样,随时刹车。随时开车。

这个特性ts 暂时不支持,可通过babel 编辑器查看效果

function* dor(){

console.log(“start“);

yield;

console.log(“finsh");

}

var func = dor(); 

func.next(); // 程序到这才会 被调起,会逐步停在 yield 的位置,执行yield 之前的代码。

// yield Math.random()*100 // 停住并返回 一个0-100 的随机数

func.next().value() ;  // 获取 yield  返回回来的值

应用场景,可以作为 循环的边界条件限制 。

比如 while(true) 的时候, 每循环一次,就停住了。更容易控制代码的暂停和继续执行


懒得手打


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

function strock(){

return {

code :'ibm',

p:{preice1:200}

}

var {code ,p:{preice1}} =  strock();

console.log(code ,preice1);

箭头表达式:用来声明匿名函数,消除传统匿名函数的this指针问题 .  

var arr = [1,2,3];

console.log(arr.filter(value=>value %2 ==0));

 for of 和for in 唯一一点不同的地方, for of 可以 被break 打断



面向对象特性:

类是ts 的可信,使用ts开发,大部分代码都是写在类里面的。

class Per {

constructor(public name: string) {} // 此处也声明了 name

public name; //默认的,公开属性

private age; // 私有的,只有在类的内部可以访问

protected haha; //受保护的,可以在内部 和类的子类可以访问

eat(){}

}

new Per("haha");


class Yee extends Per{

    constructor(name:string,code:string){

        super(name); //super 有两个用法,

                        第一个是调父类的函数, 如果实例化 Yee 的时候,子类的构造函数,必须调用父类的构造函数,硬性规定。

                        第二个 调父类的其他方法, super.eat

    }

 } // 继承了Per , 就拥有了Per 所有的属性和方法

泛型(generic)

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

var workes: Array<Per> = [];

workes[0] = new Per("ceshi");

console.log(workes)

// Per 就是Array 的泛型,规定了这个数组 只能放Per的数据,也可以放Per 的子类

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

两个方法:

Interface :声明一个接口

implements :用来声明某一个类,实现了某一个接口

interface IPerson {

name: string,

age: number

eat();

}

class Person {

constructor(public config: IPerson){

    //constructor 方法的 config 参数的 IPerson 类型声明

}

}

var p1 = new Person({ name: 'zs', age: 18})

//实例化Person 的时候, 如果多传或者少传一个参数,或传入不符合接口声明的 ,都会 报错,按照接口规定来 传参

如果接口声明 定义


interface IPerson {

    eat();

}

class Person implements IPerson{

        eat( console.log(111)  )

}

// 泛型里声明了,那implements 泛型的class 里都要 调用一次这个方法

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

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


类型定义文件用来帮助开发者在t s 中使用已有的js 的工具包 ,比如 模块方式的 报漏的jquery。 文件名:*.d.ts

去ts 的github 里下载jquery。

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

推荐阅读更多精彩内容

  • 慕课网@JoJozhai 老师 TypeScript入门课程分享 TypeScript入门 ES5,ES6,JS,...
    shangpudxd阅读 10,421评论 0 22
  • TypeScript简介: 微软开发 javascript的超集 遵循ES6脚本语言的规范 添加了遵循ES6的语...
    咖啡浮点阅读 835评论 0 3
  • pyspark.sql模块 模块上下文 Spark SQL和DataFrames的重要类: pyspark.sql...
    mpro阅读 9,448评论 0 13
  • 关于TypeScript TypeScript是JavaScript的超集,主要提供类型系统和对ES6的支持,由M...
    kim_jin阅读 735评论 0 1
  • 概述 TypeScript本质上是向JavaScript语言添加了可选的静态类型和基于类的面向对象编程,同时也支持...
    oWSQo阅读 8,505评论 1 45