TS開發(fā)環(huán)境搭建

1.下載node.js
2.安裝node.js
3.使用npm全局安裝typescript

• 進(jìn)入命令行
• 輸入： npm install -g typescript
  4.創(chuàng)建一個ts文件 xxx.ts
  5.使用tsc對ts文件進(jìn)行編譯
• 進(jìn)入命令行
• 進(jìn)入ts文件所在目錄
• 執(zhí)行命令： tsc xxx.ts

TS的類型聲明

console.log('hello Ts')
// TS的類型聲明
let n: number;
n = 1
let a: string = '1';
let b = false  //如果變量的聲明和賦值同時進(jìn)行死陆，TS是可以自動對變量進(jìn)行類型檢測

image.png

console.log('hello Ts')
// TS的類型聲明
let n: number;
n = 1
let a: string = '1';
let b = false  //如果變量的聲明和賦值同時進(jìn)行昼接，TS是可以自動對變量進(jìn)行類型檢測


//也可以直接使用字面量進(jìn)行類型聲明
let c: 10

//可以使用 | 來連接多個類型（ 聯(lián)合類型 ）
let d : boolean | string
d = 'd'
d = false

//object表示一個js對象
let o :object;
o={}
o=function(){}

//{}用來指定對象中可以包含哪些屬性
//語法：{屬性名：屬性值版仔，屬性名，屬性值}
//在屬性名后面加上阀湿？，表示屬性是可選的

let o2 :{name:string, age?:number}
o2={name:'ss',age:2}
//[propName:string]:any 表示任意類型的屬性
let o3 :{name:string,[propName:string]:any}
o3={name:'ss',age:12,gender:'男'}

//設(shè)置函數(shù)結(jié)構(gòu)的類型聲明：
//語法： (形參:類型, 形參:類型...) => 返回值
let o4 :(a:number,b:number) => number
o4 = function(n1,n2){
    return n1+n2
}

//數(shù)組的類型聲明：  類型[] Array<類型>
//string[]表示字符串?dāng)?shù)組
let e: string[]
e = ['a','b']
//number[]表示數(shù)值數(shù)組
let f: Array<number>
f=[1,2,3]

//元組，就說固定長度的數(shù)組
//語法：[類型,類型,類型]
let g:[string,string,number]
g = ['hello','abc',2]

//枚舉  enum
enum Gender{
    male = 0,
    female = 1

}
let i :{name:string,gender:Gender}
i = {
    name:'ss',
    gender:Gender.male
}
console.log(i.gender = Gender.male)

TS編譯選項

• 自動編譯文件
  編譯文件時，使用 -w指令后吆视，TS編譯器會自動監(jiān)視文件的變化典挑，并在文件發(fā)生變化時對文件進(jìn)行重新編譯
  tsc app.ts -w
• 自動編譯整個項目
  如果直接使用tsc指令，則可以自動將當(dāng)前項目下的所有ts文件編譯為js文件
  但是能直接使用tsc命令的前提是 要先在項目根目錄下創(chuàng)建一個ts的配置文件 tsconfig.json
  tsconfig.json是一個JSON文件啦吧，添加配置文件后搔弄，只需tsc命令即可完成對整個項目的編譯

tsc 編譯所有ts文件,需要配置tsconfig.json文件
tsc -w 監(jiān)視所有文件的變化并重新編譯

• 配置選項
  1. include 定義希望被編譯文件所在的目錄
  2. exclude 定義需要排除在外的目錄
  3. extends 定義被繼承的配置文件

"extends":"./configs/base"

4. files 指定被編譯文件的列表，只有需要編譯的文件少時才會用到
5. compilerOptions 編譯器的選項

