TypeScript學(xué)習(xí)筆記
1. 安裝TS
- 全局安裝
npm install typescript@latest -g
- 在根目錄下生成
tsconfig.json文件
tsc --init
以上這一步一定是要運(yùn)行的聚霜，否則 vscode 會(huì)出現(xiàn)變量錯(cuò)誤
- 啟動(dòng)
tsc -w 文件名
2. TS的類型聲明
- 可以把類型用在
變量當(dāng)中
//變量的使用
let num: number = 123;
console.log(123);
let str: string = '123';
console.log(str);
- 可以把類型用在
函數(shù)中脚粟，如函數(shù)的參數(shù)督勺、返回值
//函數(shù)的使用
function sum(a: number, b: number): number {
return a + b;
}
let result = sum(123, 456);
console.log(result);
- TS可以用的其他類型
- 可以使用
|來(lái)連接多個(gè)類型 (聯(lián)合類型)
let b: "male" | "female";
b = "male";
b = "female";
b = "123" //這是不行的
//boolean | string
let c: boolean | string;
c = true;
c = 'hello';
-
any表示默認(rèn)關(guān)閉TS
//any 表示的是任意類型, 一個(gè)變量設(shè)置類型為 any 后相當(dāng)于對(duì)該變量關(guān)閉TS的類型檢測(cè), 使用TS時(shí), 不建議使用 any 類型鲤看。
let d: any;
d = 10;
d = "hello";
d = true;
//如果變量后面不加 any, 會(huì)自動(dòng)加上晒他。
let f;
f = 10;
f = "hello";
f = true;
-
unknown表示未知類型的值
//unknown 表示未知類型的值
let e: unknown;
e=10;
e="hello";
e=true;
//unknown 不能把定義好的類型賦值給 unknown 的變量
let s:string = '123';
s=e; //報(bào)錯(cuò)
// unknown 實(shí)際上就是一個(gè)類型安全的any
// unknown 類型的變量台盯，不能直接賦值給其他變量
//解決報(bào)錯(cuò) s = e 的辦法, 賦值前進(jìn)行類型檢測(cè), 這樣就不會(huì)報(bào)錯(cuò)了
if (typeof e === "string") {
s = e;
}
//類型斷言, 可以用來(lái)告訴解析器變量的實(shí)際類型, 也可以解決 s = e 報(bào)錯(cuò)
s = e as string;
s = <string>e;
-
void用來(lái)表示空
// void 用來(lái)表示空, 一函數(shù)為例, 就表示沒(méi)有返回值的函數(shù), 但可以返回 undefined
function fn(): void {
return undefined;
}
-
never表示永遠(yuǎn)不會(huì)返回結(jié)果
// never 表示永遠(yuǎn)不會(huì)返回結(jié)果
function fn2(): never {
throw new Error("報(bào)錯(cuò)了! ");
}
-
object表示一個(gè) js 對(duì)象
let a: object;
a = {};
a = function () {
}
// {} 用來(lái)指定對(duì)象中可以包含哪些屬性
// 語(yǔ)法：{屬性名:屬性值, 屬性名:屬性值}
// 在屬性名后邊加上?, 表示屬性是可選的
let g: { name: string, age?: number };
g = { name: '孫悟空', age: 18 };
// [propName: string]: any
let h: { name: string, [propName: string]: any }
h = {name:'豬八戒', age:18, gender:'男'};
//比較常用的寫法
// [propName: string]: any
let h: { name: string, [propName: string]: any }
h = { name: '豬八戒', age: 18, gender: '男' };
// 設(shè)置函數(shù)結(jié)構(gòu)的類型聲明
let j: (a: string, b: string) => number;
j = function (n1: string, n2: string): number {
return 10;
}
// string 表示字符串?dāng)?shù)組
let v: string[];
v = ['a', 'b', 'c'];
//number[] 表示數(shù)值
let w: number[];
w = [1, 2, 3];
let m: Array<number>;
m = [1, 2, 3];
- 元組
//元組就是固定長(zhǎng)度的數(shù)組
let h: [string, number]; //可以寫多個(gè)類型
h = ['hello', 123];
-
enum枚舉
enum Gender {
Male,
Female
}
let i: { name: string, gender: Gender };
i = {
name:'孫悟空',
gender:Gender.Male
}
console.log(i.gender === Gender.Male); //true
3. TS的編譯選項(xiàng)（tsconfig.json）
{
/*
tsconfig.json 是ts編譯器的配置文件亮蛔，ts編譯器可以更具它的信息來(lái)對(duì)代碼進(jìn)行編譯
"include" 用來(lái)表示指定哪些ts文件需要被編譯
路徑；
*表示任意文件浴讯，
**表示任意目錄
"exclude" 用來(lái)表示不需要被編譯的文件目錄
默認(rèn)值：{"node_modules", "bower_components", "jspm_packages"}
*/
"include": [
"./src/**/*"
],
// "exclude": [
// "./src/hello/**/*"
// ]
//compilerOptions 編譯器的選項(xiàng)
"compilerOptions": {
//target 用來(lái)指定ts被編譯為ES的版本
//'es3', 'es5', 'es6', 'es2015', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'esnext'.
"target": "ES2015",
//module 指定要使用的模塊化的規(guī)范
//'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'es2020', 'esnext'
"module": "es2015",
//lib 用來(lái)指定項(xiàng)目所用的庫(kù)
// 'es5', 'es6', 'es2015', 'es7', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'esnext', 'dom',
// 'dom.iterable', 'webworker', 'webworker.importscripts', 'webworker.iterable', 'scripthost', 'es2015.core', 'es2015.collection',
// 'es2015.generator', 'es2015.iterable', 'es2015.promise', 'es2015.proxy', 'es2015.reflect', 'es2015.symbol', 'es2015.symbol.wellknown', 'es2016.array.include',
// 'es2017.object', 'es2017.sharedmemory', 'es2017.string', 'es2017.intl', 'es2017.typedarrays', 'es2018.asyncgenerator', 'es2018.asynciterable', 'es2018.intl',
// 'es2018.promise', 'es2018.regexp', 'es2019.array', 'es2019.object', 'es2019.string', 'es2019.symbol', 'es2020.bigint', 'es2020.promise',
// 'es2020.sharedmemory', 'es2020.string', 'es2020.symbol.wellknown', 'es2020.intl', 'esnext.array', 'esnext.symbol', 'esnext.asynciterable', 'esnext.intl',
//outDir 用來(lái)指定編譯后文件所在的目錄
"outDir": "./dist",
//outFile 將代碼合并為一個(gè)文件
// "outFile": "./dist/app.js",
// 是否對(duì)js文件進(jìn)行編譯朵夏，默認(rèn)是false
"allowJs": true,
// 是否檢查js代碼是否符合語(yǔ)法規(guī)范，默認(rèn)值是false
"checkJs": true,
// 是否移除注釋
"removeComments": true,
// 不生成編譯后的文件
"noEmit": false,
// 當(dāng)有錯(cuò)誤時(shí)不生成編譯文件
"noEmitOnError": true,
// 所有嚴(yán)格檢查的總開關(guān)
"strict": true,
// 用來(lái)設(shè)置編譯后的文件是否使用嚴(yán)格模式榆纽，默認(rèn)是false
"alwaysStrict": true,
// 不允許隱式的any類型
"noImplicitAny": true,
// 不允許不明確類型的this
"noImplicitThis": true,
// 嚴(yán)格檢查空值
"strictNullChecks": true
}
}
4. webpack打包TS
- 安裝webpack
npm i -D webpack-cli typescript ts-loader
- 自動(dòng)生成html
npm i -D html-webpack-plugin
- 自動(dòng)響應(yīng)瀏覽器更新
npm i -D webpack-dev-server
- 清除dist目錄舊文件
npm i -D clean-webpack-plugin
- webpack 中所有的配置信息都應(yīng)該寫在
module.exports中
module.exports = {
mode: 'none',
// 指定入口文件
entry: "./src/index.ts",
// 指定打包文件所在目錄
output: {
//指定打包文件的目錄
path: path.resolve(__dirname, 'dist'),
//打包后文件的名字
filename: "bundle.js",
//告訴webpack不使用箭頭函數(shù)
environment: {
arrowFunction: false
}
},
//指定webpack打包時(shí)要使用的模塊
module: {
// 指定要loader加載的規(guī)則
rules: [
{
// test指定的時(shí)規(guī)則生效的文件
test: /\.ts$/,//以ts結(jié)尾的文件
// 要使用的loader
use: [
// 配置babel
{
//指定加載器
loader: "babel-loader",
// 設(shè)置babel
options: {
//設(shè)置預(yù)定義的環(huán)境
presets: [
[
//指定環(huán)境的插件
"@babel/preset-env",
// 配置信息
{
// 要兼容的目標(biāo)瀏覽器及版本
targets: {
"chrome": "58",
"ie": "11"
},
//指定corejs的版本
"corejs": "3",
//使用corejs的方式 "usage" 表示按需加載
"useBuiltIns": "usage"
}
]
]
}
},
// 'babel-loader',
'ts-loader'
],
// 要排除的文件
exclude: /node-modules/
}
]
},
//配置Webpack 插件
plugins: [
new CleanWebpackPlugin(),
new HTMLWebpackPlugin({
// title: "這是一個(gè)自定義的title"仰猖、
template: "./src/index.html"
}),
],
// 用來(lái)設(shè)置引用模塊捏肢，可以將這些文件識(shí)別為模塊
resolve: {
extensions: ['.ts', '.js']
}
}
5. 面向?qū)ο?/h3>
面向?qū)ο笫浅绦蛑幸粋€(gè)非常重要的思想，它被很多同學(xué)理解成了一個(gè)比較難饥侵，比較深?yuàn)W的問(wèn)題鸵赫，其實(shí)不然。面向?qū)ο蠛芎?jiǎn)單躏升，簡(jiǎn)而言之就是程序之中所有的操作都需要通過(guò)對(duì)象來(lái)完成辩棒。
- 舉例來(lái)說(shuō)：
- 操作瀏覽器要使用window對(duì)象
- 操作網(wǎng)頁(yè)要使用document對(duì)象
- 操作控制臺(tái)要使用console對(duì)象
一切操作都要通過(guò)對(duì)象，也就是所謂的面向?qū)ο笈蚴瑁敲磳?duì)象到底是什么呢盗温？這就要先說(shuō)到程序是什么，計(jì)算機(jī)程序的本質(zhì)就是對(duì)現(xiàn)實(shí)事物的抽象成肘，抽象的反義詞是具體，比如：照片是對(duì)一個(gè)具體的人的抽象斧蜕，汽車模型是對(duì)具體汽車的抽象等等双霍。程序也是對(duì)事物的抽象，在程序中我們可以表示一個(gè)人批销、一條狗洒闸、一把槍、一顆子彈等等所有的事物均芽。一個(gè)事物到了程序中就變成了一個(gè)對(duì)象丘逸。
在程序中所有的對(duì)象都被分成了兩個(gè)部分?jǐn)?shù)據(jù)和功能，以人為例掀宋，人的姓名深纲、性別、年齡劲妙、身高湃鹊、體重等屬于數(shù)據(jù)，人可以說(shuō)話镣奋、走路币呵、吃飯、睡覺(jué)這些屬于人的功能侨颈。數(shù)據(jù)在對(duì)象中被成為屬性余赢，而功能就被稱為方法。所以簡(jiǎn)而言之哈垢，在程序中一切皆是對(duì)象妻柒。
1、類（class）
要想面向?qū)ο笪屡猓僮鲗?duì)象蛤奢，首先便要擁有對(duì)象鬼癣，那么下一個(gè)問(wèn)題就是如何創(chuàng)建對(duì)象。要?jiǎng)?chuàng)建對(duì)象啤贩，必須要先定義類待秃，所謂的類可以理解為對(duì)象的模型，程序中可以根據(jù)類創(chuàng)建指定類型的對(duì)象痹屹，舉例來(lái)說(shuō)：可以通過(guò)Person類來(lái)創(chuàng)建人的對(duì)象章郁，通過(guò)Dog類創(chuàng)建狗的對(duì)象，通過(guò)Car類來(lái)創(chuàng)建汽車的對(duì)象志衍，不同的類可以用來(lái)創(chuàng)建不同的對(duì)象暖庄。
-
定義類：
class 類名 { 屬性名: 類型; constructor(參數(shù): 類型){ this.屬性名 = 參數(shù); } 方法名(){ .... } }
-
示例：
class Person{ name: string; age: number; constructor(name: string, age: number){ this.name = name; this.age = age; } sayHello(){ console.log(`大家好，我是${this.name}`); } }
-
使用類：
const p = new Person('孫悟空', 18); p.sayHello();
2楼肪、面向?qū)ο蟮奶攸c(diǎn)
-
封裝
對(duì)象實(shí)質(zhì)上就是屬性和方法的容器培廓，它的主要作用就是存儲(chǔ)屬性和方法，這就是所謂的封裝
默認(rèn)情況下春叫，對(duì)象的屬性是可以任意的修改的肩钠，為了確保數(shù)據(jù)的安全性，在TS中可以對(duì)屬性的權(quán)限進(jìn)行設(shè)置
-
只讀屬性（readonly）：
- 如果在聲明屬性時(shí)添加一個(gè)readonly暂殖，則屬性便成了只讀屬性無(wú)法修改
-
TS中屬性具有三種修飾符：
- public（默認(rèn)值）价匠，可以在類、子類和對(duì)象中修改
- protected 呛每，可以在類踩窖、子類中修改
- private ，可以在類中修改
-
示例：
-
public
class Person{ public name: string; // 寫或什么都不寫都是public public age: number; constructor(name: string, age: number){ this.name = name; // 可以在類中修改 this.age = age; } sayHello(){ console.log(`大家好晨横，我是${this.name}`); } } class Employee extends Person{ constructor(name: string, age: number){ super(name, age); this.name = name; //子類中可以修改 } } const p = new Person('孫悟空', 18); p.name = '豬八戒';// 可以通過(guò)對(duì)象修改
-
protected
class Person{ protected name: string; protected age: number; constructor(name: string, age: number){ this.name = name; // 可以修改 this.age = age; } sayHello(){ console.log(`大家好洋腮，我是${this.name}`); } } class Employee extends Person{ constructor(name: string, age: number){ super(name, age); this.name = name; //子類中可以修改 } } const p = new Person('孫悟空', 18); p.name = '豬八戒';// 不能修改
-
private
class Person{ private name: string; private age: number; constructor(name: string, age: number){ this.name = name; // 可以修改 this.age = age; } sayHello(){ console.log(`大家好，我是${this.name}`); } } class Employee extends Person{ constructor(name: string, age: number){ super(name, age); this.name = name; //子類中不能修改 } } const p = new Person('孫悟空', 18); p.name = '豬八戒';// 不能修改
-
-
屬性存取器
對(duì)于一些不希望被任意修改的屬性手形，可以將其設(shè)置為private
直接將其設(shè)置為private將導(dǎo)致無(wú)法再通過(guò)對(duì)象修改其中的屬性
我們可以在類中定義一組讀取徐矩、設(shè)置屬性的方法，這種對(duì)屬性讀取或設(shè)置的屬性被稱為屬性的存取器
讀取屬性的方法叫做setter方法叁幢，設(shè)置屬性的方法叫做getter方法
-
示例：
class Person{ private _name: string; constructor(name: string){ this._name = name; } get name(){ return this._name; } set name(name: string){ this._name = name; } } const p1 = new Person('孫悟空'); console.log(p1.name); // 通過(guò)getter讀取name屬性 p1.name = '豬八戒'; // 通過(guò)setter修改name屬性
-
靜態(tài)屬性
靜態(tài)屬性（方法）滤灯，也稱為類屬性。使用靜態(tài)屬性無(wú)需創(chuàng)建實(shí)例曼玩，通過(guò)類即可直接使用
靜態(tài)屬性（方法）使用static開頭
-
示例：
class Tools{ static PI = 3.1415926; static sum(num1: number, num2: number){ return num1 + num2 } } console.log(Tools.PI); console.log(Tools.sum(123, 456));
-
this
- 在類中鳞骤，使用this表示當(dāng)前對(duì)象
-
繼承
繼承時(shí)面向?qū)ο笾械挠忠粋€(gè)特性
-
通過(guò)繼承可以將其他類中的屬性和方法引入到當(dāng)前類中
-
示例：
class Animal{ name: string; age: number; constructor(name: string, age: number){ this.name = name; this.age = age; } } class Dog extends Animal{ bark(){ console.log(`${this.name}在汪汪叫！`); } } const dog = new Dog('旺財(cái)', 4); dog.bark();
-
通過(guò)繼承可以在不修改類的情況下完成對(duì)類的擴(kuò)展
-
重寫
發(fā)生繼承時(shí)黍判，如果子類中的方法會(huì)替換掉父類中的同名方法豫尽，這就稱為方法的重寫
-
示例：
class Animal{ name: string; age: number; constructor(name: string, age: number){ this.name = name; this.age = age; } run(){ console.log(`父類中的run方法！`); } } class Dog extends Animal{ bark(){ console.log(`${this.name}在汪汪叫顷帖！`); } run(){ console.log(`子類中的run方法美旧，會(huì)重寫父類中的run方法渤滞！`); } } const dog = new Dog('旺財(cái)', 4); dog.bark();在子類中可以使用super來(lái)完成對(duì)父類的引用
-
抽象類（abstract class）
抽象類是專門用來(lái)被其他類所繼承的類，它只能被其他類所繼承不能用來(lái)創(chuàng)建實(shí)例
abstract class Animal{ abstract run(): void; bark(){ console.log('動(dòng)物在叫~'); } } class Dog extends Animals{ run(){ console.log('狗在跑~'); } }使用abstract開頭的方法叫做抽象方法榴嗅，抽象方法沒(méi)有方法體只能定義在抽象類中妄呕，繼承抽象類時(shí)抽象方法必須要實(shí)現(xiàn)
3、接口（Interface）
接口的作用類似于抽象類嗽测，不同點(diǎn)在于接口中的所有方法和屬性都是沒(méi)有實(shí)值的绪励，換句話說(shuō)接口中的所有方法都是抽象方法。接口主要負(fù)責(zé)定義一個(gè)類的結(jié)構(gòu)唠粥，接口可以去限制一個(gè)對(duì)象的接口疏魏，對(duì)象只有包含接口中定義的所有屬性和方法時(shí)才能匹配接口。同時(shí)晤愧，可以讓一個(gè)類去實(shí)現(xiàn)接口大莫，實(shí)現(xiàn)接口時(shí)類中要保護(hù)接口中的所有屬性。
-
示例（檢查對(duì)象類型）：
interface Person{ name: string; sayHello():void; } function fn(per: Person){ per.sayHello(); } fn({name:'孫悟空', sayHello() {console.log(`Hello, 我是 ${this.name}`)}});
-
示例（實(shí)現(xiàn)）
interface Person{ name: string; sayHello():void; } class Student implements Person{ constructor(public name: string) { } sayHello() { console.log('大家好官份，我是'+this.name); } }
4葵硕、泛型（Generic）
定義一個(gè)函數(shù)或類時(shí)，有些情況下無(wú)法確定其中要使用的具體類型（返回值贯吓、參數(shù)、屬性的類型不能確定）蜀变，此時(shí)泛型便能夠發(fā)揮作用悄谐。
-
舉個(gè)例子：
function test(arg: any): any{ return arg; }上例中，test函數(shù)有一個(gè)參數(shù)類型不確定库北，但是能確定的時(shí)其返回值的類型和參數(shù)的類型是相同的爬舰，由于類型不確定所以參數(shù)和返回值均使用了any，但是很明顯這樣做是不合適的寒瓦，首先使用any會(huì)關(guān)閉TS的類型檢查情屹，其次這樣設(shè)置也不能體現(xiàn)出參數(shù)和返回值是相同的類型
使用泛型：
function test<T>(arg: T): T{ return arg; }這里的
<T>就是泛型，T是我們給這個(gè)類型起的名字（不一定非叫T）杂腰，設(shè)置泛型后即可在函數(shù)中使用T來(lái)表示該類型垃你。所以泛型其實(shí)很好理解，就表示某個(gè)類型喂很。-
那么如何使用上邊的函數(shù)呢惜颇？
-
方式一（直接使用）：
test(10)使用時(shí)可以直接傳遞參數(shù)使用，類型會(huì)由TS自動(dòng)推斷出來(lái)少辣，但有時(shí)編譯器無(wú)法自動(dòng)推斷時(shí)還需要使用下面的方式
-
方式二（指定類型）：
test<number>(10)也可以在函數(shù)后手動(dòng)指定泛型
-
-
可以同時(shí)指定多個(gè)泛型凌摄，泛型間使用逗號(hào)隔開：
function test<T, K>(a: T, b: K): K{ return b; } test<number, string>(10, "hello");使用泛型時(shí)，完全可以將泛型當(dāng)成是一個(gè)普通的類去使用
-
類中同樣可以使用泛型：
class MyClass<T>{ prop: T; constructor(prop: T){ this.prop = prop; } }
-
除此之外漓帅，也可以對(duì)泛型的范圍進(jìn)行約束
interface MyInter{ length: number; } function test<T extends MyInter>(arg: T): number{ return arg.length; }使用T extends MyInter表示泛型T必須是MyInter的子類锨亏，不一定非要使用接口類和抽象類同樣適用痴怨。
本文由mdnice多平臺(tái)發(fā)布
