當(dāng)前位置：首頁 > news >正文

ui設(shè)計師培訓(xùn)騙局seo實戰(zhàn)培訓(xùn)

news 2025/7/6 8:41:44

ui設(shè)計師培訓(xùn)騙局,seo實戰(zhàn)培訓(xùn),疫情最新數(shù)據(jù)消息全球排行榜,miit網(wǎng)站備案TypeSCript簡介 TypeScript是JavaScript的超集。它對JS進行了擴展，向JS中引入了類型的概念，并添加了許多新的特性。TS代碼需要通過編譯器編譯為JS，然后再交由JS解析器執(zhí)行。TS完全兼容JS，換言之，任何的JS代碼都可以直…

TypeSCript簡介

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

TS環(huán)境搭建

NODEJS安裝參照

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

基本類型

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

語法：

	let 變量 = 'hello' // TS擁有自動判斷類型的機制，該變量此時為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對象
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))

字面量

//使用字面量進行類型聲明
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類型實際上是一個類型安全的any，不能直接賦值給其他變量
let f: unknown
f = 'hello'
f = 3333// unknown類型可以進行類型斷言
/*語法：
*   變量 as 類型
*   <類型>變量*/
c = f as number
c = <number>f

void

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

never

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

object

let a: object
a = {}
a = function () {
}
console.log(a)
//{}用來指定對象中包含那些屬性
// 語法：{屬性名：屬性值，屬性名：屬性值}
// 屬性名后面加上？，表示該屬性為可選屬性
let b: { name: string, age?: number }
b = {name: 'jsl', age: 20}
console.log(b)
// [propName: string]: any表示可以添加多個任意類型的屬性
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[] 表示一個字符串類型的數(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)

類型別名

// & 表示同時
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

編譯選項

如果直接使用tsc指令，則可以自動將當(dāng)前項目下的所有ts文件編譯為js文件。
但是能直接使用tsc命令的前提是，要先在項目根目錄下創(chuàng)建一個ts的配置文件 tsconfig.json
tsconfig.json是一個JSON文件，添加配置文件后，只需只需 tsc 命令即可完成對整個項目的編譯

配置選項