{
    /* 
    tsconfig.json 是ts編譯器的配置文件丰滑，ts編譯器可以根據(jù)它的信息來對代碼進(jìn)行編譯
    "include" 用來指定哪些ts文件需要被編譯
        路徑： **  表示任意目錄
                * 表示任意文件
    "exclude" 不需要被編譯的工作路徑
        默認(rèn)值：["node_modules","bower_components","jspm_packages"]
    */
    "include":[
        "./src/**/*"
    ],
    "exclude": [
        "./src/js/**/*"
    ],
    /*
        compilerOptions  編譯器的選項
    */
    "compilerOptions":{
        //target 用來指定ts被編譯為的ES的版本
        //'es5', 'es6', 'es2015', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'es2021', 'es2022', 'esnext'
        "target": "ES6",
        //module 指定要使用的模塊化的范圍
        // 'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'es2020', 'es2022', 'esnext', 'node16', 'nodenext', 'preserve'.
        "module": "System",
        //lib用來指定項目中要使用的庫
        // "lib":[]
        //outDir 用來指定編譯后文件所在的目錄
        "outDir": "./dist",

        //將代碼合并為一個文件
        //設(shè)置outFile后，所有的全局作用域中的代碼會合并到同一個文件中
        // "outFile": "./dist/app.js",

//是否對js文件進(jìn)行編譯倒庵，默認(rèn)是false
        "allowJs": false,
        //檢查js代碼是否符合語法規(guī)范褒墨，默認(rèn)是false
        "checkJs": false,
        //是否移除注釋
        "removeComments": false,
        //不生成編譯后的文件
        "noEmit": false,
        //當(dāng)有錯誤時不生成編譯后的文件
        "noEmitOnError": false,

        //所有嚴(yán)格檢查的總開關(guān)
        "strict": false,
        
        //用來設(shè)置編譯后的文件是否使用嚴(yán)格模式，默認(rèn)false
        "alwaysStrict": false,
        //不允許隱式的any類型
        "noImplicitAny": false,
        //不允許不明確類型的this
        "noImplicitThis": false,
        //嚴(yán)格的檢查空值
        "strictNullChecks": false,
    }
}

使用webpace打包ts代碼

1.初始化項目擎宝，通過命令生成package.json
npm init -y
2.下載構(gòu)建工具
npm i -D webpack webpack-cli typescript ts-loader
3.創(chuàng)建webpack.config.json

//引入一個包
const path = require('path')

//webpack中的所有配置信息都應(yīng)該寫在module.exports中
module.exports = {
    //指定入口文件
    entry: "./src/index.ts",

    //指定打包文件所在目錄
    output: {
        path: path.resolve(__dirname,'dist'),
        filename: "bundle.js"
    },
    module: {
        //指定要加載的規(guī)則
        rules: [
            {
                //test指定的是規(guī)則生效的文件
                test:  /\.ts$/,
                //要是有的loader
                use: 'ts-loader',
                //要排除的文件
                exclude: /node-modules/

            }
        ]
    }

}

4.創(chuàng)建tsconfig.json

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

5.package.json里添加 "build":"webpack"

6. npm run build 進(jìn)行打包
   如果想要index.html也自動生成郁妈，安裝html-webpack-plugin插件，

webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')

//module下配置
//配置webpack插件
    plugins: [
        new HtmlWebpackPlugin({
            // title:'這是一個自定義title',
            template:'./src/index.html'
        })
    ]

7.網(wǎng)頁瀏覽
webpack-dev-server 安裝內(nèi)置服務(wù)器
配置命令
"start": "webpack serve --open"
執(zhí)行npm start 可打開頁面

8. 模塊化報錯配置

//用來設(shè)置引用模塊
    resolve: {
        extensions: ['.ts','.js']
    }

安裝babel

npm i -D @babel/core @babel/preset-env babel-loader core-js
改webpack.config.js

                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"
                                    }
                                ]
                            ]
                        }
                    },
                    'ts-loader'
                ],

webpack打包后箭頭函數(shù)在ie下報錯绍申，解決辦法

    //指定打包文件所在目錄
    output: {
        //指定打包文件的目錄
        path: path.resolve(__dirname,'dist'),
        //打包后的文件
        filename: "bundle.js",
        //告訴webpack不使用箭頭函數(shù)
        environment: {
            arrowFunction: false
        }
    },

面向?qū)ο?/h2>

類

console.log('index')

class Person{
    name: string
    age: number
    constructor(name:string,age:number){
        this.name = name
        this.age = age
    }
    // 方法必須使用該語法噩咪，不能使用ES5的對象完整形式
    call(){
        console.log(this)
    }
}

