- 官网 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();
网友评论