[TypeScript]TypeScript語法

語法

筆記來源於網絡學習視頻和網上各種blog,想直接看視頻的參考鏈接有
如有侵權立刪

數據類型

布爾值、數值、字符串、null、undefined 、Symbol

字符串

• 多行字符串

• 字符串模板

• 自動拆分字符串

  //多行字符串,使用反引號
  var content = "aaa" + "bbb";
  var content = `aaa
  bbb
  ccc`;
  //字符串模板
  var myname = "Tina";
  var getName = function () {
      return "TT"
  }
  console.log(`hello ${myname}`);
  console.log(`hello ${getName()}`)
  console.log(`<div> <span>${myname}<span>
  <span>${getName()}<span>
  <div>`)
  //自動拆分字符串
  function test(template, name, age) {
      console.log(template);
      console.log(name);
      console.log(age);
  }
  var myname = "Tina";
  var getAge = function () {
      return 22;
  }
  test`hello my name is ${myname},${getAge()}`;
  

參數

在參數後面使用冒號指定類型

• string

• any

• number

• boolean

• void

• 自定義類型

  //參數
  var myname2: string = "Tina";
  // myname2 = 13;
  var myname3 = "Tina";
  // myname3=13; //報錯，根據第一次賦值推斷類型
  var myname4: any = "Tina";//any類型不影響
  myname4 = 14;
  
  var myage: number = 13;
  var woman: boolean = true;
  //void 意味着不要返回值，下面寫法錯誤
  // function test(): void {
  //     return "";
  // }
  function test2(name: string): string {
      return name;
  }
  //自定義類型,可以通過class或者接口
  class Person {
      name: string;
      age: number;
  }
  var zhangsan: Person = new Person();
  zhangsan.name = "zhang san";
  zhangsan.age = 18;
  

默認參數

在參數後面用等號指定參數默認值

	//參數默認值
	function test3(a: string, b: string, c: string) {
	    console.log(a);
	    console.log(b);
	    console.log(c);
	}
	test3("xxx", "yyy", "zzz");
	// test3("xxx", "yyy"); 參數不夠會報錯
	
	function test4(a: string, b: string, c: string = "Tina") {
	    console.log(a);
	    console.log(b);
	    console.log(c);
	}
	//默認c是Tina,默認值參數必須後面
	test4("xxx", "yyy");
	
	function test5(c: string = "Tina", a: string, b: string) {
	    console.log(a);
	    console.log(b);
	    console.log(c);
	}
	//test5("xxx", "yyy");//xxx會賦值給c，b沒有賦值，會報錯

可選參數

在方法的參數聲明裏用問好表明參數可選

//可選參數？
function test6(a: string, b?: string, c: string = "Tina") {
    console.log(a);
    console.log(b);
    console.log(c);
}
test6("xxx");

function test7(a: string, b?: string, c: string = "Tina") {
    console.log(a);
    console.log(b.length);
    console.log(c);
}
//對b進行了處理，如果不傳入b，會報錯
//可選參數必須放在必選參數後邊

函數

Rest+Spread

用來聲明任意數量參數

//Rest + Spread
//...args表示可以傳任意參數
function func1(...args) {
    args.forEach(function (arg) {
        console.log(arg);
    })
}
func1(1, 2, 3);
func1(7, 8, 9, 123)

//固定參數，輸入多個參數，只截取固定數目
//會報錯
// function func2(a, b, c) {
//     console.log(a);
//     console.log(b);
//     console.log(c);
// }
// var args1 = [1, 2];
// var args2 = [7, 8, 9, 123];
// func2(...args1) //輸出1，2，undefined
// func2(...args2);//輸出7，8，9

generator

控制函數執行過程，手動停止和恢復
類似打斷點

//generator
//function*
function* doSomething() {
    console.log("start");
    yield;
    console.log("finish");
}
var funcdo = doSomething();
funcdo.next();
funcdo.next();

destrucring析構

將對象或數組拆分成任意數量的變量

• 數組

  var array = [1, 2, 3, 4];
  var [n1, , , n4] = array;
  console.log(n1);
  console.log(n4);
  var [n1, n2, , other] = array;
  console.log(other);//[3,4]
  function doSomething2([n1, n2, ...other]) {
      console.log(n1);
      console.log(n2);
      console.log(other);
  }
  console.log("array");
  // doSomething2(array); //輸出 1,2,[3,4]
  

• 對象

  	
  	function getFood() {
  	    return {
  	        kind: "noodle",
  	        price: 100,
  	        code: {
  	            c1: 222,
  	            c2: 555
  	        }
  	    }
  	}
  	var food = getFood();
  	console.log(food.kind, food.price);
  	//ES6新寫法
  	var { kind, price } = getFood();
  	console.log(kind + price);
  	//別名
  	var { kind: kind2, price } = getFood();
  	console.log(kind2 + price);
  	//嵌套
  	var { kind: kind2, price, code: { c1 } } = getFood();
  

