typescript

一、简介

typescript 是js 的超集，主要学习ts 里面的原始类型

命令

npm install -g typescript

npm uninstall -g typescript

在项目文件夹中执行  tsc -init  表示 ts 初始化项目

tsc -init

二、数据类型

1、原始数据

string，number，boolean，symbol，null，undefined

export {};      // 第一行增加这个是为了是文件里的变量不污染全局 -----》 导出为空
let num: number = 1;   // number
let str: string = "2";   // string
let bool: boolean = true;   // boolean
let sy: symbol = Symbol();   // symbol
let undef: undefined = undefined;    // undefined
let nul: null = null;   // null
let vd: void = undefined;   // 可以吧undefined类型赋值给void类型，但是反过来不行
function a(): void {}
// 在ts中函数没有写返回值，函数类型就是void

2、非原始类型

object (常用) ， Object ，   {}

let obj: object = {a: 1};
let arr: object = [1];
// object 不包含基础数据类型

let obj1: Object = {b: 1};
let arr1: Object = [2,3];
let num1: Object = 2;
let str1: Object = "2";
let bool1: Object = true;
// Object 包含基础数据类型

let obj2: Object = {b: 1};
let arr2: Object = [2,3];
let num2: Object = 2;
let str2: Object = "2";
let bool2: Object = true;
// {} 等效于Object  也包含基础数据类型

3、数组类型

// 数组类型
let arr3: number[] = [1,2,3];
arr3[0] = 10;

// 泛型 类型参数化
let arr4:Array<number> = [10,20,30]

// 元组
let arr5:[number,number,boolean] = [10,20,true]

4、联合类型

//   |   联合类型   或
let numAndStr:number|string = 10;
// numAndStr = "str";

// 1|'2' 在这里的1  和 '2' 是类型，  常量 ，表示numAndStr2的值只能是 1或者'2'
let numAndStr2: 1|'2' = 1;
numAndStr2 = "2"
// numAndStr2 = 2;  // 报错

let arr7:(number | boolean)[] = [10,20,true]

let obj3:{a:1}|{b:'3'};  //  | 或  表示要么有a属性，要么有b属性， 不能有其他属性
obj3={a:1};
obj3={a:1,b:'3'};
obj3={b:'3'};
// obj3={c:'3'};   // 报错

5、交叉类型

// & 交叉类型

// let a:number&string;           // 不会有任何值满足这个类型  一般不会这么写
// 如果一个属性出现多次类型的设置，需要都满足
let obj4:{name: string,age:number} & {height:number,age:18};     
// & 都  必须有name, age, height 属性， 都得有
obj4 = {name: "zhangsan",age:18,height:1.80}

// & 换成 | 才可以少属性

6、any和unknown

// any 和 unknown
// 不推荐使用any,  any绕过类型校验
// let a:any = 1;
// a="10";
// a=[10];
// a={b:10};
// a.toFixed(2)         // 绕过了，不检测

let n:unknown;
n = 1;
n = "10";
n = [10];
// n.toFixed(2);       // 报错  有做类型校验，除非上面写number，才不会有报错

if(typeof n === 'number') {
	n.toFixed(2);
} else if(typeof n==='string') {
	n.concat()
}

7、接口类型

// interface
// 定义接口类型  ----给对象用
interface MyItf{
  // 属性名：值的类型
  name: string;
  age: number;
  height: number;
}
let obj: MyItf;
obj = {
  name: "zhangsan",
  age: 17,
  height: 1.80,
}

// 定义接口类型  ----给数组用
interface ArrItf{
  // [idx:number]下标类型：值类型
  [idx:number]: number|string|boolean
}
let arr: ArrItf = [1,2,3,"4","5",true]

// 定义接口类型   --- 给函数用
interface FnItf{
  (i: string,j:number): void
}
let fn: FnItf = (p: string,a: number) => {}
fn("",2)

8、接口继承，同名，缺省，只读

