TypeScript

TS介绍

 TypeScript 是添加了类型系统的 JavaScript，更倾向于后端的语言，严谨的代码。适用于开发大型项目。 TypeScript可以编译成可以和js 。

1. 基本类型

let name: string = '小明'
let str: string = "hello world";
let age: number = 18
let flag: boolean = true;
flag = false;
// flag =1 flag =0 报错
flag = 1 > 0; // 条件为true可以

var n = null;
// n = 11 报错
// null 只可以是null
var u = undefined;

n = null;
n = undefined;
// null == undefined

2. Array、obj

let arr: Array<string> = []; //第一种写法 泛型
let _Array: string[] = []; //第二种写法
// 建议第二种写法 第一种写法react中会报错

let obj: object = {
    msg: 'hello world',
    num: 18 
}

3. 函数

function fn(str: string) {
    console.log(str.length)
}
fn("你好世界");

4. any类型

any类型 可以赋值给任意类型的变量

// any可以声明所有的类型
let str1: any = "hahaha";
str1 = 123;
str1 = true;
str1 = [];
str1 = null;

5. Unknown 类型

unknown 类型只能被赋值给 any 类型和 unknown 类型本身
只有能够保存任意类型值的容器才能保存 unknown 类型的值。
不能赋值给其他类型的变量

let value: unknown; 


value = true;             
value = 42;               
value = "Hello World";   
value = [];               
value = {};               
value = null;             
value = undefined;       

// true
let value1: unknown = value; 
let value2: any = value;  
//false 报错
let value3: boolean = value;   
let value4: number = value;    
let value5: string = value;    

6. Void 类型

表示没有任何的返回值，通常用于函数的返回值

function fn(): void {
	
}

7. Tuple 类型

数组一般都是由同一种类型组成；
但有时我们需要在单个变量中存储不同类型的值，这就是元组；

let tupleType: [number,string,boolean];
tupleType = [1, '12', true];
// 报错 元组顺序也要一致
tupleType = ["12",1,true];

2.类型别名

用type定义一类型的集合，需要用到相同的类型就直接使用就可以

type types = number | string | boolean

3.函数的默认值展开运算符

//函数的默认值
function fn(x:number, y:number=100):number{
    return x+y
}

//展开运算符
function fn(...num: number[]) {
    console.log(num)
}
fn(1, 2, 3, 4, 5)

3.this

对象中的this

//对象中的this
let obj = {
    name: "Hello world",
    sayHello(){
        console.log(this.name) //this --- obj
    }
};

this的指向

type Obj = {
    name: string
}
//this:Obj ----  只是为了告诉ts当前的this是谁,并不做为是当前方法的第一个参数,他在执行的时候是被忽略的
function sayHello(this:Obj, a) {
    console.log(this.name, a)
}
let obj = {
    name: "Hello world",
    sayHello
};
obj.sayHello(123);    //---- this ==>obj