Ts快速入门

Ts是什么

• ts是一门静态类型、弱类型的语言
• js是在浏览器运行的时候，边解释边运行，所以js是动态语言，相对的，ts需要先编译，编译成js，ts是静态类型的语言
• 强类型与弱类型是根据数据类型是否进行隐式转换来判断的，可以运行下面的代码，可以看见ts与js一样自动进行类型的隐式转换，ts是一门弱类型语言

let a = 1;
let b = "2";
let c = a + b;
console.log(c);

ts基础

• 字面量类型

1. 字面量类型表示取值只能是几个值中的一个,可以使用string、boolean、number等值作为类型

type Person="zhang san" | "li si"；
let person:Person="li si";  //只能从"zhang san"和"li si"中选择一个作为值

• 类型别名

1. 类型别名是给类型起一个名字，一般用于联合类型，方便使用

type Person="zhang san" | "li si"； //当使用这个类型时，不用使用一长串类型，只需要使用定义的别名就行

• 联合类型

1. 联合类型，是用|连接的类型，表示可以取多个类型中的一种类型，相当于or

type Person="zhang san" | number; //联合类型
let person:Person="zhang san";  //值既可以使用字面量类型zhang san,也可以使用一个数字来赋值

• 交叉类型

1. 交叉类型表示的是多个类型合在一起，类型之间用&连接，与联合类型不同的是，交叉类型不是选择使用其中的一个类型，而是所有类型都融合在一起，一起生效，一起约束

interface Age {
  age: number;
}
interface Property {
  firstName: string;
  lastName: string;
}
type Person = Age & Property; //联合类型，表示两个类型合在一起

const person = (obj: Person) => {   //obj中既有Age中定义的类型，也有Property中定义的类型
  const {age,firstName,lastName}=obj;
  console.log(age,firstName,lastName);
};

• 元组

1. 数组可以定义相同类型的数据的组合，元组可以定义不同类型的数组的组合
2. 元组在对应位置只能赋值对应类型的值

let arr: [number, string, boolean] = [1, "1", true];

• 泛型

1. 当不确定需要定义为某一个类型的时候，可以把一个范型当成一个参数传入使用这个类型，在实际使用时，再确定需要使用的类型就是范型

type func<T> = (a: number, b: string, c: T) => T; //T为一个类型变量，可以是任意类型，第三个参数以及函数的返回值都是T类型
let fun: func<boolean> = function (a, b, c) {
  console.log(a, b, c);
  return c;
};
fun(1, "1", true);

• 枚举

ts 类型声明

基本数据类型

• 使用类型推断定义类型

let num=1;  //类型推断，自动推断为数字类型
let str='str';  //类型推断，自动推断为字符串类型
let bool=false; //类型推断，自动推断为boolean类型
let undef=undefined; //类型推断，自动推断为undefined类型
let nul=null; //类型推断，自动推断为null类型

• 手动定义类型

let num:number=1;   //手动定义为number类型
let str:string='str';  //手动定义为字符串类型
let bool:boolean=false; //手动定义为boolean类型
let undef:undefined=undefined; //手动定义为undefined类型
let nul:null=null; //手动定义null类型

• 定义为字面量类型

let num:2=2;  //手动定义为number类型,只不过是字面量类型，就是用值作为类型，赋的值只能是定义的值
let str:'str'='str';  //值只能是字面量的值，如字面量类似是abc，赋值只能是abc
let bool:false=false; //值只能是字面量的值，如字面量类似是true，赋值只能是true

引用数据类型

• 使用接口（interface）定义对象

//如定义一个人的类型，name和age都是必选属性,必须都有
interface Person {
  name: string;
  age: number;
}
let p: Person = {
  name: "张三",
  age: 18,
};
//如定义一个人的类型，name是必选属性，age是可选属性，可以通过?来表示可选属性
interface Person1 {
  name: string;
  age?: number;   //?表示age是一个可选属性，表示age可有可无
}
let p1: Person1 = {
  name: "张三",
  age: 18, //age可有可无
};

• 使用接口(interface)定义函数

interface Person2 {
  (a: string, b: boolean): boolean;
}
let fun2: Person2 = function (a, b) {
  console.log(a, b);
  return b;
};

• 使用类型别名(type)定义函数

//定义一个函数类型
type func = (a: number, b: string) => string;
//使用函数类型
let fun: func = function (a, b) {
  return a + b;
};

//定义一个函数类型,参数可以设置为可选参数
type func1 = (a: number, b: string, c?: boolean) => string;
//使用函数类型，参数可选
let fun1: func1 = function (a, b) {
    return a + b;
};

//定义一个函数类型,使用泛型
type func3<T> = (a: number, b: string, c: T) => T;
//使用函数类型，传入一个类型，返回一个类型
let fun3: func3<boolean> = function (a, b, c) {
  console.log(a, b, c);
  return c;
};

• 直接定义数组（基本数据类型后面跟一个[ ]定义数组）

let arr: number[] = [1, 2, 3]; //定义的是数组类型，数组里面的元素类型是number，如果改成string，就会报错
let arr1: string[] = ['1', '2', '3']; //定义的是数组类型，数组里面的元素类型是string，如果改成number，就会报错
//...其它类型同样

• 使用数组泛型定义数组

let arr2: Array<number> = [1, 2, 3];
let arr3: Array<string> = ['1', '2', '3'];
let arr4: Array<boolean> = [true, false, true];

• 使用元组定义数组

let arr5: [number, string, boolean] = [1, "1", true]; //元组定义数组，数组中固定位置的类型和定义时的个数必须对应