1. typescript使得js在書寫的過程當中有了參數類型的限制在 傳參的過程當中變得嚴格,減小了沒必要要的錯誤的發生前端
2. tslint同時也兼備了一部分eslint的做用,在必定程度上咱們使用tslint能夠取代eslintreact
3. 使用typescript的初期常常會在爲了避免報錯而書寫代碼,其實這是習慣上的問題,主動的去接受typescript的約束,養成書寫嚴格的代碼的習慣就能夠很快適應而且感觸到ts的好處。webpack
4. 如下只是入門級別的一些方法,ts有不少概念須要去記住web
配置typescript
前端項目開發目前通常都是webpack + babel這樣的方式去進行的,除此以外還有gulp,gulp和webpack類似的一點是他們都是基於傳遞文件流的方式,npm
react項目中的使用json
npm install --save react react-dom @types/react @types/react-dom
須要安裝@types/react和@types/react-domgulp
開發時依賴數組
npm install --save-dev typescript awesome-typescript-loader source-map-loader
awesom-typescript-loader是用來編譯tsconfig,.json的 source-map-loader是用來生成ts的sourcemap文件的babel
項目根目錄下新建一個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這些能夠小寫的類型