TypeScript

变量声明：

var [变量名] : [类型] = 值;

基本类型

let binaryLiteral: number = 0b1010; // 二进制
let octalLiteral: number = 0o744;    // 八进制
let decLiteral: number = 6;    // 十进制
let hexLiteral: number = 0xf00d;    // 十六进制

let name: string = "Runoob";
let years: number = 5;
let words: string = `您好，今年是 ${ name } 发布 ${ years + 1} 周年`;

let flag: boolean = true;

// 在元素类型后面加上[]
let arr: number[] = [1, 2];// 或者使用数组泛型
let arr: Array = [1, 2];

let x: [string, number];
x = ['Runoob', 1];    // 运行正常
x = [1, 'Runoob'];    // 报错
console.log(x[0]);    // 输出 Runoob

enum Color {Red, Green, Blue};
let c: Color = Color.Blue;
console.log(c);    // 输出 2

function hello(): void {alert("Hello Runoob");
}

变量调用时后缀感叹号和问号的区别:

console.log("Hello, " + x!.toUpperCase());
console.log("Hello, " + x?.toUpperCase());
后缀是!，只是告诉typescript编译器对于null和undefined不做显示的检查，生成的js文件中还是x.toUpperCase()，如果此时x为null，那么就会出现运行时异常
后缀是?，代表是一个空判断，只有非空是，才会执行x.toUpperCase()，生成的js文件中是增加了null或者undefined判断的，生成的js是(x === null || x === void 0 ? void 0 : x.toUpperCase())

Angular 模板驱动表单

模板驱动表单依赖模板中的指令来创建和操作底层的对象模型，它们对于向应用添加一个简单的表单非常有用。模板驱动的表单是我们实例化好一个类的数据之后，在html中使用 NgForm 指令后将数据和表单进行绑定,使用[(ngModel)]来将表单的数据和和视图进行双向绑定，NgForm 指令为 form 增补了一些额外特性。 它会控制那些带有 ngModel 指令和 name 属性的元素，监听他们的属性。添加校验时要是用指令的方式，适合固定的输入表单。

Hero Power{{power}}

Angular 响应式表单

响应式表单提供了一种模型驱动的方式来处理表单的输入。我们可以很方便的控制表单项的状态和验证器。

使用  angular/forms 库中的 FormGroup， FormControl，FormArray，FormBuilder 等类构建出的数据对象就是响应式的表单, 在响应式的表单中，我们会在数据源里面进行各种操作，像添加校验等，在html文件中使用 formGroup,formGroupName,formControlName等将数据和视图进行绑定(需要引入ReactiveFormsModule)。

要想模块中使用响应式表单，需要三步：

1. 在应用模块中注册响应式表单模块。该模块声明了响应式表单的指令。
2. 在组件中生成新的FormControl实例，确保可以在组件和组件的模板中访问到。
3. 在模板中应用这个FormControl。

FormControl
     是构成表单的基本单位，通常情况下用来代表一个 input 元素，也可以代表更复杂的UI组件，比如日历、下拉选择框。FormControl保存着与其关联的html元素当前的值、元素的校验状态以及元素是否被修改过等信息

FromGroup
     既可以代表表单的一部分，也可以代表整个表单，是多个FormControl的集合，将多个FormControl的值和状态聚合在一起，如果其中一个formcontrol是无效的，那整个FromGroup就是无效的

FormArray
     FormArray和FromGroup类似，但是他有一个长度属性，一般来说FormGroup用来代表整个表单，或者表单字段的固定子集(比如一个FromGroup里有两个FormControl分别是起始时间和结束时间); FormArray通常代表一个可以增长的字段集合，比如表单中有一个email字段，一个用户可能有多个Email，所以我们可以让用户输入任意多个email字段。

在组件中使用FormControl

export class ReactiveFormComponent implements OnInit {userName: FormControl = new FormControl('Jon');// FormGroup的构造函数是个对象formModel: FormGroup = new FormGroup({startTime: new FormControl()，endTime: new  FormControl())};emails: FormArray = new FormArray([ // FormArray的构造函数是个数组，数组的每个元素是FormControl，与FormGroup不同的是，FormArray中的FormControl是没有相关的key的，通过数组下标来访问；new FormControl('258137@qq.com')   new FormControl('539451@qq.com')   ]);

 在模板中应用该控件

formControl不能用在formGroup指令的内部，
单独和input框绑定起来;若想把userName属性放进表单中来，就要把input框放进form元素标签内，并且用formControlName属性绑定。

formGroupName指令的值是个字符串，所以直接写个属性名就可以
起始日期:结束日期:
增加Email

保存

获得表单控件的值

有两种方式获得FormControl的值：

• 可观察对象valueChanges。可以在模板中使用AsyncPipe或者在组件类中订阅来监听表单的值。
• 使用value属性。可以获得控件的当前值的一份快照。

首先我们在模板中来获取值：

name 的快照值为：{{name.value}}
name 实时监听值: {{name.valueChanges | async}}

在组件类中以订阅的方式获得控件值变更的方式：

this.name.valueChanges.subscribe(res => {console.log(res);
});

更新表单控件的值

FormControl提供了setValue方法，可以在组件类中动态修改控件的值，而不依赖交互的输入。

使用setValue修改name的值：

pdateName() {this.name.setValue('tony');
}

禁用/解除禁用表单控件

一般做法是直接在模板上给表单控件加上disabled属性。这个在模板驱动表单的时候是可以的，但是在使用响应式表单的时候直接加disabled并不会生效。

我们可以这样在初始化的时候赋值和禁用表单控件：

export class LoginComponent {name: FormControl = new FormControl({value: 'tony',disabled: true,});
}

当然，这个禁用是禁用交互输入，在组件类中使用setValue还是可以变更值的。

不仅仅是在初始化的时候禁用，我们可以在初始化之后，通过FormControl的disable函数来动态禁用：

ngOnInit() {this.name.disable();
}

解除禁用

enableName() {this.name.enable();
}

组件通信

父传子 @input（可以传值不传方法）

父组件

export class FatherComponent implements OnInit {public msg = '父组件的消息'
}

子组件

export class SonComponent implements OnInit {@Input() userInfo: string
}

子传父 @Output（子组件调用父组件方法，调用的时候子可以传值给父组件）

子组件

export class SonComponent implements OnInit {@Output() reback = new EventEmitter();self() {// 调用的时候可以把值传给父组件this.reback.emit(this.info)}}

父组件

export class FatherComponent implements OnInit {receiveInfo(info) {// 与绑定的函数一致，info接收传值console.log(info)}}

子传父 @ViewChild

1. 在子组件引用标签上
2. 在父组件class内部，利用属性装饰器ViewChild，和刚才的子组件关联起来

@ViewChild('formListInstance')  
formListInstance: any;
// 然后就可以通过this.formListInstance获取这个子组件了getSonData() {console.log(this.formListInstance.info)
}