typescript使用小结

Posted 2020-11-20 sowhite

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这些可以小写的类型