TypeScript入门学习之路

TypeScript学习之路

安装typescript环境

npm install -g typescript

查看版本

tsc -v

typescript起步

1、新建hello.ts

const hello : string = "Hello World!"console.log(hello)

2、通过 tsc 命令编译

tsc hello.ts 

3、此时路径下会生成一个hello.js文件

var hello = "Hello World!";console.log(hello);

4、node hello.js打开或者引入xxx.html浏览器打开查看

typescript开发工具vscode自动编译.ts文件

1、创建 tsconfig.json 文件 cmd后执行命令 tsc --init 生成配置文件

然后就可以自动编译.ts文件

typescript中的数据类型

// typescript中为了使编写代码更加规范 有利于维护 增加了类型校验 /*  布尔类型 boolean  数字类型 number  字符串类型 string  数组类型 array  元祖类型 tuple  枚举类型 enum  任意类型 any  null 和undefined  void类型  never类型*///  布尔类型 booleanvar flag: boolean = trueflag = false//  数字类型 numbervar num: number = 123console.log(num);//  字符串类型 stringlet str: string = "fqniu"console.log(str);//  数组类型 array// 第一种定义let arr1: number[] = [1, 2, 3, 4]console.log(arr1);let arr2: string[] = ["1", "2", "3", "4"]console.log(arr2);// 第二种定义let arr3: Array<number> = [1, 2, 3, 4]let arr4: Array<string> = ["1", "2", "3", "4"]// 第三种定义let arr5: any[] = [1, 2, "3", 4, true]//  元祖类型 tuple (定义数组的一种方式)let arr7: [string, number, boolean] = ["fqniu", 25, true]//  枚举类型 enumenum Flag { success = 1, error = -1 }let fs: Flag = Flag.successlet fe: Flag = Flag.errorconsole.log(fs, fe); // 1 -1enum Color { red, blue, yellow }  // 如果这里默认不赋值的话打印的是索引值 0 1 2let c: Color = Color.yellowconsole.log(c); // 2 enum Color1 { red, blue = 5, yellow }  // 如果这里默认不赋值的话打印的是索引值 0 1 2let cr: Color1 = Color1.redlet cb: Color1 = Color1.bluelet cy: Color1 = Color1.yellowconsole.log(cr); // 0console.log(cb); // 5console.log(cy); // 6 取上一个值， blue的值 +1//  任意类型 any let numAny: any = 25numAny = "fqniu"numAny = trueconsole.log(numAny);// any的用处：获取dom元素节点 操作dom的样式等// var oBox: any = document.getElementById("box")// oBox.style.color = "red"//  null 和undefinedlet undef: undefinedconsole.log(undef);var nul: nullnul = nullconsole.log(nul);// 一个元素可能是 number类型 可能是null 可能是undefinedvar ele: number | null | undefinedconsole.log(ele);//  void类型 typescript 中的void表示没有任何类型 一般用于定义方法的时候 方法没有返回值function fun(): void {  console.log("fun");}fun()// 有返回值时function fun1(): number {  console.log("fun");  return 123}fun1()//  never类型：其他类型（包括null 和undefined）的子类型，代表从不会出现的值，这意味着声明never的变量只能被never类型所赋值let error:never// error = 25 // 报错// 正确error = (() => {  throw new Error("错误")})()

typescript中的函数

// 函数的定义// js中函数声明定义function fun1() { }// js中匿名函数定义 函数表达式var fun2 = function () { }// ts中函数声明定义function fun3(): string {  return "fqniu"}console.log(fun3()); // fqniu// ts中匿名函数定义 函数表达式var fun4 = function (): number {  return 25}console.log(fun4()); // 25// 1、函数的传参function fun5(name: string, age: number): string {  return `${name} -- ${age}`}console.log(fun5("fqniu", 25)); // fqniu -- 25var fun6 = function (name: string, age: number): string {  return `${name} -- ${age}`}console.log(fun6("nfq", 22)); // nfq -- 22// 没有返回值的方法function fun7(): void {  console.log("fun7");}fun7()// 2、函数的可选参数// es5里面的方法的实参和形参可以不一样// 但是ts必须一致，不一样的话可以配置可选参数，注意参数必须配置到参数的最后一个 加?function fun8(name: string, age?: number): string {  if (age) {    return `${name} -- ${age}`  } else {    return `${name} -- 保密`  }}console.log(fun8("fqniu")); // fqniu -- 保密console.log(fun8("fqniu", 25)); // fqniu -- 25// 3、默认参数// es5里面没办法设置默认参数，es6和ts可以设置默认参数function fun9(name: string, age = 20): string {  if (age) {    return `${name} -- ${age}`  } else {    return `${name} -- 保密`  }}console.log(fun9("fqniu")); // fqniu -- 20console.log(fun9("fqniu", 25)); // fqniu -- 25// 4、剩余参数function sum1(a: number, b: number, c: number, d: number): number {  return a + b + c + d}console.log(sum1(1, 2, 3, 4)); // 10function sum2(...result: number[]): number {  var sum = 0  for (var i = 0; i < result.length; i++) {    sum += result[i]  }  return sum}console.log(sum2(1, 2, 3, 4, 5, 6)); // 21// 5、函数的重载// Java中方法的重载，是指的两个或者多个同名函数，但是他们的参数不一样，这时会出现函数重载的情况// ts中的重载：通过为同一个函数提供多个函数类型定义来实现多种功能的目的function getInfo(name: string): string;function getInfo(age: number): string;function getInfo(str: any): any {  if (typeof str === "string") {    return "我叫 " + str  } else {    return "我的年龄是" + str  }}console.log(getInfo("fqniu"));console.log(getInfo(22));// 6、箭头函数// this指向上下文setTimeout(() => {  console.log("fqniu ws");}, 2000);

