一.TypeScript定義
定義:TypeScript是JavaScript的超集.TypeScript 是 JS 的超集，TS 提供了 JS 的所有功能，并且額外的增加了：類型系統.
Ts不能直接運行在瀏覽器上,需要先被編譯為js再運行.
TypeScript優勢:
JS 不會檢查變量的類型是否發生變化,但是TS會.
編譯代碼過程中,發現代碼中的錯誤
可以顯示標記出代碼中的意外行為，從而降低了發生錯誤的可能性
示例:
//js:
//動態類型:類型隨時可以改變
let a = 123;
a = "123";//?
//ts:
//靜態類型:類型一旦被定義不可以改變
let b = 456;
b = "456"; //Type '"123"' is not assignable to type number
Ts的基礎環境:
1??安裝node
2??npm i typeScript -g (安裝ts)
由于tsc ***.ts 會生成一個 ***.js文件
3?? npm i -g ts-node 直接運行ts文件
二.靜態類型
靜態類型:就是你一旦定義了，將這個類型賦予某個變量，那么這個變量至始至終永遠都是這個類型。ts使用靜態類型，意味著使用靜態類型的變量今后類型無法改變，類型的屬性和方法也跟著確定了。
1.常用基礎類型
可以將 TS 中的常用基礎類型細分為兩類：1 JS 已有類型 2 TS 新增類型
原始類型：number/string/boolean/null/undefined/symbol
對象類型：object（包括，數組、對象、函數等對象）
(1)JS 已有類型
1.原始類型
原始類型：number/string/boolean/null/undefined/symbol
特點：簡單，這些類型，完全按照 JS 中類型的名稱來書寫
let age: number = 18
let myName: string = '老師'
let isLoading: boolean = false
// 等等...
2.對象類型:對象類型包括對象類型、數組類型、函數類型、類類型的定義。
- 對象類型
function getObj(obj: object): object {
console.log(obj)
return obj
}
console.log({ name: 'father', nick: '爸爸' })
console.log(new String('床前明月光'))// new 一個String對象
console.log(String)
- 數組類型(對象類型的一種)
數組類型的兩種寫法：
推薦使用 number[] 寫法
// 寫法一：
let numbers: number[] = [1, 3, 5]
// 寫法二：
let strings: Array<string> = ['a', 'b', 'c']
(2).TS新增類型
聯合類型、自定義類型(類型別名)、接口、元組、字面量類型、枚舉、void、any 等
注意：
原始類型在 TS 和 JS 中寫法一致
對象類型在 TS 中更加細化，每個具體的對象（比如，數組、對象、函數）都有自己的類型語法
//類型注解 type annotation:我們告訴TS變量是什么類型。
let age: number = 18
說明：代碼中的 : number 就是類型注解
作用：為變量添加類型約束。比如，上述代碼中，約定變量 age 的類型為 number 類型
解釋：約定了什么類型，就只能給變量賦值該類型的值，否則，就會報錯
錯誤演示：
// 錯誤代碼：
// 錯誤原因：將 string 類型的值賦值給了 number 類型的變量，類型不一致。
let age: number = '18'
類型推斷 type inference:TS會嘗試去分析變量是什么類型。
如果TS能自動分析變量的類型，我們就什么都不需要做了。
如果TS不能自動分析變量的類型，我們就需要使用類型注解。
類型推斷.png
function add(num1: number, num2: number) {
return num1 + num2;
}
let num3 = add(1, 2);//num3推斷為number
-----------------------------------------------------------
function add(num1: number, num2: number) {
return num1 + num2 + "";
}
let num3 = add(1, 2);//num3推斷為string
--------------------------------------------------------
//限制方法的返回值
function add(num1: number, num2: number) :number{
//return num1 + num2 + "";//提示語法錯誤，返回的值不符合要求
return num1 + num2;
}
let num3 = add(1, 2);
-------------------------------------------------------
//無返回值的函數
function print():void{
console.log("123");
}
-------------------------------------------------------
//函數無法執行完
function errorEmiter():never{
throw new Error();//throw error后,后面的代碼無法繼續執行
}
-----------------------------------------------------
//解構時類型注解的寫法
function add({ first, second }: { first: number; second: number }): number {
return first + second;
}
let num3 = add({ first: 1, second: 2 });
類型別名：
類型別名（自定義類型）：為任意類型起別名
使用場景：當同一類型（復雜）被多次使用時，可以通過類型別名，簡化該類型的使用
type CustomArray = (number | string)[]
let arr1: CustomArray = [1, 'a', 3, 'b']
let arr2: CustomArray = ['x', 'y', 6, 7]
(3)數組和元組
1.數組
const arr: string[] = ["a", "b", "c"];
const arr2: number[] = [1, 2, 3];
const arr3: (string | number)[] = [1, "2", 3];
const undefinedArr: undefined[] = [undefined];
//類型別名
type User = { name: string; age: number };
const objectArr: { name: string; age: number }[] = [{ name: "張三", age: 18 }];
const objectArr2: User[] = [{ name: "張三", age: 18 }];
2元組:tuple:個數有限的數組，每一項的類型都是固定的形式，這種特殊的數組，我們稱之為元組。()元組類型允許表示一個已知元素數量和類型的數組)
const userInfoArr: [string, string, number] = ["Dell", "male", 18];
const teacherList: [string, string, number][] = [
["Dell", "male", 18],
["john", "male", 19],
["lily", "female", 18],
];
（4）接口interface：通用的類型 :可以用來約束一個函數，對象，以及類的結構和類型
與別名（type）的區別：type可以代表string，number等，而interface只能用對象或者函數表示。
①直接傳入對象
const setPersonName = (person: { name: string }, name: string): void => {
person.name = name;
};
const getPersonName = (person: { name: string }): void => {
console.log("name:" + person.name);
};
const person = {
name: "張三",
};
setPersonName(person, "李四");
getPersonName(person);
從跟上面的代碼,我們發現,person: { name: string }是重復使用的,我們可以使用interface或者type(別名)來代替,通常情況下,可以使用interface的我們一般不使用type.
②使用interface
interface Person {
name: string;
age?: 18;//當不確定屬性是否一定需要時,可以這么處理
}
const setPersonName = (person: Person, name: string): void => {
person.name = name;
};
const getPersonName = (person: Person): void => {
console.log("name:" + person.name);
};
const person = {
name: "張三",
};
setPersonName(person, "李四");
getPersonName(person);
參數不全.png
還有一個問題,當字面量傳參時,是強校驗,不能包含傳入參數限定以外的屬性,但是間接傳入對象時,當傳入對象滿足所需參數限定的屬性即可.
const setPersonName = (person: { name: string }, name: string): void => {
person.name = name;
};
const getPersonName = (person: { name: string }): void => {
console.log("name:" + person.name);
};
const person = {
name: "張三",
};
setPersonName( {
name: "張三",
age:18
}, "李四");
getPersonName(person);
直接字面量傳參的方式,包含限定外的參數時.png
而下面這種傳參方式相較于直接傳參,檢驗沒有那么嚴格.
const setPersonName = (person: { name: string }, name: string): void => {
person.name = name;
};
const getPersonName = (person: { name: string }): void => {
console.log("name:" + person.name);
};
const person = {
name: "張三",
};
setPersonName(person, "李四");
getPersonName(person);
或者我們也可以用這種方式來解決
interface Person {
name: string;
age?: number;
[propsName: string]: any;//任意字符串類型的屬性名
}
const setPersonName = (person: Person, name: string): void => {
person.name = name;
};
const getPersonName = (person: Person): void => {
console.log("name:" + person.name);
};
const person = {
name: "張三",
age: 18,
};
setPersonName(
{
name: "張三",
age: 18,
sex:"male"
},
"李四"
);
getPersonName(person);
class 可以應用interface
interface Person {
name: string;
age?: number;
[propsName: string]: any;
say(): string;
}
//類實現接口后,必須具備接口的屬性
class User implements Person {
name = "張三";
say(): string {
return "say Hello";
}
}
接口可以繼承接口:除了繼承之前的接口屬性,還可以有自己的屬性及方法
interface Person {
name: string;
age?: number;
[propsName: string]: any;
say(): string;
}
interface Teacher extends Person {
teach(): string;
}
const setPersonName = (person: Teacher, name: string): void => {
person.name = name;
};
const getPersonName = (person: Teacher): void => {
console.log("name:" + person.name);
};
const person = {
name: "張三",
age: 18,
say() {
return "say hello";
},
teach() {
return "教學";
},
};
setPersonName(person, "李四");
getPersonName(person);
接口的繼承.png
interface定義函數:
interface sayHi {
(word: string): string; //傳一個string參數,返回一個string入參
}
const say: sayHi = (word: string) => {
return word;
};
let sayContent = say("haha");
類的繼承:
class Person {
name = "dell";
getName() {
return this.name;
}
}
class Teacher extends Person {
getTeacherName() {
return this.name;
}
//重寫父類的方法
getName() {
return super.getName() + "lee";
}
}
const teacher = new Teacher();
console.log("Teacher:", teacher.getTeacherName());
console.log("----------------------------");
console.log("重寫父類方法:", teacher.getName());
//運行結果
Teacher: dell
----------------------------
重寫父類方法: delllee
super作用:子類重寫父類方法后,可以通過super來重新調用父類的方法.
類中的訪問類型和構造器:
訪問類型:public protected private
public:允許在類的內外調用
protected:允許在類內和繼承的子類中使用
private:允許在類內調用
class Customer {
name: string;
constructor(name: string) {
this.name = name;
}
}
let customer = new Customer("dell");
console.log(customer.name);
等價于
class Customer {
//傳統寫法
// name: string;
// constructor(name: string) {
// this.name = name;
// }
//簡化寫法
constructor(public name: string) {}
}
let customer = new Customer("dell");
console.log(customer.name);
類繼承時,父類有構造器,子類也有構造器時,子類的構造器中要手動的調用super()方法,來調用父類的構造函數.并且需要按照父類構造器的參數來傳參.
class Person {
//傳統寫法
// name: string;
// constructor(name: string) {
// this.name = name;
// }
//簡化寫法
constructor(public name: string) {}
}
class Teacher extends Person {
constructor(public age: number) {
super("dell");
}
}
let person = new Person("dell");
console.log(person.name);
let teacher = new Teacher(18);
console.log(teacher.age);//18
console.log(teacher.name);//dell
//子類重寫父類的方法
class Person {
constructor(public name: string, public age: number) {}
say() {
console.log(`我的名字是${this.name},我的年齡是:${this.age}`);
}
}
class Student extends Person {
constructor(name: string, age: number, public school: string) {
super(name, age);
}
//重寫父類的方法
say() {
console.log(
`我的名字是${this.name},我的年齡是:${this.age},我來自${this.school}`
);
}
}
let person = new Person("張三", 18);
let hlbt = new Student("哈利波特", 18, "格蘭芬多");
hlbt.say();
靜態屬性:getter和setter
//類中的私有屬性,為了安全不直接暴露給外部,但是可以對外提供get和set//方法,對其進行處理后,對外提供
class People {
constructor(private _name: string) {}
get name() {
return this._name + "lee";
}
set name(name: string) {
this._name = name;
}
}
const people = new People("blouse");
console.log(people.name);
people.name = "李小龍";
console.log(people.name);
類想要創建唯一的實例(單例模式),限制通過new的方式創建多個不同的實例,可以通過將構造方法私有化的方法.
class Demo {
private constructor() {}
}
class demo1 = new Demo("");
類限制通過new的方式創建實例.png
但是上面的Demo怎么去創建唯一實例呢
class Demo {
//static 靜態的,將屬性掛載在類上,而不是實例上,即實例話對象不可調用,只有類本身和其子類使用.
private static instance: Demo;
private constructor() {}
//對外提供創建唯一實例的方法
static getInstance() {
//判斷是否已經存在instance
if (!this.instance) {
this.instance = new Demo();
}
return this.instance;
}
}
const demo1 = Demo.getInstance();
const demo2 = Demo.getInstance();
//這樣,創建的兩個實例是完全相等的
console.log(demo1 === demo2);//true
readonly:只能讀不能改
class Color {
readonly name: string;
constructor(name: string) {
this.name = name;
}
}
const red = new Color("red");
console.log(red.name);//red
red.name = "dark red";
readonly只讀.png
類的多態:多態指的是父類型的引用指向了子類型的對象，不同類型的對象針對相同的方法，產生了不同的行為。
(()=>{
// 定義一個父類
class Animal {
// 定義一個屬性
name:string
// 定義一個構造函數
constructor(name:string){
this.name = name
}
// 定義方法
sayRunDistance(distance:number = 0){
console.log(`我跑了${distance}米！！！！！！`)
}
}
//定義一個子類1
class Dog extends Animal {
// 構造函數
constructor (name:string) {
// 調用父類的構造函數，實現子類中屬性的初始化操作
super(name)
}
// 實例方法，重寫父類中的實例方法
sayRun(distance:number = 5) {
console.log(`我跑了${distance}米！！！！！！`)
}
}
//定義一個子類2
class Cat extends Animal {
// 構造函數
constructor (name:string) {
// 調用父類的構造函數，實現子類中屬性的初始化操作
super(name)
}
// 實例方法，重寫父類中的實例方法
sayRun(distance:number = 10) {
console.log(`我跑了${distance}米！`)
}
}
// 實例化父類對象
const Animal = new Animal ('大毛')
Animal.sayRun();
// 實例化子類對象1
const Dog = new Dog('泰迪')
Dog .sayRunDistance();
// 實例化子類對象2
const Cat = new Cat ('布偶貓')
Cat .sayRunDistance();
// 父類型和子類型的關系：父子關系，此時，父類類型創建子類的對象
const Dog1 :Animal = new Dog('金毛');
const Cat1 :Animal = new Cat('藍短');
Dog1.sayRun();
Cat1.sayRun();
})
多態的作用:
// 定義一個函數，該函數需要的參數是Animal類型的
function showRun (ani:Animal){
ani.sayRun()
}
// 此時將Animal的子類作為參數傳進去
showRun(Dog1)
showRun(Cat1)
抽象類:服務于子類(派生類),一般作為子類的基類來使用.
1.關鍵字abstract
2.抽象類不允許被實例化，抽象類的存在只為了向子類服務
3.抽象類中包含抽象屬性/方法，和普通屬性/方法
4.被抽象的屬性/方法不允許擁有具體的內容
5.子類如果不是抽象類，就必須將所有抽象父類的方法/屬性具體化
abstract class Person {
name: string;
constructor(name) {
this.name = name;
}
abstract sayHi(); //抽象方法
}
//抽象類不允許被實例化
let test = new Person('小明');
//報錯
//Cannot create an instance of an abstract class.
//抽象類中的抽象方法必須在子類中實現
class Child extends Person {
run() {
console.log('learn to run...');
}
}
let child = new Child();
//這樣寫會報錯
//Non-abstract class 'Child' does not implement inherited abstract member 'sayHi' from class 'Person'.
-------------------------------------------------------------------------------------
//修改成下面這樣可以正常編譯通過
class Child extends Person {
run() {
console.log(this.name + ' ' + 'learn to run...');
}
sayHi() {
console.log('hello,everyone');
}
}
let child = new Child('小明');
child.sayHi();
child.run();
interface和abbstract的異同.png
函數的重載:函數名相同,但是函數的參數級個數不相同.
//函數重載聲明
function add(param1: string, param2: string): string;
function add(param1: number, param2: number): string;
//函數的重載
function add(param1: string | number, param2: string | number) {
if (typeof param1 === "string" && typeof param2 === "string") {
return `${param1}${param2}`;
} else if (typeof param1 === "number" && typeof param2 === "number") {
return param1 + param2;
}
}
add("東方", "不敗");//東方不敗
add(10, 20);//30
add("東方", 20);//報錯
函數重載.png
構造函數也可以進行重載
type people = {
name: string;
age: number;
sex?: string;
};
const san: people = {
name: "山姆",
age: 18,
sex: "男",
};
console.log("type類型：", typeof san); //object
class Love {
public name: string;
public age: number;
public sex: string;
constructor(name_: string, age_: number);
constructor(param: people);
//由于構造函數本身不返回任何值，默認this且隱藏，所以重載和實現簽名都不返回
constructor(nameOrParam: any, age_: number = 0) {
if (typeof nameOrParam === "object") {
this.name = nameOrParam.name;
this.age = nameOrParam.age;
this.sex = nameOrParam.sex;
} else {
this.name = nameOrParam;
this.age = age_;
this.sex = "未知";
}
}
public show(): string {
let str = `這是一位${this.age}的${this.sex},名叫${this.name}`;
console.log(str);
return str;
}
}
const a = new Love("小麗", 18);
const b = new Love(san);
a.show(); //這是一位18的未知,名叫小麗
b.show(); //這是一位18的男,名叫山姆
