構建乙個簡單的react typescript專案

2021-09-16 12:21:43 字數 1657 閱讀 1134

由於看antd原始碼,都是使用的typescript編寫的,在有的時候看**確實看不懂,需要一步一步的去驗證求證一些東西,所以索性也就看了看怎麼樣開始乙個typescript專案。

typescript基礎語法知識

這樣我們就構建好乙個react-typescript專案了,按照提示,在命令列輸入yarn start || npm start就能夠執行專案了

了解了typescript的基本語法之後,就能夠編寫乙個簡單的元件了

import * as react from 'react';

import * as proptypes from 'prop-types';

import from './decorator';

// 這裡是定義傳入的引數型別

export inte***ce demoprops

// 這裡寫乙個類 對其傳入引數型別也是有定義的第乙個引數是props,第二個是state

// props就是用剛才上面我們定義的那樣,state如果不傳就寫乙個any就好了

export default class decoratortest extends react.component;

constructor(props)

// 這是乙個裝飾器,下面會附上裝飾器**,裝飾的作用就是給calldecorator

// 這個屬性新增乙個cancel屬性

// 如果不是很懂裝飾器的同學可以去typescript官網上檢視詳細文件

@mydecorator()

calldecorator()

componentdidmount()

render() );}

} // 裝飾器**

// 在寫裝飾器**的時候需要在tsconfig.json檔案中的compileroptions屬性新增一下**

// "experimentaldecorators": true

export default function decoratortest(fn) ;

(throttled as any).cancel = () => console.log('cancel');

return throttled;

} export function mydecorator()

let boundfn = decoratortest(fn.bind(this));

definingproperty = true;

object.defineproperty(this, key, );

definingproperty = false;

return boundfn;

},};};}

import * as react from 'react';

import demo from './components/demo';

const logo = require('./logo.svg');

render()

}

然後轉向瀏覽器 檢視我們寫的元件是否展示出來了,如果沒有展示出來,可以去終端檢視編譯錯誤。

OpenCV cvui構建乙個簡單的介面

cvui是乙個簡單卻使用的ui庫,除了依賴opencv自身以外,無任何其他依賴。只需要在工程中新增cvui.h,無需編譯庫即可使用。可以選擇checkbox並滑動滑條調節canny的閾值。注 我使用的opencv版本是4.1.2,在cvui window會crash。最後定位到是這個地方 解決辦法是...

構建乙個簡單的WCF應用

買了 wcf技術剖析 按著書本的例子進行操作,寫下我的操作過程。參考部落格 完成以後需要編譯hosting下的program.cs。但是在通過ctrl f5執行 其實可以通過右鍵解決方案 生成解決方案完成,不需要通過ctrl f5執行 的時候可能報錯 無法直接啟動帶有 類庫輸出型別 的專案,如下圖所...

使用nodejs構建乙個簡單的部落格專案

描敘介面 方法url引數 備註獲取部落格列表 api blog list getauthor作者,keword搜尋關鍵字 引數為空的話,則不進行查詢過濾 獲取一篇部落格的內容 api blog detail getid 新增一篇部落格 api blog new post post中有新增的資訊 更新...