typescript

1.安装、编译

安装：npm install -g typescript 

查看版本：tsc -v

编译：tsc xx.ts

2.ts在vscode下快速生成js文件

  a.目录文件下命令行输入tsc --init 生成tsconfig.json文件  改'outDir':'./js'

  b.在vscode里点击终端->运行任务 监视tsc:watch-tsconfig.json

3.typscript变量与数据类型

// 1.字符串类型(string)
 
let str: string = "阿成";

// 2.数值类型(number)
let age: number = 16;

// 3.布尔值类型(boolean)
let isActive: boolean = false;

// 4.undefined和null和Object
let _null: null = null;
let _undefined: undefined = undefined;
let person: Object = {    
   name: 'tony' 
};

// 5.数组(array)
let books: string[] = ["简爱", "唐吉坷德"];
let price: number[] = [26, 32];
let todos: Array<number> = [15, 2]; // 使用泛型创建数组

// 6.元祖(tuple) -- 就是一个规定了元素数量和每个元素类型的'数组',元素的类型可以不相同
let _tuple: [string, number, boolean] = ["Paolo", 18, true];

// 7.枚举(enum)
// 7.1创建性别枚举
enum gender1 {
  boy = 1,
  girl = 2,
  neutral = 3,
}
// gender1.boy 1
// gender1.girl 2
// gender1.neutral 3
enum gender2 {
  boy,
  girl,
  neutral,
}
// gender2.boy 1
// gender2.girl 2
// gender2.neutral 3
// 说明以上两种申明枚举的方式得出结果一样的
// 7.2使用性别枚举
let sex: gender1 = gender1.boy;
// sex === gerder1.boy -> true
// sex === gerder2.boy -> false

// 8.任意类型(any) 一般在获取dom时使用
let dom: any = document.getElementById("dom");

// 9.void类型 表示没有类型，一般用在无返回值的函数(在ts中函数必须要制定返回值的类型)
function sayHi1(): string {
  return "hi"; // 返回字符串类型值
}
function sayHi2(): void {
  console.log("any"); // 没有返回值
}

// 10.never类型 表示不存在的值的类型，常用作抛出异常或无线循环的函数返回类型
function loop(): never {
  while (true) {}
}
// never类型是ts中的底部类型，所有类型都是never类型的父类，所以never类型值可以赋给任意类型的变量
let never1: never = loop();
let never2: string = loop();

// 11.联合类型 表示取值可以为多种类型中的一种
let everv1: string | number | null = "str";
let everv2: string | number | null = 8;
let everv3: string | number | null = null;

4.为了使代码规范、更有利于维护、增加了类型校验、写ts代码必须指定类型

1.ts 中的函数

// 1.函数 返回值 类型
function sayHi(): string {
  return "hi";
}
let hi: string = sayHi(); // hi

// 2.函数 形参 类型
function describeAge(age: number): void {
  console.log(`yangjun is ${age} years old`);
}
// 2.1 ts中实参和形参的 类型 必须一致
// 2.2 ts中实参和形参的 数量 必须一致
describeAge(22); // yangjun is 22 years old

// 3.函数 可选参数 ?
function sayHiCount1(who: string, count?: number): void {
  console.log(`${who} said ${count ? count : 2} times hi`);
}
sayHiCount1("yangjun"); // yangjun said 2 times hi

// 4.函数 默认值
function sayHiCount2(who: string = "yangjun", count: number = 2): void {
  console.log(`${who} said ${count} times hi`);
}
sayHiCount2(); // yangjun said 2 times hi
sayHiCount2("tony"); // tony said 2 times hi
sayHiCount2("tony", 4); // tony said 4 times hi
sayHiCount2("", 4); // yangjun said 4 times hi

// 5.函数 剩余参数
function counts(x: number, y: number, ...rest: number[]): number {
  let total: number = rest.reduce((t: number, v: number) => {
    return (t += v);
  }, x + y);
  return total;
}

counts(1, 1); // 2
counts(1, 1, 1, 1); // 4

2.ts 中的类

// 1.类 创建对象
class video {
  termNo: number;
  channelId: number;
  param: Object;
  constructor(termNo: number, channelId: number, prama: Object = {}) {
    this.termNo = termNo;
    this.channelId = channelId;
    this.param = prama;
  }
  play(): void {
    console.log("播放");
  }
  stop(): void {
    console.log("暂停");
  }
}

const createVideo = (termNo: number, channelId: number, param: Object) => new video(termNo, channelId, param);

let video1 = createVideo(1, 2, { dom: "vitem" });
// video1.play(); 播放
// video1.stop(); 暂停
// console.log(video1.channelId); 2
// console.log(video1.param.dom); vitem