typescript必備基礎

時間 2019-11-21

標籤 typescript 必備基礎简体版

原文原文鏈接

1、使用TS前準備

安裝TS (sudo) npm i typescript -g
新建TS項目文件夾，在文件夾下執行 tsc --init 和npm init -y後生成tsconfig.json和package.json
測試TS運行是否正常，新增測試文件src/index.ts

const hello = '可待'console.log(hello);複製代碼

進行編譯 tsc ./src/index.ts成功生成index.js文件

var hello = '可待';console.log(hello);複製代碼

爲了方便使用，不用每次編寫都使用tsc手動編譯，咱們要將項目工程化javascript

2、工程化

2.1 安裝工程化包

webpack:統一編譯html

webpack-cli:爲了使用webpack的一些命令java

webpack-dev-server:更新後不用刷新，自動刷新node

ts-loader:ts編譯規則webpack

typescript:使用typescript語言特性web

html-webpack-plugin:打包的文件直接輸出HTML文件typescript

npm i webpack webpack-cli webpack-dev-server ts-loader typescript 
html-webpack-plugin -D
複製代碼

2.2 配置build/webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    //入口
    entry: './src/index.ts',
    //出口
    output: {
        filename: 'app.js'
    },
    resolve: {
        extensions: ['.js', '.ts', '.tsx']
    },
    devtool: 'cheap-module-eval-source-map',
    module: {
        rules: [{
            test: /\.tsx?$/i,
            use: [{
                loader: 'ts-loader'
            }],
            exclude: /node_modules/
        },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html' //須要添加宿主文件
        })
    ]
}複製代碼

記得添加宿主文件 /public/index.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Ts使用</title> </head> <body> <div id='app'></div> </body> </html> 複製代碼

2.3 修改 package.json 添加項目啓動命令

"scripts": {
    "dev": "webpack-dev-server --config ./build/webpack.config.js"
  },複製代碼

2.4 啓動項目 npm run dev

啓動成功，後訪問http://localhost:8080/npm

3、TS語法

3.1 類型語法

類型註解

類型推斷，若是有初始值則根據原始類型推斷類型原始類型：string、boolean、number、symbol、undefined、null

數組類型約束

函數約束(參數約束):返回值約束

無返回值void的使用json

對象參數約束
數組

可以使用自定義類型寫對象參數

//類型別名type:自定義類型,對類型的結構定義
type Prop = { prop: number }
//加強可讀性
function fn3(o: Prop) { }
複製代碼

任意類型(此類型多用於數組)

類型斷言as語法,無錯誤類型提示

聯合類型(能夠是...也能夠是...)

交叉類型(能夠複用自定義類型)

3.2 函數語法

函數必選參數

function good(person: string): string {    return person + '好棒!'}複製代碼

函數可選參數 ?

function good(person: string, msg?: string): string {    return person + '好棒!'}複製代碼

函數的重載

3.3 Class

class Parent {
    private _dong = "dong"; // 私有屬性，不能在類的外部訪問 
    protected bar = "bar"; // 保護屬性，能夠在子類中訪問
    // 構造函數參數加修飾符，可以定義爲成員屬性 
    constructor(public tua = "tua") { }
    // 方法也有修飾符
    private someMethod() { }
    // 存取器:屬性方式訪問，可添加額外邏輯，控制讀寫性 
    get dong() {
        return this._dong;
    }
    set dong(val) {
        this._dong = val;
    }
}
class Child extends Parent {
    baz() {
        this.dong;
        this.bar;
        this.tua
    }
}複製代碼

3.4 接口

接口和type區別:https://www.cnblogs.com/EnSnail/p/11233592.html

3.5 泛型(動態約定類型)

泛型(Generics)是指在定義函數、接口或類的時候，不預先指定具體的類型，而在使用的時候再指定類型的一種特性。以此增長代碼通用性。

// 不用泛型
// interface Result {
// ok:0|1;
//   data: Feature[];
// }
// 使用泛型
interface Result<T> {
    ok: 0 | 1;
    data: T;
}
// 泛型方法
function getResult<T>(data: T): Result<T> {
    return { ok: 1, data };
}
// 用尖括號方式指定T爲string 
getResult<string>('hello') // 用類型推斷指定T爲number 
getResult(1)
// 進一步約束類型變量 
interface Foo {
    foo: string
}
// 約束T必須兼容Foo
function getResult2<T extends Foo>(data: T): Result<T> {
    return { ok: 1, data };
}
getResult2({ foo: 'foo', bar: 'bar' })
複製代碼

拓展Vue中使用TypeScript
juejin.im/editor/draf…

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。