• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

TypeScript学习笔记

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

与JS对比

优点:

1 ts是js的一个超集,兼容js,可以载入JS代码然后运行。

2 加入注释,让编译器理解所支持的对象和函数,编译器会移除注释,不会增加开销。

3 通过类型注解提供编译时的静态类型检查。

4 ts 最大的特点就是类型化,因此才叫做TypeScript。比起弱类型的js,类型化的TypeScript显得更加容易维护

 

语法特点:

1.声明变量类型

通过var关键字 变量名后面+冒号 + 数据类型来指定
var name: string = "bob";
var list: number[] = [1, 2, 3];
var name: string[] = ["阿龙","阿猫","阿狗"];
var arr:Array = [1,2,3,"a","b","c"]; // 任意类型数组
var list: any[] = [1, true, "free"];

2.enum

enum Color {
  Red,   //枚举元素列表
  Green,
  Blue
};
var c: Color = Color.Green;

3.函数

可选参数:在参数名后面,冒号前面添加一个问号,则表明该参数是可选的。
function buildName(firstName: string, lastName?: string) {}//lastName为可选参数
默认参数:在参数名后直接给定一个值,如果这个值没有被传入,那么将会被赋值为默认值。
function buildName(firstName: string, lastName = "Smith") {}

4.类

class 类名{
  name:string;  //定义类的属性
 
  fun(){ //定义了一个无返回值的方法
           //定义该方法所要实现的功能
  }
  say():string{ //定义返回值类型为string的方法
           //定义该方法所要实现的功能
         return "返回值"; // 用return关键字返回函数值
  }
}

5.接口

在TypeScript中,接口是用作约束作用的,在编译成JavaScript的时候,所有的接口都会被擦除掉,因为 JavaScript中并没有接口这一概念。TypeScript中接口是用关键字interface进行声明
interface LabelledValue { //定义接口
  label: string;          //定义属性
}
//在 TypeScript 中,我们可以使用接口来约束方法的签名。
interface SearchFunc {  
  (source: string, subString: string): boolean; //定义一个匿名方法
}
 
var mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {  //实现接口
  var result = source.search(subString);  //调用系统方法search查找字符串的位置
  if (result == -1) {
    return false;
  }
  else {
    return true;
  }
}
//约束数组类型
interface StringArray { //定义数组接口
  [index: number]: string;  //每个数组元素的类型
}
 
var myArray: StringArray; 
myArray = ["Bob", "Fred"];

//约束class类型
interface IPrint{
  print();
}
 
class A implements IPrint  { //实现接口
  print(){  //实现接口中的方法
      document.write("实现接口");
  }
}
 
var B=new A();  
B.print();
//接口继承
interface Shape {
    color: string;
}
 
interface PenStroke {
    penWidth: number;
}
 
interface Square extends Shape, PenStroke {
    sideLength: number;
}
//需要注意的是,尽管支持继承多个接口,但是如果继承的接口中,定义的同名属性的类型不同的话,是不能编译通过的。如下代码:
interface Shape {
    color: string;
    test: number;
}
 
interface PenStroke extends Shape{
    penWidth: number;
    test: string;
}

备注:

1 使用 ts 必须先编译,编译的结果是生成 js 文件,你可通过 TypeScript编译器 tsc 命令来完成这个过程。

2:不要将TypeScript看作是一门新的语言,它只是为了提升JavaScript代码质量的一个工具,最终TypeScript仍然要编译成JavaScript。

在线编译链接:http://www.typescriptlang.org/play/index.html


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap