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：私有 —— 只有當前類里面訪問，子類、類外部都無法訪問  屬性不加修飾