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。