TypeSCript簡介

1. TypeScript是JavaScript的超集。
2. 它對(duì)JS進(jìn)行了擴(kuò)展，向JS中引入了類型的概念，并添加了許多新的特性。
3. TS代碼需要通過編譯器編譯為JS，然后再交由JS解析器執(zhí)行。
4. TS完全兼容JS，換言之，任何的JS代碼都可以直接當(dāng)成TS使用。
5. 相較于JS而言，TS擁有了靜態(tài)類型，更加嚴(yán)格的語法，更強(qiáng)大的功能；
6. TS可以在代碼執(zhí)行前就完成代碼的檢查，減小了運(yùn)行時(shí)異常的出現(xiàn)的幾率；
7. TS代碼可以編譯為任意版本的JS代碼，可有效解決不同JS運(yùn)行環(huán)境的兼容問題；
8. 同樣的功能，TS的代碼量要大于JS，但由于TS的代碼結(jié)構(gòu)更加清晰，變量類型更加明確，在后期代碼的維護(hù)中TS卻遠(yuǎn)遠(yuǎn)勝于JS

TS環(huán)境搭建

NODEJS安裝參照

全局安裝typescript
npm i typescript -g
對(duì)ts文件進(jìn)行編譯
tsc ./index.ts
監(jiān)聽編譯文件的變化事實(shí)更新
tsc ./index.ts -w

基本類型

類型聲明就是為了給變量設(shè)置類型，使得變量只能存儲(chǔ)某種類型的值

語法：

	let 變量 = 'hello' // TS擁有自動(dòng)判斷類型的機(jī)制，該變量此時(shí)為string類型let 變量: 類型;let 變量: 類型 = 值;function fn(參數(shù): 類型, 參數(shù): 類型): 類型{...}

類型：

類型	例子	描述
number	1, -33, 2.5	任意數(shù)字
string	‘hi’, “hi”, hi	任意字符串
boolean	true、false	布爾值true或false
字面量	其本身	限制變量的值就是該字面量的值
any	*	任意類型
unknown	*	類型安全的any
void	空值（undefined）	沒有值（或undefined）
never	沒有值	不能是任何值
object	{name:‘孫悟空’}	任意的JS對(duì)象
array	[1,2,3]	任意JS數(shù)組
tuple	[4,5]	元素，TS新增類型，固定長度數(shù)組
enum	enum{A, B}	枚舉，TS中新增類型

number

let a: number = 1
console.log(a)function sum(a: number, b: number): number {return a + b
}
console.log(sum(123, 456))

字面量

//使用字面量進(jìn)行類型聲明
let b: 'male' | 'female'
b = 'male'
b = 'female'let c: number | boolean
c = 10
c = false
c = true

any

//any類型 , any類型可以賦值給任意變量
//第一種聲明方式
let d: any
d = 'asd'
d = 111
//第二種聲明方式
let e
e = true
e = 222c = d

unknown

//unknown類型實(shí)際上是一個(gè)類型安全的any，不能直接賦值給其他變量
let f: unknown
f = 'hello'
f = 3333// unknown類型可以進(jìn)行類型斷言
/*語法：
*   變量 as 類型
*   <類型>變量*/
c = f as number
c = <number>f

void

//void 返回值為空
function fun(): void {return
}

never

//never 表示永遠(yuǎn)不會(huì)有返回結(jié)果
function fun2(): never {throw new Error('錯(cuò)誤信息')
}

object

let a: object
a = {}
a = function () {
}
console.log(a)
//{}用來指定對(duì)象中包含那些屬性
// 語法：{屬性名：屬性值，屬性名：屬性值}
// 屬性名后面加上？，表示該屬性為可選屬性
let b: { name: string, age?: number }
b = {name: 'jsl', age: 20}
console.log(b)
// [propName: string]: any表示可以添加多個(gè)任意類型的屬性
let c: { name: string, [propName: string]: any }
c = {name: 'jsl', age: 20, gender: '男'}
console.log(c)

函數(shù)