interface NmaeItf{
  name: string;
  readonly weight: number;   // readonly  属性名----表示这个属性只允许读取，修改就报错
}
interface AgeItf{
  age: number;
  sex?: string         // 属性名?   表示这个属性可以缺省。( 定义数据的时候不写也没问题 )
}
interface PersonItf extends NmaeItf,AgeItf{
  height: number
}
let p:PersonItf;
p={
  name: "张三",
  weight: 55,
  age: 18,
  // sex: "男",
  height: 1.90
}
// p.weight = 20   // 报错
p.age = 20

// 接口可以同名  特点是，合并了 ( 都具有 )所有属性类型
interface AItf{
  a: number
}
interface AItf{
  b: string
}
let obj:AItf={
  a: 2,
  b: "5"
}

9、联合交叉类型

// && 优先于 ||
// console.log(1||2&&3)     //  1

// & 优先于 |
let obj: {name: string} & {age: number} | {name: number} & {age: string};
obj = {
  name: "zhangsan",
  age: 20
}

obj = {
  name: 21,
  age: "14"
}

10、类型别名

// 自定义一个类型
type StrOrNum = string | number

let str:StrOrNum = "1";
str = 40

type ObjType = {a:number&2, b: string}
// type ObjType = {c: string}
let obj: ObjType ={
  a:2,
  b: "bbb"
}

// interface 和 type 区别
// 都可以用来自定义类型
// 类型别名支持联合和交叉类型定义
// 类型别名不支持重复定义，接口可以
// 可以混用
interface AItf{
  a: string
}
// 用类型别名保存接口上的某个属性类型
type Atype = AItf['a'];
let str2:Atype = "40";

type color='red' | 'blue' | 'green' | string & {}
let c:color = 'red'

11、ts函数

function fn(a:number,b:number):number {
  return a+b
}

// 接口定义函数类型
interface FnItf{
  (p:string):number
}
let fn2:FnItf = (p:string) => {
  return 1
}
fn2("")

// 类型别名定义函数类型
type FnType = (p:string)=>void
let fn3:FnType = (p:string):void=>{}
fn3("")

// 函数作为对象出现的时候
interface ObjItf{
  fn4:FnItf
}
let obj:ObjItf = {
  fn4:(str)=>{
    return 1
  }
}
obj.fn4("")

type ObjType = {fn:(p:string)=>number}
let obj2:ObjType ={
  fn:(str)=>{
    return 1
  }
}
obj2.fn("")

12、ts函数参数的写法

// 默认参数   参数名  :number=3    这个参数的默认值是3
function fn(a:number,b:number=3){
  return a+b
}
fn(1,2)
fn(5)

// 缺省参数   参数名 ?  表示可以被缺省的参数
function fn2(a:number,b?:number) {
  return 4
}
fn2(1,2)
fn2(5)

// 剩余参数
function fn3(a:number,b?:number, ...arr:number[]) {
  console.log(a,b);    // 1, 2
  console.log(arr);    // 3, 4, 5
}
fn3(1,2,3,4,5)

// 先执行解构赋值
let arr1 = [1,2,3];
let arr2 = [...arr1];
arr1[0] = 4;
console.log(arr1);      // 4,2,3
console.log(arr2);      // 1,2,3

let obj1 = {a:1,b:2,c:[1,2,3]}
let obj2 = {...obj1}        // 浅拷贝
obj1.a = 100
obj1.c[0] = 1000
console.log(obj1);
console.log(obj2);

13、ts中Promise

interface DataItf{
  a:number;
  b:number;
}

interface ResItf{
  code: number;
  data: DataItf[];
  // data: {a:number,b:number}[];
  message: string;
}

// promise对象:      p对象名:Promise<res的类型>
let p:Promise<ResItf> = new Promise((resolve,reject)=>{
  resolve({
    code: 0,
    data: [{a:1,b:2},{a:11,b:22}],
    message:""
  })
})

p.then(res=>{
  if(res.code==0) {
    res.data.map(item=>item.a)
  }
})