let aaa = new Person('dsa',18)
aaa.call()
console.log(aaa)

以abstract開頭的類是抽象類

抽象類和其他類區(qū)別不大，只是不能用來創(chuàng)建對象
抽象類就是專門用來繼承的類

abstract class Animal {
  name: string
  constructor(name:string){
    this.name = name
  }

  //定義一個抽象方法
  //抽象方法使用abstract開頭极阅，沒有方法體
  //抽象方法只能定義在抽象類中胃碾，子類必須對抽象方法進(jìn)行重寫
  abstract sayHello():void
}
class Dog extends Animal {
  sayHello(){
    console.log("汪汪汪")
  }
}

接口

//接口就是用來定義一個類的結(jié)構(gòu)，用來定義一個類中應(yīng)該包含哪些屬性和方法
    //同時接口也可以當(dāng)成類型聲明去使用
    interface myInterface {
        name: string
        age: number
    }
    const obj: myInterface = {
        name:'sss',
        age: 18
    }
    //接口可以在定義類的時候去限制類的結(jié)構(gòu)
    //接口中的所有屬性都不能有實際的值
    //接口只定義對象的結(jié)構(gòu)筋搏，而不考慮實際值
    //在接口中所有的方法都是抽象方法

    interface myInter{
        name: string
        sayHello():void
    }
    // 定義類時仆百，可以使類去實現(xiàn)一個接口，
        // 實現(xiàn)接口就是使類滿足接口的要求
    class myClass implements myInter{
        name:string
        constructor(name:string){
            this.name = name
        }
        sayHello(): void {
            console.log('大家好');
            
        }
    }

屬性的封裝

public 修飾的屬性可以在任意位置訪問（修改）默認(rèn)值
private 私有屬性奔脐，私有屬性只能在類內(nèi)部進(jìn)行訪問（修改）
protected 受保護(hù)的屬性俄周，只能在當(dāng)前類和當(dāng)前類的子類中訪問（修改）
getter方法用來讀取屬性
setter方法用來設(shè)置屬性
它們被稱為屬性的存取器

(function(){
    class Person {
        private _name:string
        private _age:number
        constructor(name:string,age:number){
            this._name = name
            this._age = age
        }
        //定義方法獲取name屬性
        getName(){
            return this._name
        }
        //定義方法，用來設(shè)置name屬性
        setName(value:string){
            this._name = value
        }

        //TS中設(shè)置getter方法的方式
        get age(){
            return this._age
        }
        set age(value:number){
            if(value >0){
                this._age = value
            }
        }
    }

    
    const per = new Person('孫武了',18)
    per.setName('豬八戒')
    console.log(per.getName())
    per.age = 30
    console.log(per.age)

class C{
        constructor(public name:string,public age:number){
            this.name = name
            this.age = age
        }
    }
    const c = new C('xxx',18)
    console.log(c)
})()

泛型

在定義函數(shù)或類時髓迎，如果遇到類型不明確就可以使用泛型

    function fn<T>(a:T):T{
        return a
    }
//可以直接調(diào)用具有泛型的函數(shù)
fn(10) //不指定泛型峦朗，TS可以自動對類型進(jìn)行推斷
fn<string>('hello') //指定泛型

案例

安裝less
npm安裝

npm i -D less less-loader css-loader style-loader

webpack.config.json中配置

module: {
  rules: [
       //設(shè)置less文件的處理
            {
                test: /\.less$/,
                use:[
                    "style-loader",
                    "css-loader",
                    "less-loader"
                ]
            }
  ]
}

babel 配置css兼容
npm i -D postcss postcss-loader postcss-preset-env

//設(shè)置less文件的處理
            {
                test: /\.less$/,
                use:[
                    "style-loader",
                    "css-loader",
                    //引入postcss
                    {
                        loader:"postcss-loader",
                        options: {
                            postcssOptions: {
                                plugins: [
                                    [
                                       "postcss-preset-env",
                                       {
                                        browsers:"last 2 versions"
                                       } 
                                    ]
                                ]
                            }
                        }
                    },
                    "less-loader"
                ]
            }