//定義函數(shù)類型
/*設(shè)置函數(shù)結(jié)構(gòu)的類型聲明
*   語法：(參數(shù): 類型, 參數(shù): 類型, ...) => 返回值類型
* */
let d: (a: number, b: number) => number
d = function (a, b): number {return a + b
}
console.log(d(12, 34))

Array

/*數(shù)組類型的聲明
*   類型[]
*   Array<類型>
*/
// string[] 表示一個(gè)字符串類型的數(shù)組
let e: string[]
e = ['1', '23', '445']
let f: Array<number>
f = [1, 2, 3, 4]

元組 tuple

// 元組：元組是固定長度的數(shù)組
//    語法：[類型, 類型, 類型...]
let g: [string, number]
g = ['jsl', 20]

枚舉 enum

/*枚舉類型*/
enum Gender {male,female
}
let h: {name: string, gender: Gender}
h = {name: 'jsl', gender: Gender.male}
console.log(h.gender === Gender.male)

類型別名

// & 表示同時(shí)
let z: {name: string} & {age: number}
z = {name: 'jsl', age: 20}// 類型別名
type myType = 1 | 2 | 3 | 4
// let x: 1 | 2 | 3 | 4
let x: myType
x = 2
x = 4

編譯選項(xiàng)

• 如果直接使用tsc指令，則可以自動(dòng)將當(dāng)前項(xiàng)目下的所有ts文件編譯為js文件。

• 但是能直接使用tsc命令的前提是，要先在項(xiàng)目根目錄下創(chuàng)建一個(gè)ts的配置文件 tsconfig.json

• tsconfig.json是一個(gè)JSON文件，添加配置文件后，只需只需 tsc 命令即可完成對(duì)整個(gè)項(xiàng)目的編譯

配置選項(xiàng)

