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这些能够小写的类型