TypeScript-学习笔记

• 官网 http://www.typescriptlang.org/
• 中文 https://www.tslang.cn/
• gitBook https://www.gitbook.com/book/xcatliu/typescript-tutorial/details
  1 认识
• 2012年10月由微软开发的开源编程语言,
• 是script的超集(静态类型和基于类的面向对象编程)
• 强类型语言,但是会在编译器去掉类型和特有的语法,使其成为纯JavaScript代码(不用考虑兼容性问题)

2 优势

• 高度兼容原生语法
• 自身提供了不少现成编辑器的集成，
• 对语法破坏性小,方便上手
• 增加了类型检查，便于代码的开发和维护

3 对比javascript

• 除JavaScript的基本数据类型外,添加了枚举类型
• 声明变量方式是采用了最新语法 let 和 const
• 会对结构类型进行检查
• 使用面向对象方式来对类的定义
• 对函数的进行了拓展(对函数定义了类型)
• 添加了枚举(定义一个列表,取值范围为列表中所定义的值)

private.png

内置类型

1 布尔值(Boolean)

let isDone:boolean = false;

2 数组(Array)

• 数组有两种定义方式

①
let  list:number[] = [1,2,3];
②
let list:Array<numebr> = [1,2,3]

3 字符串(String)

• javascript的基本操作就是处理网页或者服务器端的文本数据,同时在typescript中,string表示文本数据类型,使用双引号和单引号都可以表示字符串

let name:string = 'string';
name = 'hello'

• 同时也可以使用模板字符串,可以定义多行文本和内嵌表达式,使用反引号进行包围,然后用${expr}嵌入表达式

let name:string = `Gene`;
let age:number = 37
let sentence:string = `hello,my name is ${ name }`

4 数字(Number)

typescript和JavaScript一样,都是使用浮点数,其类型都是number,同时字符,十进制,十六进制,八进制,二进制

let hexLiteral:numebr = 100;

5 元组(Tuple)

• 类似数组的加强版,是同时规定数组中的不同索引值的数据类型,
• 访问一个已经越线的元素时候,也会得到一个正确的类型(联合型替代)

let userArray:numebr[] = [1,2,3];//平常的数组

//ok
let tupleArray:[string,number];
tupleArray[0] ='hello';
tupleArray[1] = 123;

//error
tupleArray[0] = 123
tupleArray[1] = 'haha'

6 枚举(enum)

• 为一组数值赋予友好的名字,在不同的语言下,通俗易懂
• 通过值来确定名字
• 通过枚举的值来得到我们不知道的名字

enum Color = { red, yello , blue, gray}
let c:Color = Color.yello;
**默认情况下,从零为元素开始编号,也可手动的指定成员的数值,
enum Color = { red=1, yello=2 , blue, gray}
let c:Color = Color.yello;
**通过枚举的值来取得名字
enum Color = {red,yello,blue,gray};
let colorName:string = Color[2];//blue(默认从零开始编号)

7 Any(在不确定的数据类型)

• 某些不知道的数据类型,但是要让其通过编译阶段的检查

8 void(与Any数据类型相反)

• 表示没有任何类型,类似于函数没有返回值
• 实用性不大,但是可以为其赋值undefined和null

let unusable : void = undefined;

9 类
ES5是基于原型的面向对象设计，设计模式不使用类，而是依赖于原型，
ES6使用class关键字来定义一个类，

class vehicle {
  name:string;
  age:number;
  sex:string;
}
//类中包含属性，方法和构造器

构造函数

** 构造函数是类进行实例化执行的特殊函数，通常会在构造函数中对新对象进行初始化，构造函数命名必须为constructor，因为构造函数是在类被实例化时调用的

class Vehicle{
 }
var v = new Vehicle();
      ||
class Vehicle{
  constructor(){
  }
}
var v = new Vehicle();