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