• 配置選項(xiàng)：

  • include

    • 定義希望被編譯文件所在的目錄

    • 默認(rèn)值：[ “**/*” ]

    • 示例：

      • "include" : ["src/**/*", "tests/**/*"]
        

      • 上述示例中，所有src目錄和tests目錄下的文件都會(huì)被編譯

  • exclude

    • 定義需要排除在外的目錄

    • 默認(rèn)值：[“node_modules”, “bower_components”, “jspm_packages”]

    • 示例：

      • "exclude": ["./src/hello/**/*"]
        

      • 上述示例中，src下hello目錄下的文件都不會(huì)被編譯

  • extends

    • 定義被繼承的配置文件

    • 示例：

      • "extends": "./configs/base"
        

      • 上述示例中，當(dāng)前配置文件中會(huì)自動(dòng)包含config目錄下base.json中的所有配置信息

  • files

    • 指定被編譯文件的列表，只有需要編譯的文件少時(shí)才會(huì)用到

    • 示例：

      • "files": ["core.ts","sys.ts","types.ts","scanner.ts","parser.ts","utilities.ts","binder.ts","checker.ts","tsc.ts"]
        

      • 列表中的文件都會(huì)被TS編譯器所編譯

    • compilerOptions

      • 編譯選項(xiàng)是配置文件中非常重要也比較復(fù)雜的配置選項(xiàng)

      • 在compilerOptions中包含多個(gè)子選項(xiàng)，用來完成對(duì)編譯的配置

        • 項(xiàng)目選項(xiàng)

          • target

            • 設(shè)置ts代碼編譯的目標(biāo)版本

            • 可選值：

              • ES3（默認(rèn)）、ES5(推薦)、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext

            • 示例：

              • "compilerOptions": {"target": "ES6"
                }
                

              • 如上設(shè)置，我們所編寫的ts代碼將會(huì)被編譯為ES6版本的js代碼

          • lib

            • 指定代碼運(yùn)行時(shí)所包含的庫（宿主環(huán)境）

            • 可選值：

              • ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext、DOM、WebWorker、ScriptHost …

            • 示例：

              • "compilerOptions": {"target": "ES6","lib": ["ES6", "DOM"],"outDir": "dist","outFile": "dist/aa.js"
                }
                

          • module

            • 設(shè)置編譯后代碼使用的模塊化系統(tǒng)

            • 可選值：

              • CommonJS、UMD、AMD、System、ES2020、ESNext、None

            • 示例：

              • "compilerOptions": {"module": "CommonJS"
                }
                

          • outDir

            • 編譯后文件的所在目錄

            • 默認(rèn)情況下，編譯后的js文件會(huì)和ts文件位于相同的目錄，設(shè)置outDir后可以改變編譯后文件的位置

            • 示例：

              • "compilerOptions": {"outDir": "dist"
                }
                

              • 設(shè)置后編譯后的js文件將會(huì)生成到dist目錄

          • outFile

            • 將所有的文件編譯為一個(gè)js文件

            • 默認(rèn)會(huì)將所有的編寫在全局作用域中的代碼合并為一個(gè)js文件，如果module制定了None、System或AMD則會(huì)將模塊一起合并到文件之中

            • 示例：

              • "compilerOptions": {"outFile": "dist/app.js"
                }
                

          • rootDir

            • 指定代碼的根目錄，默認(rèn)情況下編譯后文件的目錄結(jié)構(gòu)會(huì)以最長的公共目錄為根目錄，通過rootDir可以手動(dòng)指定根目錄

            • 示例：

              • "compilerOptions": {"rootDir": "./src"
                }
                

          • allowJs

            • 是否對(duì)js文件編譯

          • checkJs

            • 是否對(duì)js文件進(jìn)行檢查

            • 示例：

              • "compilerOptions": {"allowJs": true,"checkJs": true
                }
                

          • removeComments

            • 是否刪除注釋
            • 默認(rèn)值：false

          • noEmit

            • 不對(duì)代碼進(jìn)行編譯
            • 默認(rèn)值：false

          • sourceMap

            • 是否生成sourceMap
            • 默認(rèn)值：false

        • 嚴(yán)格檢查

          • strict
            • 啟用所有的嚴(yán)格檢查，默認(rèn)值為true，設(shè)置后相當(dāng)于開啟了所有的嚴(yán)格檢查
          • alwaysStrict
            • 總是以嚴(yán)格模式對(duì)代碼進(jìn)行編譯
          • noImplicitAny
            • 禁止隱式的any類型
          • noImplicitThis
            • 禁止類型不明確的this
          • strictBindCallApply
            • 嚴(yán)格檢查bind、call和apply的參數(shù)列表
          • strictFunctionTypes
            • 嚴(yán)格檢查函數(shù)的類型
          • strictNullChecks
            • 嚴(yán)格的空值檢查
          • strictPropertyInitialization
            • 嚴(yán)格檢查屬性是否初始化

        • 額外檢查

          • noFallthroughCasesInSwitch
            • 檢查switch語句包含正確的break
          • noImplicitReturns
            • 檢查函數(shù)沒有隱式的返回值
          • noUnusedLocals
            • 檢查未使用的局部變量
          • noUnusedParameters
            • 檢查未使用的參數(shù)

        • 高級(jí)

          • allowUnreachableCode
            • 檢查不可達(dá)代碼
            • 可選值：
              • true，忽略不可達(dá)代碼
              • false，不可達(dá)代碼將引起錯(cuò)誤
          • noEmitOnError
            • 有錯(cuò)誤的情況下不進(jìn)行編譯
            • 默認(rèn)值：false

{/*include: 用來指定那些ts文件需要編譯路徑：     ** 表示任意目錄* 表示任意文件exclude：不需要被編譯的ts文件默認(rèn)值：["node_modules", "bower_components", "jspm_packages"]*/"include": ["./src/*"],"exclude": ["node_modules", "bower_components", "jspm_packages"],"compilerOptions": {// 所有嚴(yán)格檢查的總開關(guān)"strict": true,// target：指定ts被編譯為哪個(gè)ES版本(ES6 推薦)"target": "ES6",// module：使用哪個(gè)模塊化標(biāo)準(zhǔn)(ES6 推薦)"module": "ES6",// lib：指定項(xiàng)目中要使用的庫(don't modify generally)//"lib": [],// outDir：編譯后的js文件存放目錄(output directory)"outDir": "./dist",// outFile：將編譯后的文件合并為一個(gè)文件//"outFile": "./dist/main.js"// allowJs：是否編譯js文件(default false)"allowJs": false,// checkJs：是否檢查js文件符合ts標(biāo)準(zhǔn)(default false)"checkJs": false,// removeComments：是否移除注釋(default false)"removeComments": true,// noEmit：不生成編譯后的文件（默認(rèn) false）
//        "noEmit": false,// noEmitOnError：有錯(cuò)誤時(shí)不生成編譯文件"noEmitOnError": true,// alwaysStrict：使用嚴(yán)格模式（默認(rèn) false）"alwaysStrict": false,// 不允許使用隱式any類型（默認(rèn) false）"noImplicitAny": false,// noImplicitThis：不允許不明確的this（默認(rèn) false）"noImplicitThis": false,// strictNUllChecks：嚴(yán)格檢查空值"strictNullChecks": false,}
}

使用webpack對(duì)項(xiàng)目進(jìn)行打包

• 通常情況下，實(shí)際開發(fā)中我們都需要使用構(gòu)建工具對(duì)代碼進(jìn)行打包，TS同樣也可以結(jié)合構(gòu)建工具一起使用，下邊以webpack為例介紹一下如何結(jié)合構(gòu)建工具使用TS。

• 步驟：

  1. 初始化項(xiàng)目

     • 進(jìn)入項(xiàng)目根目錄，執(zhí)行命令 npm init -y
       • 主要作用：創(chuàng)建package.json文件

  2. 下載構(gòu)建工具

     • npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader html-webpack-plugin
       • 共安裝了6個(gè)包
         • webpack
           • 構(gòu)建工具webpack
         • webpack-cli
           • webpack的命令行工具
         • webpack-dev-server
           • webpack的開發(fā)服務(wù)器
         • typescript
           • ts編譯器
         • ts-loader
           • ts加載器，用于在webpack中編譯ts文件
         • html-webpack-plugin
           • webpack中html插件，用來自動(dòng)創(chuàng)建html文件

開發(fā)中還經(jīng)常需要結(jié)合babel來對(duì)代碼進(jìn)行轉(zhuǎn)換以使其可以兼容到更多的瀏覽器，在上述步驟的基礎(chǔ)上，通過以下步驟再將babel引入到項(xiàng)目中。
安裝依賴包：
- npm i -D @babel/core @babel/preset-env babel-loader core-js
- 共安裝了4個(gè)包，分別是：
- @babel/core
- babel的核心工具
- @babel/preset-env
- babel的預(yù)定義環(huán)境
- @babel-loader
- babel在webpack中的加載器
- core-js
- core-js用來使老版本的瀏覽器支持新版ES語法

• 這樣，使用ts編譯后的文件將會(huì)再次被babel處理，使得代碼可以在大部分瀏覽器中直接使用，可以在配置選項(xiàng)的targets中指定要兼容的瀏覽器版本。

3. 根目錄下創(chuàng)建webpack的配置文件webpack.config.js

const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')module.exports = {entry: './src/main.ts',output: {path: path.join(__dirname, 'dist'),filename: '[name].bundle.js',clean: true,},module: {rules: [{test: /\.ts$/,use: [{loader: "babel-loader",options:{presets: [["@babel/preset-env",{"targets":{"chrome": "58","ie": "11"},"corejs":"3","useBuiltIns": "usage"}]]}},{loader: "ts-loader",}],// use: 'ts-loader',exclude: /node_modules/}]},plugins: [new htmlWebpackPlugin({title: '自定義的title',template: './public/index.html',filename: 'index.html'})],devServer: {open: true,port: 8899},// 用來設(shè)置引用模塊resolve: {extensions: ['.ts', '.js']}
}

4. 根目錄下創(chuàng)建tsconfig.json，配置可以根據(jù)自己需要

   • {"compilerOptions": {"target": "ES2015","module": "ES2015","strict": true}
     }
     

5. 修改package.json添加如下配置

      {...略...
   "scripts": {"dev": "webpack serve --mode=development","build": "webpack"},...略...}```

6. 在src下創(chuàng)建ts文件，并在并命令行執(zhí)行npm run build對(duì)代碼進(jìn)行編譯，或者執(zhí)行npm run dev來啟動(dòng)開發(fā)服務(wù)器

面向?qū)ο?/h2>

• 操作瀏覽器要使用window對(duì)象
• 操作網(wǎng)頁要使用document對(duì)象
• 操作控制臺(tái)要使用console對(duì)象

類

定義類

class Person {// 靜態(tài)屬性static str: string = 'jsl'// 只讀屬性，不可修改readonly age: number = 20say(): string {return '你好，同學(xué)'}
}console.log(new Person().say());
console.log(Person.str)  // 使用類名.靜態(tài)屬性的方式讀取靜態(tài)屬性
console.log(new Person().age)

構(gòu)造器和繼承(extends)

• 通過繼承可以將其他類中的屬性和方法引入到當(dāng)前類中

• 重寫

  • 發(fā)生繼承時(shí)，如果子類中的方法會(huì)替換掉父類中的同名方法，這就稱為方法的重寫

class Animal {name: string;age: number;constructor(name: string, age: number) {this.name = namethis.age = age}say() {console.log(this.name + ' Animal類 說 你好')}
}class Dog extends Animal {type: string;constructor(name: string, age: number, type: string) {super(name, age);this.type = type}sayWang() {//調(diào)用父類的方法super.say()console.log(this.name + '  ' + this.type + '  ' + '汪汪~')}run(num:number) {console.log(this.name + ' run ' + num + '米')}
}class Cat extends Animal {constructor(name: string, age: number) {super(name, age);}sayMiao() {//調(diào)用父類的方法super.say()console.log(this.name + '  ' + this.age + '  ' + '喵喵~')}sayhello = super.say
}const dog: Dog = new Dog('可樂', 4, `田園犬`)
dog.sayWang()
dog.run(100)new Dog('糖果', 1, 'chaiquan').sayWang()
new Cat('火龍果', 2).sayhello()
new Cat('芒果', 7).sayMiao()

抽象類

• 抽象類（abstract class）

  • 抽象類是專門用來被其他類所繼承的類，它只能被其他類所繼承不能用來創(chuàng)建實(shí)例

abstract class Animal {name: string;age: number;protected constructor(name: string, age: number) {this.name = namethis.age = age}// 定義一個(gè)抽象方法，讓子類去實(shí)現(xiàn)具體的代碼// 只能定義在抽象類中，子類必須對(duì)抽象方法進(jìn)行重寫abstract say(): void
}class Dog extends Animal {type: string;constructor(name: string, age: number, type: string) {super(name, age);this.type = type}//實(shí)現(xiàn)父類的抽象方法say() {console.log('Dog類 ：' + this.name + '  ' + this.age + '歲了')}/*run(num: number) {console.log(this.name + ' run ' + num + '米')}*/
}class Cat extends Animal {constructor(name: string, age: number) {super(name, age);}//實(shí)現(xiàn)父類的抽象方法say() {console.log('Cat類 ' + this.name)}
}new Dog('狗勝', 4, '田園').say()
new Cat('芒果', 2).say()

接口 interface

接口的作用類似于抽象類，不同點(diǎn)在于接口中的所有方法和屬性都是沒有實(shí)值的，換句話說接口中的所有方法都是抽象方法。接口主要負(fù)責(zé)定義一個(gè)類的結(jié)構(gòu)，接口可以去限制一個(gè)對(duì)象的接口，對(duì)象只有包含接口中定義的所有屬性和方法時(shí)才能匹配接口。同時(shí)，可以讓一個(gè)類去實(shí)現(xiàn)接口，實(shí)現(xiàn)接口時(shí)類中要保護(hù)接口中的所有屬性。

// 描述一個(gè)對(duì)象的類型
type objType = {name: string,age: number,gender: number,
}const obj: objType = {name: 'jsl',age: 20,gender: 1
}console.log(obj)//定義一個(gè)接口
//定義接口就是定義一套規(guī)范，所有的屬性 方法 都沒有實(shí)際的值
//接口中的方法都是抽象方法，抽象類里面可有有抽象方法也可以有普通方法
//接口用來實(shí)現(xiàn)，抽象類用來繼承
interface objInterface {name: stringage: numberaddress: stringrun(): voideat(): void
}const person: objInterface = {name: 'hello',age: 18,address: '鄭州',eat() {console.log('吃飯')},run() {console.log('跑步')}
}
console.log(person)//類實(shí)現(xiàn)接口，該類就要滿足接口的規(guī)范，是一種標(biāo)準(zhǔn)
class myInterface implements objInterface {address: string;age: number;name: string;constructor(name: string, age: number, address: string) {this.name = namethis.age = agethis.address = address}eat(): void {console.log('myInterface 實(shí)現(xiàn)objInterface接口 實(shí)現(xiàn)eat方法')}run(): void {console.log('myInterface 實(shí)現(xiàn)objInterface接口 實(shí)現(xiàn)run方法')}}
let i = new myInterface('打嗝', 2, 'zhegnzhou')
i.eat()
console.log(i.name = '可樂');

泛型（Generic）

定義一個(gè)函數(shù)或類時(shí)，有些情況下無法確定其中要使用的具體類型（返回值、參數(shù)、屬性的類型不能確定），此時(shí)泛型便能夠發(fā)揮作用。

/*泛型*///定義一個(gè)泛型函數(shù)
/*
函數(shù)有一個(gè)參數(shù)類型不確定，但是能確定的時(shí)其返回值的類型和參數(shù)的類型是相同的，由于類型不確定所以參數(shù)和返回值均使用了any，但是很明顯這樣做是不合適的，首先使用any會(huì)關(guān)閉TS的類型檢查，其次這樣設(shè)置也不能體現(xiàn)出參數(shù)和返回值是相同的類型,這里就用到了泛型
*/function fun<K> (a: K): K {return a
}
/*這里的```<T>```就是泛型，T是我們給這個(gè)類型起的名字（不一定非叫T），設(shè)置泛型后即可在函數(shù)中使用T來表示該類型。所以泛型其實(shí)很好理解，就表示某個(gè)類型。
*/
fun(123) // 不指定泛型，TS可以自動(dòng)對(duì)類型進(jìn)行推斷console.log(fun<string>('hello')); // 指定泛型//接口泛型
interface Inter {name: stringage: numberlength: number
}
class In implements Inter {name: string = 'jsl'age: number = 20length: number = 100}
/*使用T extends MyInter表示泛型T必須是MyInter的子類，不一定非要使用接口類和抽象類同樣適用。
*/
function fun2<K extends Inter> (a: K): number {return a.length
}console.log(fun2(new In()));// 類 泛型
class MyClass<K extends Inter> {name: Kconstructor(name: K) {this.name = name}toString() {console.log(this.name)}
}
new MyClass(new In()).toString()

面向?qū)ο蟮奶攸c(diǎn)

• 封裝

  • 對(duì)象實(shí)質(zhì)上就是屬性和方法的容器，它的主要作用就是存儲(chǔ)屬性和方法，這就是所謂的封裝

  • 默認(rèn)情況下，對(duì)象的屬性是可以任意的修改的，為了確保數(shù)據(jù)的安全性，在TS中可以對(duì)屬性的權(quán)限進(jìn)行設(shè)置

  • 只讀屬性（readonly）：

    • 如果在聲明屬性時(shí)添加一個(gè)readonly，則屬性便成了只讀屬性無法修改

  • TS中屬性具有三種修飾符：

    • public（默認(rèn)值），可以在類、子類和對(duì)象中修改
    • protected ，可以在類、子類中修改
    • private ，可以在類中修改

• 屬性存取器

  • 對(duì)于一些不希望被任意修改的屬性，可以將其設(shè)置為private

  • 直接將其設(shè)置為private將導(dǎo)致無法再通過對(duì)象修改其中的屬性

  • 我們可以在類中定義一組讀取、設(shè)置屬性的方法，這種對(duì)屬性讀取或設(shè)置的屬性被稱為屬性的存取器

  • 讀取屬性的方法叫做setter方法，設(shè)置屬性的方法叫做getter方法

/*對(duì)類 私有屬性封裝 設(shè)置set get 方法
* public(默認(rèn)) 修飾的屬性可以在任意位置訪問、修改
* protected：受保護(hù)的，修飾的屬性可以在自身的類和子類中訪問 修改
* private：私有的，修飾的屬性只能在自身類 中訪問 修改
* */class Person {private name: stringprivate age: numberconstructor(name: string, age: number) {this.name = namethis.age = age}/*想想java就明白了 get  set 方法*//*setName(name: string): void {this.name = name}getName(): string {return this.name}//可以進(jìn)行傳值判斷setAge(age: number): void {if (age >= 0 && age <= 130)this.age = age}getAge(): number {return this.age}*/set name(name: string) {this.name = name}get name(): string {return this.name}set age(age: number) {if (age >= 0 && age <= 130)this.age = age}get age(): number {return this.age}toString() {console.log(this.name + '  ' + this.age)}
}const p = new Person('jsl', 20)
p.setName('hello')
console.log(p.getName())
p.setAge(90)
console.log(p.getAge())
p.toString()

貪吃蛇模塊

頁面實(shí)現(xiàn)一個(gè)簡單地貪吃蛇游戲

使用上下方向鍵控制移動(dòng)
使用webpack搭建開發(fā)環(huán)境；
這里的一些配置環(huán)境直接粘貼就好，重點(diǎn)是幾個(gè)業(yè)務(wù)類的開發(fā)和蛇的移動(dòng)邏輯開發(fā)
涉及到的開發(fā)依賴：

	"scripts": {"dev": "webpack serve --mode=development","build": "webpack --mode=production"},"devDependencies": {"@babel/core": "^7.22.11","@babel/preset-env": "^7.22.14","babel-loader": "^9.1.3","core-js": "^3.32.1","css-loader": "^6.8.1","html-webpack-plugin": "^5.5.3","less": "^4.2.0","less-loader": "^11.1.3","postcss": "^8.4.29","postcss-loader": "^7.3.3","postcss-preset-env": "^9.1.2","style-loader": "^3.3.3","ts-loader": "^9.4.4","typescript": "^5.2.2","webpack": "^5.88.2","webpack-cli": "^5.1.4","webpack-dev-server": "^4.15.1"}

系統(tǒng)文件架構(gòu)

--public--index.html
--src--assets--style--index.less--ts--food.ts--gameControl.ts--scorePanel.ts--snake.ts--index.ts
--package.json
--tsconfig.json
--webpack.config.js

tsconfig.json

{"include": ["./src/**/*"],"compilerOptions": {"target": "ES6","module": "ES6","strict": true,
//        "noEmitOnError": true}
}

webpack.config.js

const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')module.exports = {entry: './src/index.ts',output: {filename: '[name].bundle.js',path: path.join(__dirname, 'dist'),clean: true},module: {rules: [{test: /\.ts$/,use: [{loader: "babel-loader",options:{presets: [["@babel/preset-env",{"targets":{"chrome": "58","ie": "11"},"corejs":"3","useBuiltIns": "usage"}]]}},{loader: "ts-loader",}],// use: 'ts-loader',exclude: /node_modules/},{test: /\.less$/,use: ['style-loader','css-loader',{loader: 'postcss-loader',options: {postcssOptions: {presets: ["postcss-preset-env",{browsers: "last 2 versions"}]}}},'less-loader']}]},plugins: [new htmlWebpackPlugin({//沒有html文件時(shí)生效，創(chuàng)建了html文件后該屬性失效title: 'hello',template: './public/index.html',filename: 'index.html'})],devServer: {open: true,port: 8890},resolve: {extensions: ['.ts', '.js']}
}