TypeScript學(xué)習(xí)之路

安裝typescript環(huán)境

npm install -g typescript

查看版本

tsc -v

typescript起步

1、新建hello.ts

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

2、通過 tsc 命令編譯

tsc hello.ts 

3、此時(shí)路徑下會(huì)生成一個(gè)hello.js文件

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

4、node hello.js打開或者引入xxx.html瀏覽器打開查看

typescript開發(fā)工具vscode自動(dòng)編譯.ts文件

1、創(chuàng)建 tsconfig.json 文件 cmd后執(zhí)行命令 tsc --init 生成配置文件

然后就可以自動(dòng)編譯.ts文件

typescript中的數(shù)據(jù)類型

// typescript中為了使編寫代碼更加規(guī)范 有利于維護(hù) 增加了類型校驗(yàn) /*  布爾類型 boolean  數(shù)字類型 number  字符串類型 string  數(shù)組類型 array  元祖類型 tuple  枚舉類型 enum  任意類型 any  null 和undefined  void類型  never類型*///  布爾類型 booleanvar flag: boolean = trueflag = false//  數(shù)字類型 numbervar num: number = 123console.log(num);//  字符串類型 stringlet str: string = "fqniu"console.log(str);//  數(shù)組類型 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 (定義數(shù)組的一種方式)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 }  // 如果這里默認(rèn)不賦值的話打印的是索引值 0 1 2let c: Color = Color.yellowconsole.log(c); // 2 enum Color1 { red, blue = 5, yellow }  // 如果這里默認(rèn)不賦值的話打印的是索引值 0 1 2let cr: Color1 = Color1.redlet cb: Color1 = Color1.bluelet cy: Color1 = Color1.yellowconsole.log(cr); // 0console.log(cb); // 5console.log(cy); // 6 取上一個(gè)值， blue的值 +1//  任意類型 any let numAny: any = 25numAny = "fqniu"numAny = trueconsole.log(numAny);// any的用處：獲取dom元素節(jié)點(diǎn) 操作dom的樣式等// var oBox: any = document.getElementById("box")// oBox.style.color = "red"//  null 和undefinedlet undef: undefinedconsole.log(undef);var nul: nullnul = nullconsole.log(nul);// 一個(gè)元素可能是 number類型 可能是null 可能是undefinedvar ele: number | null | undefinedconsole.log(ele);//  void類型 typescript 中的void表示沒有任何類型 一般用于定義方法的時(shí)候 方法沒有返回值function fun(): void {  console.log("fun");}fun()// 有返回值時(shí)function fun1(): number {  console.log("fun");  return 123}fun1()//  never類型：其他類型（包括null 和undefined）的子類型，代表從不會(huì)出現(xiàn)的值，這意味著聲明never的變量只能被never類型所賦值let error:never// error = 25 // 報(bào)錯(cuò)// 正確error = (() => {  throw new Error("錯(cuò)誤")})()

typescript中的函數(shù)

// 函數(shù)的定義// js中函數(shù)聲明定義function fun1() { }// js中匿名函數(shù)定義 函數(shù)表達(dá)式var fun2 = function () { }// ts中函數(shù)聲明定義function fun3(): string {  return "fqniu"}console.log(fun3()); // fqniu// ts中匿名函數(shù)定義 函數(shù)表達(dá)式var fun4 = function (): number {  return 25}console.log(fun4()); // 25// 1、函數(shù)的傳參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、函數(shù)的可選參數(shù)// es5里面的方法的實(shí)參和形參可以不一樣// 但是ts必須一致，不一樣的話可以配置可選參數(shù)，注意參數(shù)必須配置到參數(shù)的最后一個(gè) 加?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、默認(rèn)參數(shù)// es5里面沒辦法設(shè)置默認(rèn)參數(shù)，es6和ts可以設(shè)置默認(rèn)參數(shù)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、剩余參數(shù)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、函數(shù)的重載// Java中方法的重載，是指的兩個(gè)或者多個(gè)同名函數(shù)，但是他們的參數(shù)不一樣，這時(shí)會(huì)出現(xiàn)函數(shù)重載的情況// ts中的重載：通過為同一個(gè)函數(shù)提供多個(gè)函數(shù)類型定義來實(shí)現(xiàn)多種功能的目的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、箭頭函數(shù)// this指向上下文setTimeout(() => {  console.log("fqniu ws");}, 2000);

typescript中類的定義

// ts中類的定義class Person {  name: string; //屬性 前面省略public關(guān)鍵詞  constructor(name: string) { // 構(gòu)造函數(shù) 實(shí)例化類的時(shí)候觸發(fā)的方法    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()  // 原型鏈上的屬性會(huì)被多個(gè)實(shí)例共享，但是構(gòu)造函數(shù)不會(huì)  Person.prototype.sex = "男"  Person.prototype.work = function () {    console.log(this.name + "敲代碼");  }  p.work()  // 添加靜態(tài)方法  Person.getInfo = function () {    console.log("我是靜態(tài)方法");  }  Person.getInfo()  // es中的繼承 繼承Person類   // 1、對(duì)象冒充實(shí)現(xiàn)繼承  function Web1() {    Person.call(this) //對(duì)象冒充實(shí)現(xiàn)繼承  }  var web1 = new Web1()  web1.fun() // 對(duì)象冒充實(shí)現(xiàn)繼承構(gòu)造函數(shù)中的屬性和方法  // web.work() // 報(bào)錯(cuò) index.html:48 Uncaught TypeError: web.work is not a function 但是沒辦法繼承原型鏈上的屬性和方法  // 2、原型鏈實(shí)現(xiàn)繼承  function Web2() { }  Web2.prototype = new Person() // 原型鏈實(shí)現(xiàn)繼承  var web2 = new Web2()  console.log(web2.name); // fqniu  web2.fun() // fqniu25  web2.work() // fqniu敲代碼  // 原型鏈實(shí)現(xiàn)繼承好處：既可以繼承構(gòu)造函數(shù)中的屬性和方法，也可以繼承原型鏈上的方法  // 原型鏈實(shí)現(xiàn)繼承的問題？  當(dāng)實(shí)例化子類的時(shí)候，沒辦法給父類傳參  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() // 原型鏈實(shí)現(xiàn)繼承  var web3 = new Web3("nfq", 25)  console.log(web3.name); // undefined  因?yàn)閷?shí)例化子類的時(shí)候，沒辦法給父類傳參  // 組合繼承模式  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) // 對(duì)象冒充繼承，實(shí)例化子類可以給父類傳參  }  Web4.prototype = new Person2() // 原型鏈實(shí)現(xiàn)繼承  // 或者    // Web4.prototype = Person2.prototype  var web4 = new Web4("nfq", 25)  console.log(web4.name);  // nfq  web4.fun() // nfq25  web4.work() // nfq敲代碼

typescript中的繼承

// ts中實(shí)現(xiàn)繼承 extends、 superclass Person {  name: string; //屬性 前面省略public關(guān)鍵詞  constructor(name: string) { // 構(gòu)造函數(shù) 實(shí)例化類的時(shí)候觸發(fā)的方法    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) // 初始化父類的構(gòu)造函數(shù)  }  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里面定義屬性的時(shí)候提供了三種修飾符/*  public：公有 —— 在當(dāng)前類里面、子類、類外面都可以訪問  protected：保護(hù)類型 —— 在當(dāng)前類里面，子類都可以訪問，在類外部無法訪問  provite：私有 —— 只有當(dāng)前類里面訪問，子類、類外部都無法訪問  屬性不加修飾