国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

TypeScript踩坑（持續(xù)更新）

shleyZ / 3510人閱讀

摘要：目錄結(jié)構(gòu)如下類型聲明文件引入類型文件如果是想設(shè)置全局的類型文件，可以在的字段里面指定對應(yīng)的路徑，這樣就不需要多帶帶用引入了。文件直接導(dǎo)入就行了，不需要再專門引入，這里兩者命名一樣，所以會自動識別，但是的語法也變化了一些。

配置 為JS編寫類型聲明文件(d.ts)

很多第三方庫已經(jīng)有自己的類型聲明文件，比如@types/react，@types/react-native，這些需要多帶帶安裝，而例如mobx-react和mobx這種會自帶類型文件，不需要多帶帶安裝。

我們最近有個(gè)新項(xiàng)目，需要照顧到不同同學(xué)，有的愿意用TS，有的不想用TS，為了照顧到雙方，所有的公共模塊都是JS寫的，所以需要多帶帶為TS寫類型聲明文件，具體語法請參考TS官網(wǎng)的文檔，這里只是講一些坑。

集中管理，相對路徑導(dǎo)入

為項(xiàng)目中的JS寫類型文件的時(shí)候，需要先引入對應(yīng)的文件，然后以導(dǎo)入的路徑為名字聲明一個(gè)模塊，最后在需要用到這個(gè)類型文件的地方用///來引入相對路徑。
目錄結(jié)構(gòu)如下：

- @types
    - BasePage.d.ts
- src
    - frame
        - BasePage.js
    - page
        - hotelList
            - index.tsx

類型聲明文件：

// BasePage.d.ts
import BasePage from "../src/frame/BasePage"
declare module "../src/frame/BasePage" {
    export default class BasePage{}
}

引入類型文件：

// index.tsx
///

如果是想設(shè)置全局的類型文件，可以在tsconfig.json的paths字段里面指定對應(yīng)的路徑，這樣就不需要多帶帶用reference引入了。

自動導(dǎo)入

上面那種方法雖然可以將types文件集中管理，但是有個(gè)很麻煩的地方就是需要在引入BasePage模塊的地方手動引入d.ts文件，這個(gè)真的很繁瑣，這里有個(gè)更好的方法。

- src
    - frame
        - BasePage.js
        - BasePage.d.ts
    - page
        - hotelList
            - index.tsx

index.tsx文件直接import導(dǎo)入BasePage就行了，不需要再專門引入BasePage.d.ts，這里兩者命名一樣，所以會自動識別BasePage.d.ts，但是BasePage.d.ts的語法也變化了一些。

// BasePage.d.ts
// 注意：這里不需要再聲明declare module "BasePage"了，否則會識別不了
export default class BasePage{}
語法 1. Element implicitly has an "any" type because type "Test" has no index signature 
class PageFlag {
    updatePageFlag(name: string, value: boolean) {
        this[name] = value;
    }
}

這里我希望能夠更新PageFlag中的數(shù)據(jù)，但是又不想對所有的屬性一一列舉出來，但是由于沒有設(shè)置this[name]的類型，導(dǎo)致了報(bào)錯(cuò)，這里有幾種解決辦法。

(1) 修改tsconfig.json里的noImplicitAny為false。 (2) 給this設(shè)置類型，但是不好的地方就是失去了類型判斷的意義，如下： 
// 例2
interface IParams {
    [propName: string]: any
}
class PageFlag {
    updatePageFlag = (name: string, value: boolean) => {
        (this)[name] = value
    }
}
(3) 手動列舉所有屬性

雖然這樣比較麻煩，但是一眼就能看出來PageFlag有哪些屬性，數(shù)據(jù)比較清晰。

type pageFlag = "showLoading" | "showMask" | "showCalendar";
class PageFlag {
    showLoading: boolean = false;
    showMask: boolean = false;
    showCalendar: boolean = false;
    
    updatePageFlag = (name: pageFlag, value: boolean) => {
       this[name] = value
    }
}
export from

有些文件夾下面有很多文件，所以我喜歡增加一個(gè)index.ts文件來直接export from其他文件，這樣在其他地方引入的時(shí)候可以直接import from目錄，類似如下：

