TypeScript基本语法
TypeScript 是微软开发的 JavaScript 的超集，TypeScript兼容JavaScript，可以载入JavaScript代码然后运行。TypeScript与JavaScript相比进步的地方 包括：加入注释，让编译器理解所支持的对象和函数，编译器会移除注释，不会增加开销；增加一个完整的类结构，使之更新是传统的面向对象语言。
1、基本数据类型
Boolean
// Boolean
var isDone:boolean = false;Number
// Number
var width:number = 100;String
// String
var name:string = "hello"Array
// Array
var list:number[] = [1,2,3];
var Array<number> = [1,2,3];Enum
// enum Color {Red, Green, Blue}
var c: Color = Color.Red;
alert(c); //默认从零开始，alert(0);
// 可以手动设置指定值
enum Color1 {Red= 1, Green, Blue}
var c1: Color1 = Color1.Green;
alert(c1) // alert(2)
// 根据值查找名称
enum Color2 {Red= 1, Green= 2, Blue= 4}
var c2: String = Color2[4];
alert(c2); // alert(Blue)Any
// 不确定类型，退出编译检查
var notSure: any = 4;
notSure = "maybe a string instead";
console.log(notSure);
notSure = false;
console.log(notSure);
// 不确定数组元素类型
var anylist: any[] = [1, true, undefined]
console.log(anylist);
anylist[50] = 123;
console.log(anylist)Void
// 空白
function warnUser(): viod {
alert(123);
}类型断言
// 在使用JSX语法时，只有as断言语法是被允许的。
let someValue: string = "I'm string value";
// let strLength: number = (<string>someValue).length;
let strLength: number = (someValue as string).length;
console.log(strLength);类
基本语法
class Animal{
animalName: string;
constructor(name:string){
this.animalName = name
}
sayHello(){
alert(this.animalName + ": hello!")
}
}
var tom = new Animal("Tom");
tom.sayHello();继承
class Cat extends Animal {
// 重写sayHello方法
sayHello() {
console.log(this.animalName + "(Cat): " + "Hello")
}
}
class Mouse extends Animal {
sayHello() {
console.log(this.animalName + "(Mouse): " + "Hello")
}
}
var cat = new Cat("Tom");
cat.sayHello();
var mouse = new Mouse("Jerry");
mouse.sayHello();修饰符
如果学过强类型语言这里很好掌握
// public private static
class Animal {
public animalName: string;
constructor(name:string) {
this.animalName = name
}
sayHello() {
alert(this.animalName + ": hello!")
}
}set、get访问器
interface
function printLabel(labelObj: { label: string}) {
console.log(labelObj.label);
}
var myobj = {label: "33333"};
printLabel(myobj);
// 使用interface
interface LabelledValue {
label: string;
}
function printLabel(labelObj: LabelledValue) {
console.log(labelObj.label)
}
printLabel({label: "1234"});
类型检查器不会去检查属性的顺序，只要相应的属性存在并且类型也是对的就可以。
可选属性
接口里的属性不全都是必需的。 有些是只在某些条件下存在，或者根本不存在。 可选属性在应用“option bags”模式时很常用，即给函数传入的参数对象中只有部分属性赋值了。
interface SquareConfig {
color?: string;
width?: number
}
function createSquare(config: SquareConfig): {color: string, area: number} {
var newSquare = {color: "red", area: 100};
if(config.color) {
newSquare.color = config.color
}
if(config.width) {
newSquare.area = config.width * config.width
}
return newSquare
}
var mySquare = createSquare({color: "black"});函数类型
接口能够描述JavaScript中对象拥有的各种各样的外形。 除了描述带有属性的普通对象外，接口也可以描述函数类型。
为了使用接口表示函数类型，我们需要给接口定义一个调用签名。 它就像是一个只有参数列表和返回值类型的函数定义。参数列表里的每个参数都需要名字和类型。
interface SearchFuc {
(source: string, subString: string): boolean
}
var mySearch: SearchFunc = function(src, sub) {
var result = src.search(sub);
if (result == -1) {
return false;
}
else {
return true;
}
}
console.log(mySearch("123","123"));
数组类型
与使用接口描述函数类型差不多，我们也可以描述数组类型。 数组类型具有一个index类型表示索引的类型，还有一个相应的返回值类型表示通过索引得到的元素的类型。
interface StringArray {
[index: number]: string | number
}
var myArray: StringArray = ["1", "2", 9];
console.log(myArray);支持两种索引类型：string和number。 数组可以同时使用这两种索引类型，但是有一个限制，数字索引返回值的类型必须是字符串索引返回值的类型的子类型。
索引签名能够很好的描述数组和dictionary模式，它们也要求所有属性要与返回值类型相匹配。 因为字符串索引表明obj.property和obj[“property”]两种形式都可以。 下面的例子里，name的类型与字符串索引类型不匹配，所以类型检查器给出一个错误提示：
interface NumberDictionary {
[index: string]: number;
length: number; // 可以，length是number类型
name: string // 错误，`name`的类型不是索引类型的子类型
}
