typescript使用小結

1. typescript使得js在書寫的過程中有了參數類型的限制在 傳參的過程中變得嚴格，減少了不必要的錯誤的發生

2. tslint同時也兼備了一部分eslint的作用，在一定程度上我們使用tslint可以取代eslint

3. 使用typescript的初期經常會在為了不報錯而書寫代碼，其實這是習慣上的問題，主動的去接受typescript的約束，養成書寫嚴格的代碼的習慣就可以很快適應並且感觸到ts的好處。

4. 以下只是入門級別的一些方法，ts有很多概念需要去記住

配置

前端項目開發目前一般都是webpack + babel這樣的方式去進行的，除此之外還有gulp，gulp和webpack相似的一點是他們都是基於傳遞文件流的方式，

react項目中的使用

npm install --save react react-dom @types/react @types/react-dom

需要安裝@types/react和@types/react-dom

開發時依賴

npm install --save-dev typescript awesome-typescript-loader source-map-loader

awesom-typescript-loader是用來編譯tsconfig,.json的 source-map-loader是用來生成ts的sourcemap文件的

項目根目錄下新建一個tsconfig.json文件，如下這種

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es5",
        "jsx": "react"
    },
    "include": [
        "./src/**/*"
    ]
}

可以使得規則被webpack awesom-typescript-loader的加載得以運用在項目中

以下是一個配置示例，這里變的注釋很重要，注釋很重要，注釋很重要。

module.exports = {
    entry: "./src/index.tsx",
    output: {
        filename: "bundle.js",
        path: __dirname + "/dist"
    },

    // Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",

    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: [".ts", ".tsx", ".js", ".json"]
    },

    module: {
        rules: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
            { test: /\.tsx?$/, loader: "awesome-typescript-loader" },

            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
        ]
    },

    // When importing a module whose path matches one of the following, just
    // assume a corresponding global variable exists and use that instead.
    // This is important because it allows us to avoid bundling all of our
    // dependencies, which allows browsers to cache those libraries between builds.
    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    },
};

 

使用

最簡單的用法，在函數的參數中定義屬性的類型，可以定義string number boolean這些基本類型

function greeter(person: string) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.innerHTML = greeter(user);

 

那如果參數是對象或者數組呢，這時候ts引入了一個新的概念叫做interface，我們可以聲明一個interface 然后作為參數類型

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person: Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = { firstName: "Jane", lastName: "User" };

document.body.innerHTML = greeter(user);

 

復雜類型的定義

let subAccountTableColumns: Array<{ title: string; dataIndex: string, align?: string }> = [
      { title: '賬戶名稱', dataIndex: 'name', align: 'center' },
      { title: '綁定郵箱', dataIndex: 'email' },
      { title: '狀態', dataIndex: 'status', align: 'center' },
      {
        title: '標准授權',
        dataIndex: 'standardAuthorization',
        align: 'center'
      },
      {
        title: '擴張授權',
        dataIndex: 'extendedAuthorization',
        align: 'center'
      },
      { title: '備注', dataIndex: 'note', align: 'center' },
      { title: '操作', dataIndex: 'action', align: 'center' }
    ]

 

1. 如果需要定義可選的參數需要用 ?: 表示這個參數是可選的

2. 如果需要定義復雜的數組可以用Array<>這種寫法

 

函數返回值

假如我們放一個函數作為參數的時候，那么需要定義函數的返回值，

function identity(arg: number): number {
    return arg;
}

 

 

書寫方法 

在書寫ts的時候會有一些疑慮

1. 分隔符 以下的三種寫法其實都是可以的， 那應該用那一種呢

interface Person {
    firstName: string,
    lastName: string
}

 

interface Person {
    firstName: string
    lastName: string
}

 

interface Person {
    firstName: string;
    lastName: string;
}

 

當然是都可以的咯，但是在同行的情況下就需要用分隔符了，那么選擇用那種方式，項目統一一下就好了

 

2. 對象和類型

let a: String = 'test'
let b: string = 'test'

 

基於js的一切都是對象的說法，第一種和第二種在ts里是等價的

但推薦用第二種，因為基本類型是構成約束的本質，而String不是基本類型，雖然它同樣具有約束基本類型的能力

其次在ts里只有string, boolean, number, any這些可以小寫的類型