箭頭表達式

• 箭頭函數

  //箭頭函數
  //沒有參數
  var sum1 = () => { }
  //一個參數
  var sum2 = arg1 => {
      console.log(arg1);
  }
  //單行
  var sum3 = (arg1, arg2) => arg1 + arg2;
  //多行
  var sum4 = (arg1, arg2) => {
      var sum = 99;
      sum = arg1 + arg2;
      return sum;
  };
  
  var myarray = [1, 2, 3, 4]
  console.log(myarray.filter(value => value % 2 == 0));
  

• 聲明匿名函數，消失匿名函數this指針的影響

  //消除this指針問題
  function getThisName(name: string) {
      this.name = name;
      setInterval(function () {
          console.log("this.name=" + this.name);
      }, 1000);
  }
  var thisname = new getThisName("aaa");//輸出this.name=undefined
  
  function getThisName2(name: string) {
      this.name = name;
      setInterval(() => {
          console.log("this.name=" + this.name);
      }, 1000);
  }
  var thisname2 = new getThisName2("aaa");//輸出this.name=aaa
  

循環

• forEach()
• for in
• for of

  //循環
  var myarray2 = [1, 2, 3, 4];
  myarray2.desc = "aaa";
  //循環數組
  //forEach()
  myarray2.forEach(value => console.log(value))//輸出1,2,3,4
  //for in
  for (var n in myarray2) {
      console.log(n); //輸出鍵值對裏面的key 0,1,2,3,desc
      console.log(myarray2[n]); //輸出鍵值對裏面的value 1,2,3,4,aaa
  }
  //for of,集合,數組,map,對象
  for (var n2 of myarray2) {
      console.log(n2);//輸出1,2,3,4
  }
  for (var n3 of myarray2) {
      if (n3 > 2) break;
      console.log(n3);//輸出1,2
  }
  
  for (var n of "string") {
      console.log(n);//string
  }
  
  

面向對象

類

• public 默認都能被訪問

• private 只能類裏面用

• protected 類裏面和子類可以訪問

• 構造函數在類被實例化時調用，構造函數聲明的參數如果沒有用public，那麼構造函數外取不到

  class Person {
      constructor(public name: string) {
          this.name = name;
          console.log("Person")
      }//沒有public,this.name取不到
      // private name;
      private age;
      public eat() {
          console.log(this.name + "lunch");
      }
  }
  var p1 = new Person("a");
  p1.eat();
  var p2 = new Person("b");
  p2.eat();
  

• 繼承

• 繼承父類所有屬性和方法

• super方法調用父構造器

  class bPerson extends Person {
      constructor(name: string, num: string) {
          super(name);
          console.log("bPerson")
          this.num = num;
      }
      num: string;
      work() {
          super.eat();
          this.doWork();
      }
      doWork() {
          console.log(this.name + "work");
      }
  }
  var p3 = new bPerson("p3", "1");
  // p3.eat(); //直接調用父的方法
  p3.work();
  

泛型

規定了person類型數組，不是person類型就會報錯

var workers: Array<Person> = [];
workers[0] = new Person("zhangsan");
workers[1] = new bPerson("lisi", "2");
// workers[0] = 2 //報錯

接口

interface cPerson {
    name: string;
    age: number;
}
class ccPerson {
    constructor(public config: cPerson) {

    }
}
//構造器裏面使用cPerson類型，那新變量必須符合要求
//具有name和age屬性
var p4 = new ccPerson({
    name: "zhangsan",
    age: 18,
})

interface dPerson {
    eat();
}
//實現接口必須實現eat方法
class ddPerson implements dPerson {
    eat() {
        console.log("ddPerson")
    }
}
class eePerson implements dPerson {
    eat() {
        console.log("eePerson")
    }
}

模塊

將代碼分割爲可重用的單元，開發決定哪些暴露出去供外部使用
export/import

export var name1;
var name2;
export function func1() {

}
function func2() {

}
export class Person {

}
class Person2 { }

import { name1, func1, Person } from './4';
console.log(name1);
func1();
var p1 = new Person();

註解

添加說明，爲指定工具和框架使用
下面時angular框架，裏面@Component註解，裏面屬性告訴框架怎麼處理AppComponent
實例化AppComponent時，應該加載app.component.html/css文件

類型定義文件

幫助開發者在TS中使用已有的js工具包，比如JQuery
使用方法：

1. 導入jquery.d.ts包
   

2. 直接在代碼中寫入jquert代碼

   $('#xxxx').add
   

TS 25 問

本節代碼和TS25問

參考鏈接

https://www.imooc.com/learn/763
https://ts.xcatliu.com/basics/primitive-data-types