typescript使用小結

1. typescript使得js在書寫的過程當中有了參數類型的限制在 傳參的過程當中變得嚴格,減小了沒必要要的錯誤的發生前端

2. tslint同時也兼備了一部分eslint的做用,在必定程度上咱們使用tslint能夠取代eslintreact

3. 使用typescript的初期常常會在爲了避免報錯而書寫代碼,其實這是習慣上的問題,主動的去接受typescript的約束,養成書寫嚴格的代碼的習慣就能夠很快適應而且感觸到ts的好處。webpack

4. 如下只是入門級別的一些方法,ts有不少概念須要去記住web

配置typescript

前端項目開發目前通常都是webpack + babel這樣的方式去進行的,除此以外還有gulp,gulp和webpack類似的一點是他們都是基於傳遞文件流的方式,npm

react項目中的使用json

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

須要安裝@types/react和@types/react-domgulp

開發時依賴數組

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

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

項目根目錄下新建一個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這些能夠小寫的類型

相關文章
相關標籤/搜索