typescript 入門

時間 2019-11-11

標籤 typescript 入門简体版

原文原文鏈接

爲何要使用typescript?

出現拼寫錯誤，能夠當即指出錯誤。
出現模塊引入錯誤，當即指出錯誤。
出現函數、變量類型錯誤，當即指出錯誤。
在react組件中制定好了基本的props和state以後，咱們在調用的時候能夠自動提示。
。。。

　　總的來講，就是能夠幫助你不會犯下低級的錯誤，而且能夠幫助你高效開發。雖然在html

　　推薦編輯器： vscode --- 這是開發 typescript 最好的工具。 node

整個界面是漢語。
vscode是微軟開發的，而typescript也是微軟的，因此二者i的支持很好。
vscode自己集成了命令行窗口，而且窗口能夠開不少個，如 node的，編譯的， mongodb的等等，能夠節省桌面位置。
是js來寫的（electron）。

　　因此，強烈推薦。react

基礎知識

使用webpack

全局安裝 typescript es6

npm install typescript -g

這時，咱們在命令行中輸入 tsc 就能夠發現相關的命令了。 tsc 即 typescript compiler。 web

類型註解

編寫ts文件以下：mongodb

// hello.ts
function greeter(person: string) {
    return "Hello, " + person;
}

var user = "Jane User";

console.log(greeter(user));

注意： 對於typescript，其後綴名必須是 .ts 或者 .tsx 或者 .d.ts，其中.ts是最經常使用的，.tsx是用在react的jsx語法裏的， .d.ts是爲了定義（define）類型使用的。typescript

命令行中輸入指令：npm

tsc hello.ts

因而該文件被編譯成了能夠在瀏覽器中正常運行的js文件：json

function greeter(person) {
    return "Hello, " + person;
}
var user = "Jane User";
console.log(greeter(user));

輸出結果爲一個hello.js文件，它包含了和輸入文件中相同的JavsScript代碼。一切準備就緒，咱們能夠運行這個使用TypeScript寫的JavaScript應用了！

可是，若是咱們傳入的user不是一個字符串，而是一個數組，那麼就會在編譯的過程當中報錯，雖然，仍是能夠編譯爲新的js文件，可是他提醒你你錯了仍是必要的。

接口

好比一個函數須要接受一個對象做爲參數，那麼爲了保證傳入參數的正確性，咱們能夠建立一個接口，這個接口使用 interface 關鍵詞來建立，相似於一個對象， key 就是傳入對象的 key， value 是咱們但願傳入的類型。 舉例以下所示：

interface Person {
    name: string,
    age: number
}

function greeter(person: Person) {
    return 'I am ' + person.name + "and I'm " + person.age + " years old"
}

var person = {
    name: 'wayne',
    age: 22
}

console.log(greeter(person))

通過編譯：

function greeter(person) {
    return 'I am ' + person.name + "and I'm " + person.age + " years old";
}
var person = {
    name: 'wayne',
    age: 22
};
console.log(greeter(person));

就能夠在瀏覽器運行了。

若是person對象的age屬性不是一個數字，就會在編譯的時候報錯。

以下所示，當咱們懸停在屬性上時，能夠自動檢測其類型：

類

class Student {
    fullName: string;
    constructor(public firstName, public middleInitial, public lastName) {
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
}

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person : Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

var user = new Student("Jane", "M.", "User");

document.body.innerHTML = greeter(user);

更多查看 https://www.tslang.cn/docs/home.html

注意點

一、 tsconfig.json應該以下使用：

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "noImplicitAny": false,
    "sourceMap": false,
    "jsx": "react",
    "experimentalDecorators": true,
    "lib": [
      "scripthost",
      "dom",
      "es6"
    ],
    "allowSyntheticDefaultImports": true,
    "allowJs": true
  }
}

在實際的使用過程當中，咱們仍是應該添加 exclude 的，這個很是必要，尤爲是後端也須要寫的時候，咱們若是不用 exclude，那麼在 tsc 查詢 ts 文件的時間會很是長，可是若是使用了 exclude 字段，那麼咱們就能夠很容易地進行去除沒必要要的文件，哈哈哈，666。

二、webpack配置：

  module: {
        loaders: [
      {
        test: /\.tsx?$/,
        loader: 'ts-loader'
      },

　　即咱們須要安裝一個轉化 tsx 的插件。

　　還須要添加下面的：

    resolve: {
        extensions: [".ts", ".tsx", ".js", '.less'],
      },

三、引入

　　在使用react的時候，應該以下：

npm install @types/react --save-dev

　　這樣有助於咱們的類型檢查。

　　在使用react-dom的時候以下：

npm intall @types/react-dom --save-dev

　　當咱們須要在文件中使用的時候，以下：

import * as React from 'react';

import { Link, browserHistory} from 'react-router'

import './index.less';

export default class Index extends React.PureComponent<Iprops, Istate> {

    constructor(props) {
        super(props);
        this.state = {
            name: 'zzw'
        }
    }

    componentDidMount() {
        
    }


    render () {
        return (
            <div className="index-wrap">
                <h2>使用ant.design</h2>
                <p className="para">{this.props.age}</p>
             </div>     
        );
    }
};

interface Iprops {
    age: number
}

interface Istate {
    name: string 
}