typescript 入门

为何要使用typescript?

• 出现拼写错误，能够当即指出错误。
• 出现模块引入错误，当即指出错误。
• 出现函数、变量类型错误，当即指出错误。
• 在react组件中制定好了基本的props和state以后，咱们在调用的时候能够自动提示。 
• 。。。

　　

　　总的来讲，就是能够帮助你不会犯下低级的错误，而且能够帮助你高效开发。 虽然在

 

　　推荐编辑器： vscode --- 这是开发 typescript 最好的工具。 

• 整个界面是汉语。
• vscode是微软开发的，而typescript也是微软的，因此二者i的支持很好。
• vscode自己集成了命令行窗口，而且窗口能够开不少个，如 node的， 编译的， mongodb的等等，能够节省桌面位置。
• 是js来写的（electron）。 

　　 因此，强烈推荐。

 

 

 

 

基础知识

使用

全局安装 typescript 

npm install typescript -g

 

这时，咱们在命令行中输入 tsc 就能够发现相关的命令了。 tsc 即 typescript compiler。 

 

 

类型注解

编写ts文件以下：

// 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）类型使用的。

 

命令行中输入指令：

tsc hello.ts

因而该文件被编译成了能够在浏览器中正常运行的js文件：

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 
} 

　　即，引入的时候使用 import * as React from 'react'

　　而且，咱们可使用 interface 来使用之。

 

 

四、当咱们在index页中import进来pages页的时候，为何老是说找不到相应的模块？ 

　　如，咱们在index页中配置路由，因此，通常须要引入page页，下面的引入方式出错：

　　即对于index页的引入没有问题，可是引入allsug时老是出错，为何呢？ 

　　由于对于 ./pages/index 会自动寻找 index 下的 index.tsx ，可是在 allsug 下是 allsug.tsx， 若是allsug文件夹下也是 index.tsx，那么就能够正常引入了。 

　　值得注意的是，咱们在看一些框架的源码时能够发现，大多文件下都会有一个index.js，方便直接引入，因此这是最佳实践，能够学习效仿。 

 

 

五、事件的写法

                            <input placeholder='可最多输入40个字符' type="text" onFocus={this.openNotification} onChange={(e) => this.handleTitleChange(e)} className='question-title'/>

 

即须要使用箭头函数的方法，这样也就不须要使用 this 来进行绑定。