typescript中类的定义

// ts中类的定义class Person {  name: string; //属性 前面省略public关键词  constructor(name: string) { // 构造函数 实例化类的时候触发的方法    this.name = name;  }  fun(): void {    console.log("fun", this.name);  }  getName(): string {    return this.name  }  setName(name: string): void {    this.name = name  }}var p = new Person("fqniu")console.log(p.name); // fqniuconsole.log(p.getName()); //fqniup.setName("niuniu")console.log(p.getName()); // niuniu

继承

javascript中的继承

  function Person() {    this.name = "fqniu" /*属性*/    this.age = 25    this.fun = function () {      console.log(this.name + this.age);    }  }  var p = new Person()  console.log(p.name);  p.fun()  // 原型链上的属性会被多个实例共享，但是构造函数不会  Person.prototype.sex = "男"  Person.prototype.work = function () {    console.log(this.name + "敲代码");  }  p.work()  // 添加静态方法  Person.getInfo = function () {    console.log("我是静态方法");  }  Person.getInfo()  // es中的继承 继承Person类   // 1、对象冒充实现继承  function Web1() {    Person.call(this) //对象冒充实现继承  }  var web1 = new Web1()  web1.fun() // 对象冒充实现继承构造函数中的属性和方法  // web.work() // 报错 index.html:48 Uncaught TypeError: web.work is not a function 但是没办法继承原型链上的属性和方法  // 2、原型链实现继承  function Web2() { }  Web2.prototype = new Person() // 原型链实现继承  var web2 = new Web2()  console.log(web2.name); // fqniu  web2.fun() // fqniu25  web2.work() // fqniu敲代码  // 原型链实现继承好处：既可以继承构造函数中的属性和方法，也可以继承原型链上的方法  // 原型链实现继承的问题？  当实例化子类的时候，没办法给父类传参  function Person1(name, age) {    this.name = name /*属性*/    this.age = age    this.fun = function () {      console.log(this.name + this.age);    }  }  function Web3(name, age) { }  Web3.prototype = new Person1() // 原型链实现继承  var web3 = new Web3("nfq", 25)  console.log(web3.name); // undefined  因为实例化子类的时候，没办法给父类传参  // 组合继承模式  function Person2(name, age) {    this.name = name /*属性*/    this.age = age    this.fun = function () {      console.log(this.name + this.age);    }  }  Person2.prototype.sex = "男"  Person2.prototype.work = function () {    console.log(this.name + "敲代码");  }  function Web4(name, age) {    Person2.call(this, name, age) // 对象冒充继承，实例化子类可以给父类传参  }  Web4.prototype = new Person2() // 原型链实现继承  // 或者    // Web4.prototype = Person2.prototype  var web4 = new Web4("nfq", 25)  console.log(web4.name);  // nfq  web4.fun() // nfq25  web4.work() // nfq敲代码

typescript中的继承

// ts中实现继承 extends、 superclass Person {  name: string; //属性 前面省略public关键词  constructor(name: string) { // 构造函数 实例化类的时候触发的方法    this.name = name;  }  fun(): void {    console.log("fun", this.name);  }  getName(): string {    return this.name  }  setName(name: string): void {    this.name = name  }}class Web extends Person {  constructor(name: string) {    super(name) // 初始化父类的构造函数  }  work(): void {    console.log(`${this.name}在敲代码`);  }  // fun(): void {  //   console.log("fun - 子类", this.name);  // }}var w = new Web("fqniu")w.fun() // fun fqniuw.work() // fqniu在敲代码// 类里面的修饰符 typescript里面定义属性的时候提供了三种修饰符/*  public：公有 —— 在当前类里面、子类、类外面都可以访问  protected：保护类型 —— 在当前类里面，子类都可以访问，在类外部无法访问  provite：私有 —— 只有当前类里面访问，子类、类外部都无法访问  属性不加修饰