配置選項：
- include
  - 定義希望被編譯文件所在的目錄
  - 默認(rèn)值：[ “**/*” ]
  - 示例：
    - ```
    "include" : ["src/**/*", "tests/**/*"]
```
- 上述示例中，所有src目錄和tests目錄下的文件都會被編譯
- exclude
  - 定義需要排除在外的目錄
  - 默認(rèn)值：[“node_modules”, “bower_components”, “jspm_packages”]
  - 示例：
    - ```
    "exclude": ["./src/hello/**/*"]
```
- 上述示例中，src下hello目錄下的文件都不會被編譯
- extends
  - 定義被繼承的配置文件
  - 示例：
    - ```
    "extends": "./configs/base"
```
- 上述示例中，當(dāng)前配置文件中會自動包含config目錄下base.json中的所有配置信息
- files
  - 指定被編譯文件的列表，只有需要編譯的文件少時才會用到
  - 示例：
    - ```
    "files": ["core.ts","sys.ts","types.ts","scanner.ts","parser.ts","utilities.ts","binder.ts","checker.ts","tsc.ts"]
```
- 列表中的文件都會被TS編譯器所編譯
- compilerOptions
  - 編譯選項是配置文件中非常重要也比較復(fù)雜的配置選項
  - 在compilerOptions中包含多個子選項，用來完成對編譯的配置
    - 項目選項
      
      target
      
      設(shè)置ts代碼編譯的目標(biāo)版本
      
      可選值：
      
      ES3（默認(rèn)）、ES5(推薦)、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext
      
      示例：
      
      "compilerOptions": {"target": "ES6" }
      
      如上設(shè)置，我們所編寫的ts代碼將會被編譯為ES6版本的js代碼
      
      lib
      
      指定代碼運行時所包含的庫（宿主環(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文件會和ts文件位于相同的目錄，設(shè)置outDir后可以改變編譯后文件的位置
      
      示例：
      
      "compilerOptions": {"outDir": "dist" }
      
      設(shè)置后編譯后的js文件將會生成到dist目錄
      
      outFile
      
      將所有的文件編譯為一個js文件
      
      默認(rèn)會將所有的編寫在全局作用域中的代碼合并為一個js文件，如果module制定了None、System或AMD則會將模塊一起合并到文件之中
      
      示例：
      
      "compilerOptions": {"outFile": "dist/app.js" }
      
      rootDir
      
      指定代碼的根目錄，默認(rèn)情況下編譯后文件的目錄結(jié)構(gòu)會以最長的公共目錄為根目錄，通過rootDir可以手動指定根目錄
      
      示例：
      
      "compilerOptions": {"rootDir": "./src" }
      
      allowJs
      
      是否對js文件編譯
      
      checkJs
      
      是否對js文件進行檢查
      
      示例：
      
      "compilerOptions": {"allowJs": true,"checkJs": true }
      
      removeComments
      
      是否刪除注釋
      默認(rèn)值：false
      
      noEmit
      
      不對代碼進行編譯
      默認(rèn)值：false
      
      sourceMap
      
      是否生成sourceMap
      默認(rèn)值：false
    - 嚴(yán)格檢查
      
      strict
      啟用所有的嚴(yán)格檢查，默認(rèn)值為true，設(shè)置后相當(dāng)于開啟了所有的嚴(yán)格檢查
      
      alwaysStrict
      總是以嚴(yá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ù)
    - 高級
      
      allowUnreachableCode
      檢查不可達(dá)代碼
      可選值：
      true，忽略不可達(dá)代碼
      false，不可達(dá)代碼將引起錯誤
      
      noEmitOnError
      有錯誤的情況下不進行編譯
      默認(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被編譯為哪個ES版本(ES6 推薦)"target": "ES6",// module：使用哪個模塊化標(biāo)準(zhǔn)(ES6 推薦)"module": "ES6",// lib：指定項目中要使用的庫(don't modify generally)//"lib": [],// outDir：編譯后的js文件存放目錄(output directory)"outDir": "./dist",// outFile：將編譯后的文件合并為一個文件//"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：有錯誤時不生成編譯文件"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對項目進行打包

通常情況下，實際開發(fā)中我們都需要使用構(gòu)建工具對代碼進行打包，TS同樣也可以結(jié)合構(gòu)建工具一起使用，下邊以webpack為例介紹一下如何結(jié)合構(gòu)建工具使用TS。
步驟：
1. 初始化項目
  - 進入項目根目錄，執(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個包
      - 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插件，用來自動創(chuàng)建html文件

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

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

根目錄下創(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']}
}

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

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

修改package.json添加如下配置

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

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

面向?qū)ο?/h2>
操作瀏覽器要使用window對象
操作網(wǎng)頁要使用document對象
操作控制臺要使用console對象

類

定義類

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ā)生繼承時，如果子類中的方法會替換掉父類中的同名方法，這就稱為方法的重寫

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)建實例

abstract class Animal {name: string;age: number;protected constructor(name: string, age: number) {this.name = namethis.age = age}// 定義一個抽象方法，讓子類去實現(xiàn)具體的代碼// 只能定義在抽象類中，子類必須對抽象方法進行重寫abstract say(): void
}class Dog extends Animal {type: string;constructor(name: string, age: number, type: string) {super(name, age);this.type = type}//實現(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);}//實現(xiàn)父類的抽象方法say() {console.log('Cat類 ' + this.name)}
}new Dog('狗勝', 4, '田園').say()
new Cat('芒果', 2).say()

接口 interface

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

// 描述一個對象的類型
type objType = {name: string,age: number,gender: number,
}const obj: objType = {name: 'jsl',age: 20,gender: 1
}console.log(obj)//定義一個接口
//定義接口就是定義一套規(guī)范，所有的屬性 方法 都沒有實際的值
//接口中的方法都是抽象方法，抽象類里面可有有抽象方法也可以有普通方法
//接口用來實現(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)//類實現(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 實現(xiàn)objInterface接口 實現(xiàn)eat方法')}run(): void {console.log('myInterface 實現(xiàn)objInterface接口 實現(xiàn)run方法')}}
let i = new myInterface('打嗝', 2, 'zhegnzhou')
i.eat()
console.log(i.name = '可樂');

泛型（Generic）

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

/*泛型*///定義一個泛型函數(shù)
/*
函數(shù)有一個參數(shù)類型不確定，但是能確定的時其返回值的類型和參數(shù)的類型是相同的，由于類型不確定所以參數(shù)和返回值均使用了any，但是很明顯這樣做是不合適的，首先使用any會關(guān)閉TS的類型檢查，其次這樣設(shè)置也不能體現(xiàn)出參數(shù)和返回值是相同的類型,這里就用到了泛型
*/function fun<K> (a: K): K {return a
}
/*這里的```<T>```就是泛型，T是我們給這個類型起的名字（不一定非叫T），設(shè)置泛型后即可在函數(shù)中使用T來表示該類型。所以泛型其實很好理解，就表示某個類型。
*/
fun(123) // 不指定泛型，TS可以自動對類型進行推斷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

封裝
- 對象實質(zhì)上就是屬性和方法的容器，它的主要作用就是存儲屬性和方法，這就是所謂的封裝
- 默認(rèn)情況下，對象的屬性是可以任意的修改的，為了確保數(shù)據(jù)的安全性，在TS中可以對屬性的權(quán)限進行設(shè)置
- 只讀屬性（readonly）：
  - 如果在聲明屬性時添加一個readonly，則屬性便成了只讀屬性無法修改
- TS中屬性具有三種修飾符：
  - public（默認(rèn)值），可以在類、子類和對象中修改
  - protected ，可以在類、子類中修改
  - private ，可以在類中修改
屬性存取器
- 對于一些不希望被任意修改的屬性，可以將其設(shè)置為private
- 直接將其設(shè)置為private將導(dǎo)致無法再通過對象修改其中的屬性
- 我們可以在類中定義一組讀取、設(shè)置屬性的方法，這種對屬性讀取或設(shè)置的屬性被稱為屬性的存取器
- 讀取屬性的方法叫做setter方法，設(shè)置屬性的方法叫做getter方法

/*對類 私有屬性封裝 設(shè)置set get 方法
* public(默認(rèn)) 修飾的屬性可以在任意位置訪問、修改
* protected：受保護的，修飾的屬性可以在自身的類和子類中訪問 修改
* 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}//可以進行傳值判斷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()

貪吃蛇模塊

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

使用上下方向鍵控制移動
使用webpack搭建開發(fā)環(huán)境；
這里的一些配置環(huán)境直接粘貼就好，重點是幾個業(yè)務(wù)類的開發(fā)和蛇的移動邏輯開發(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文件時生效，創(chuàng)建了html文件后該屬性失效title: 'hello',template: './public/index.html',filename: 'index.html'})],devServer: {open: true,port: 8890},resolve: {extensions: ['.ts', '.js']}
}

查看全文

http://aloenet.com.cn/news/42469.html

国产亚洲精品福利在线无卡一,国产精久久一区二区三区,亚洲精品无码国模,精品久久久久久无码专区不卡

ui設(shè)計師培訓(xùn)騙局seo實戰(zhàn)培訓(xùn)

TypeSCript簡介

TS環(huán)境搭建

基本類型

number

字面量

any

unknown

void

never

object

函數(shù)

Array

元組 tuple

枚舉 enum

類型別名

編譯選項

配置選項

使用webpack對項目進行打包

面向?qū)ο?/h2>
操作瀏覽器要使用window對象
操作網(wǎng)頁要使用document對象
操作控制臺要使用console對象

類

定義類

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

抽象類

接口 interface

泛型（Generic）

面向?qū)ο蟮奶攸c

貪吃蛇模塊

相關(guān)文章：

国产亚洲精品福利在线无卡一,国产精久久一区二区三区,亚洲精品无码国模,精品久久久久久无码专区不卡

TypeSCript簡介

TS環(huán)境搭建

基本類型

number

字面量

any

unknown

void

never

object

函數(shù)

Array

元組 tuple

枚舉 enum

類型別名

編譯選項

配置選項

使用webpack對項目進行打包

面向?qū)ο?/h2> 操作瀏覽器要使用window對象操作網(wǎng)頁要使用document對象操作控制臺要使用console對象

類

定義類

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

抽象類

接口 interface

泛型（Generic）

面向?qū)ο蟮奶攸c

貪吃蛇模塊

相關(guān)文章：

面向?qū)ο?/h2>
操作瀏覽器要使用window對象
操作網(wǎng)頁要使用document對象
操作控制臺要使用console對象