typescript 入门

2019-07-05  本文已影响0人  没心x

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


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。

上一篇下一篇

猜你喜欢

热点阅读