typescript必備基礎

藤蔓繞竹發表於2019-11-20
TypeScript

一、使用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手動編譯，我們要將專案工程化

二、工程化

2.1 安裝工程化包

webpack:統一編譯

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

webpack-dev-server:更新後不用重新整理，自動重新整理

ts-loader:ts編譯規則

typescript:使用typescript語言特性

html-webpack-plugin:打包的檔案直接輸出HTML檔案

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

typescript必備基礎

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

typescript必備基礎

三、TS語法

3.1 型別語法

型別註解

typescript必備基礎

型別推斷，如果有初始值則根據原始型別推斷型別原始型別：string、boolean、number、symbol、undefined、null

typescript必備基礎

陣列型別約束

typescript必備基礎

函式約束(引數約束):返回值約束

typescript必備基礎

   無返回值void的使用

typescript必備基礎   物件引數約束

typescript必備基礎

可使用自定義型別寫物件引數

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

任意型別(此型別多用於陣列)

typescript必備基礎

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

typescript必備基礎

聯合型別(可以是...也可以是...)

交叉型別(可以複用自定義型別)

typescript必備基礎

3.2 函式語法

函式必選引數

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

函式可選引數 ? 

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

函式的過載

typescript必備基礎

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

typescript必備基礎

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/post/5dd4f7…


相關文章