入坑TypeScript

423 阅读2分钟

TypeScript

TS基本数据类型

字符串、数字、布尔

let str: string = "abc";

let num: number = 10;

let bl: boolean = true;

数组

// 数组

//元组,个数及类型有限制
let arr: [string, number] = ["a", 1];

//字符、数字数组
let arr1: string[] = [1, 2, 3];
let arr2: number[] = [1, 2, 3];

let arr3: Array<number> = [10, 20, 30];
let arr4: Array<string> = ["a", "b"];

// 数组类型不确定

let arr5: any[] = ["a", 1, true];
let arr6: Array<any> = ["b", 2, false];


//遍历数组
for (let i = 0; i < arr5.length; i++) {
  let ele: any = arr5[i];
  console.log("ele==>", ele);
}

对象

// 对象

//定义对象
let obj: object = { name: "cx", age: 23 };

//获取对象内的属性值
let objName: string = (<any>obj).name;

// 复制一个对象

let o: object = {};

for (let key in obj) {
  // o[key] = obj[key]; 异常
  (<any>o)[key] = (<any>obj)[key];

}

字符串、数组的length属性

// 长度

let text = "this is an apple";
或
let text:Array<any> =["a",1,true];

//两种写法
let leng1: number = (<string>text).length;
let leng2 :number =(text as string).length;

枚举

// 枚举用于保存常量
 enum Animal { dog, cat = 10, peg };

let a: Animal = Animal.dog;
let b: Animal = Animal.cat;//手动赋值
let c: string = Animal[2];//获取属性名

 console.log("a==>", a);//0
 console.log("b==>", b);//10
 console.log("c==>", c);//peg

自定义类型

// 自定义类型
type User = {
   name: string,
   age: number,
   isUer: boolean,
   other: [object]
 }
let user1: User = {
    name: 'lcx',
    age: 23,
    isUer: true,
    other: [{ id: 2121, pwd: "a123" }]
};

 console.log("user1==>",user1);

TS引用数据类型

普通函数

// 定义语法function(参数1: 参数类型 (参数2: 参数类型 ) : 返回值类型{}

// 函数没有参数,没有返回值
function f1(): void {

  let a: number = 1;

  console.log("a==>", a);

}

// 没有参数,有返回值
function f2(): number {

  let a: number = 1;

  return a++;

}

let a1: number = f2();



// 有参数,有返回值
function f3(a: number, b?: number): number {
//?: 表示可有可无, 既然是可有可无,类型就不确定,所有应该使用any类型
  let count: number = a + <any>b;

  return count;

}

let ab: number = f3(1, 3);



// 返回数组
function f4(a: number, b?: number): number[] {
  return [a, <any>b];
}

// 返回对象
function f5(city: string, code?: number): object {
  return { city: city, code: code };
}

// 返回指定字段的对象(不可以添加其他未声明的字段)

function f6(city: string, code: number): { city: string, code: number, a?: number } {
  return {

​    city,

​    code,

​    a: 100//可有可无

  };

}
//另一种定义普通函数的方式
let g2: (a: number, b: number) => number = function (a: number, b: number) { return a + b; }

箭头函数

// 箭头函数

let g3=(a:number):number=> {

  return 10;

}

解构赋值

// // [p1,p2,p3]:[number,string,boolean] 作用于函数参数

 let fn1 = ([p1, p2, p3]: [number, string, boolean]): any => {
     return { p1, p2, p3 }
 }
 console.log(fn1([10, "编号", true]));

最后一句

这是沉曦的学习心得!若有不正,还望斧正。希望掘友们不要吝啬对我的建议哦,回见。