// 我們有個(gè)components文件夾，下面有很多組件文件（都是export default導(dǎo)出的），我們可以components下創(chuàng)建index.ts文件，里面這么寫（下）：
export Hotel from "./Hotel"
export * as HotelList from "./HotelList"
export Header from "./Header"

但是這兩種export from的方式在TS里面都會編譯報(bào)錯(cuò)，可是我在ES6里面明明寫的好好的啊！！！
后來在google上找到了一個(gè)鏈接，原來這兩種export from的方式都只是提案，如果在ES6中則需要額外添加@babel/plugin-proposal-export-namespace-from 插件來支持，TS中不支持這些寫法。

但是感覺這個(gè)更像野路子，也許未來會支持，遂放棄，最后發(fā)現(xiàn)了另外一種寫法，可以完美解決這個(gè)問題。

export {default as Hotel} from "./Hotel"
export {default as HotelList} from "./HotelList"
export {default as Header} from "./Header"

順便說一下，export from其實(shí)還有下面兩種寫法，但是這兩種寫法都是需要模塊export導(dǎo)出，而不是export default導(dǎo)出的。

export { Hotel } from "./Hotel"
export * from "./Hotel

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/99048.html

相關(guān)文章

  • 優(yōu)秀文章收藏（慢慢消化）持續(xù)更新~

    摘要：整理收藏一些優(yōu)秀的文章及大佬博客留著慢慢學(xué)習(xí)原文協(xié)作規(guī)范中文技術(shù)文檔協(xié)作規(guī)范阮一峰編程風(fēng)格凹凸實(shí)驗(yàn)室前端代碼規(guī)范風(fēng)格指南這一次，徹底弄懂執(zhí)行機(jī)制一次弄懂徹底解決此類面試問題瀏覽器與的事件循環(huán)有何區(qū)別筆試題事件循環(huán)機(jī)制異步編程理解的異步 better-learning 整理收藏一些優(yōu)秀的文章及大佬博客留著慢慢學(xué)習(xí) 原文:https://www.ahwgs.cn/youxiuwenzhan...

    JeOam 評論0 收藏0

  • webpack3 升級 webpack4踩坑記錄

    摘要：本篇不包含所有坑，暫時(shí)只記錄自己踩到的部分坑一安裝安裝最新版本安裝新增依賴這個(gè)在中，本身和它的是在同一個(gè)包中，中將兩個(gè)分開管理。我記錄下自己更新這個(gè)的過程，以下前半部分可以直接跳過。以下記錄踩坑過程。 本篇不包含所有坑，暫時(shí)只記錄自己踩到的部分坑 一.安裝 安裝webpack4最新版本 npm install --save-dev webpack@4 安裝新增依賴 webpack-c...

    馬忠志 評論0 收藏0

  • vscode-eslint的踩坑實(shí)踐--typescript無法格式化

    摘要：的踩坑實(shí)踐無法格式化引言最近開發(fā)的前端項(xiàng)目隨著開發(fā)的人員越來越多，代碼規(guī)范已經(jīng)是一個(gè)很難避免的問題了，雖然百度有這個(gè)規(guī)則檢查，但是不論是或者是項(xiàng)目本地都沒有配置或檢查，完全靠自覺，這是件非常扯淡的事。 vscode-eslint的踩坑實(shí)踐--typescript無法格式化 引言 最近開發(fā)的前端項(xiàng)目隨著開發(fā)的人員越來越多，代碼規(guī)范已經(jīng)是一個(gè)很難避免的問題了，雖然百度有fecs這個(gè)規(guī)則檢查...

    harryhappy 評論0 收藏0

  • 5分鐘上手TypeScript踩坑

    摘要：前言最近在學(xué)習(xí)，發(fā)現(xiàn)的官方文檔中的分鐘上手輔導(dǎo)教程中會有許多新手可能很難理解的地方，所以記錄一下聲明一下我用的版本是以后版本可能有所不同什么是維基百科上說是一種由微軟開發(fā)的自由和開源的編程語言。 前言 最近在學(xué)習(xí)TypeScript，發(fā)現(xiàn)TypeScript的官方文檔中的5分鐘上手TypeScript輔導(dǎo)教程中會有許多新手可能很難理解的地方，所以記錄一下 聲明一下我用的版本是 npm ...

    array_huang 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<