• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

typescript使用小结

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
typescript 结构子类型发布时间:2022-07-18
下一篇:
使用Typescript重构axios(二十八)——自定义序列化请求参数发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap