学习typescript

1、typescript配置自动编译
（1）tsc --init生成tsconfig.json，修改"outDir": “./js”
（2）运行任务监视tsconfig.json
补：vscode系统禁止运行脚本解决：
a：以管理员身份运行vscode
b：执行get-ExecutionPolicy
c：执行set-ExecutionPolicy RemoteSigned
2、数据类型
typescript使代码更加规范，更有利于类型校验，提供了以下类型
布尔类型 boolean
数字类型 number
符串类型 string
数组类型 Array
元祖类型 tuple
枚举类型 enum
任意类型 any
null和undefined
void类型
never类型
（1）布尔值boolean
let isDone: boolean = false;
（2）数字number
let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
（3）字符串string
let name: string = “bob”;
let sentence: string = Hello, my name is ${ name }.;
（4）数组array
let list: number[] = [1, 2, 3];
let list: Array = [“1”, “2”, “3”]
（5）元组tuple（数组的一种）
let x: [string,number] = [“hello”, 10]
（6）枚举enum（枚举类型若不赋值，默认值为下标，也可以进行赋值去改变下标）
enum Color {Red, Green, Blue}
let c: Color = Color.Green; // 1
enum Color {Red = 1, Green = 2, Blue = 4}
let c: Color = Color.Green; // 2
（7）任意any
let notSure: any = 4;
notSure = “maybe a string instead”;
notSure = false;
let list: any[] = [1, true, “free”];
list[1] = 100;
（8）null和undefined
let u: undefined = undefined;
let n: null = null;
let num: number | undefined
（9）void类型（表示没有任意类型，一般用于定义方法的时候没有返回值）
function warnUser(): void {
console.log(“This is my warning message”);
}
// 声明void类型变量没有意义，只能赋予undefined和null
let unusable: void = undefined;
（10）never类型（表示的是那些永不存在的值的类型）
let a: never;
a = (() => {
throw new Error(“错误”)
})()
3、函数
（1）没有返回值
function warnUser(): void {
console.log(“This is my warning message”);
}
（2）有返回值
let fun = function(): number{
return 123;
}
（3）传参
function getInfo(name: string, age: number): string{
return ${name} --- ${age}
}
（4）可选参数
function buildName(firstName: string, lastName?: string): string {
if (lastName)
return firstName + " " + lastName;
else
return firstName;
}
（5）默认参数
function buildName(firstName: string, lastName = “Smith”) {
return firstName + " " + lastName;
}
（6）剩余参数…
function buildName(firstName: string, …rest: string[]) {
return firstName + " " + rest.join(" ");
}
（7）函数重载
function getInfo(name: string): string;
function getInfo(age: number): number;
function getInfo(str: any):any{
if(typeof str === “string”){
return “我叫：” + str
}else
return “我的年龄：” + str
}
（8）箭头函数 es6（this指向上下文）
4、类
（1）es5最简单的类
function Person(name,age){
this.name = “张三”;
this.age = 20;
this.run = function(){ // 实例方法
alert(this.name + “在运动”)
}
}
var p = new Person();
（2）构造函数和原型链里面增加方法
Person.prototype.sex = “男”
Person.prototype.work = function(){ alert(this.name + “在工作”) }
（3）添加静态方法
Person.getInfo = function(){
alert(“我是静态方法”)
}
Person.getInfo(); // 调用
（4）构造函数继承
function web(){
Person.call(this) // 对象冒充实现继承
}
var w = new Web();
w.run(); // 可执行，对象冒充可继承构造函数里面的属性和方法
w.work(); // 不执行，无法继承原型链上面的属性和方法
（5）原型链继承
function web(name,age){}
web.prototype = new Person()
可以继承构造函数里面的属性和方法，也可以继承原型链上面的方法
但是实例化子类的时候没法给父类传参
（6）原型链+构造函数
function web(name,age){
Person.call(this,name,age)
}
Web.prototype = new Person(); 或者 Web.prototype = Person.prototype;
var w = new web(“赵四”,20);
w.run()
（7）es6中class继承
class Person{
name: string;
constructor(n:string){
this.name = n;
}
}
run(): void{
alert(this.name)
}
var p = new Person(“张三”)
p.run()
// extends和super
class Web extends Person{
constructor(name:string){
super(name); //初始化父类的构造函数
}
}
var w = new Web(“李四”)
（8）类里面的修饰符
public：共有 在类里面、子类、类外面都可以访问
protected：保护类型 在类里面、子类里面都可以访问，在类外面无法访问
private： 私有 在类里面可以访问，在子类、类外面都无法访问
5、ts封装ajax请求
interface Config{
type: string;
url: string;
data?: string;
dataType: string;
}
function ajax(config: Config){
var xhr = new XMLHttpRequest();
xhr.open(“get”,config.url,true);
xhr.send(config.data);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
console.log(xhr.responseText)
}
}
}
ajax({
type: “get”,
url: “http://www.baidu.com”,
dataType: “json”
})
6、泛型（可以支持不特定的数据类型，要求：传入的参数和返回的参数一致）
//变量
function getData(value: T):T{
return value;
}
getData(123)
getData(“123”)
//类
class Minclass{
public list:T[] = []
add(value:T):void{
this.list.push(value)
}
min():t{
var minNum = this.list[0];
for(var i=0; i<this.list.length; i++){
if(minNum > this.list[i]){
minNum = this.list[i]
}
}
return minNum;
}
}
var m1 = new Minclass();
m1.add(5); m1.add(8); m1.add(6)
m1.min()