9102年，隔壁公司新来的女实习生问我什么是TypeScript ？-CSDN博客

TypeScript不是一个高深的技术，它不过是一个javascript的超集，那么什么是超集呢？

所谓的超集其实就是最终将你写的TypeScript编译成javascript去执行，因为浏览器上能跑的脚本语言是javascript，这个本质要搞清楚

传统的`Javascript` 缺点：

1.弱类型，不严谨

无法在编写时察觉出同一个变量的类型是否保持一致

比如：

var a = 1 

//如果这个b的值是“1”，字符串
var b = "1"

console.log(a+b)

复制代码

结果：

2.不依赖插件，无法感知编码书写是否出现边际错误（出现某一瞬间空值等）

特别是ES6之前存在全局变量，var会给全局状态下添加属性以及污染全局加上ES5的变量提升作用域等混合情况，很容易导致变量查找时出现undefined的问题，但是这个问题需要代码运行才能报错

例如：


    var a;

    function test() {
        a = 1
    }
    
    console.log(a) //undefined
    console.log(window.a)//undefined
 
    
    -------------------
    
    
    var a;

    function test() {
        a = 1
    }

    test()

     console.log(a)    // 1 
     console.log(window.a) //1

复制代码

像上面这种情况，如果遇到了，项目很大，排查起来还是很烦的

3.不依赖插件，没有静态类型以及上下文检查

特别是在书写Node.js的时候，往往这种偏后台类型的代码，高并发场景出现一个小问题都是致命的，如果是一个超大型项目，排查问题起来非常困难

传统的javascript

这段代码，变量a根本就没有定义，但是根本没有报错，这种场景可以在项目中可能是右查询没有查询到，然后输出undefined. 可是如果是在使用这个变量去做某些事情

例如：

这个a变量是一个用户很核心的数据，但是它是undefined。然后又经过若干的类型转换，被js转换成不知道是什么的数据展示给了客户，那么炸了，可能会引起整个项目出现致命性错误直接奔溃

4. 大型项目，多人合作，如果出了`BUG`往往可能要浪费大家很多时间（摸鱼时间）

例如：

你的同事A写了一个模块，大概5个文件，一共1000行代码

经过1000行代码的处理，最终输出好几个值（变量）给了你

如下代码：


export default {
    store,
    checkPassWord,
    applyMiddleWare,
    //....
}

复制代码

一个不合格的同事给你的没有注释的代码于是你：

一个合格的同事：

/**
   @params store //数据对象
   @params checkPassWord //检查密码函数
   @params applyMiddleWare //应用中间间

*/
export default {
    store,
    checkPassWord,
    applyMiddleWare,
    //....
}

复制代码

如果你用到他的暴露对象内容特别多的时候，就要一个一个去看注释，而且关键是：

这里面每个函数的传入参数，返回的参数，注释不一定那么完整详细。

那么只有去沟通了，一旦沟通起来。时间成本上升，并且如果大家开发任务都特别紧急的时候，炸了～

于是，`TypeScript`出现了

TypeScript 3.1 现已发布

最新版本文档地址最新TypeScript版本文档地址

TypeScript并不能说是一门完全全新的语言，可以说它是一个基于javaScipt的超集

什么是超集？其实就是原生ES6语法+Type类型

强烈建议阅读阮一峰老师的ES6入门

我们来看下 TypeScript的工作方式：

全局下载TypeScript 手动编译TS文件变成js文件

 npm install -g typescript
复制代码

用全局安装的typescript来编译输出一把刚才的文件

还没有编译，现在已经开始报出问题，但是报出问题可以继续编译吗？

即使静态校验出现问题，最终还是编译成功：

这里特别注意，TS里面的静态类型，以及枚举等，编译成js后是不存在的

上面并没有体现typeScript的特殊价值

TypeScript的核心原则之一是对值所具有的结构进行类型检查。它有时被称做“鸭式辨型法”或“结构性子类型化”。在TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。


//接口名为LabelledValue
interface LabelledValue {
  label: string;
}


//函数传入的参数 labelledObj遵循 LabelledValue接口 

function printLabel(labelledObj: LabelledValue) {
  console.log(labelledObj.label);
}

let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);

复制代码

以上代码经过ts编译后,所有接口和静态类型都没有了：


function printLabel(labelledObj) {
    console.log(labelledObj.label);
}
var myObj = { size: 10, label: "Size 10 Object" };
printLabel(myObj);


复制代码

如果ts在代码编写阶段出现了类型的校验错误，那么会直接提示：

我将接口的string改成了number类型

我们仅仅改变了接口的类型，就立刻检验到了错误，这样不必等到开发模式下的热更新调试后再报错。

当然你在接口定义时候，可以在变量后加上?号

这样是一个可选属性

例如：

interface SquareConfig {
  color?: string;
  width?: number;
}

function createSquare(config: SquareConfig): {color: string; area: number} {
  let newSquare = {color: "white", area: 100};
  if (config.color) {
    newSquare.color = config.color;
  }
  if (config.width) {
    newSquare.area = config.width * config.width;
  }
  return newSquare;
}

let mySquare = createSquare({color: "black"});
复制代码

还有只读属性的接口定义：

interface Point {
    readonly x: number;
    readonly y: number;
}
复制代码

你可以通过赋值一个对象字面量来构造一个Point。赋值后， x和y再也不能被改变了。

let p1: Point = { x: 10, y: 20 };
p1.x = 5; // error!
复制代码

用得比较多的函数类型检查

先编写接口

interface SearchFunc {
  (source: string, subString: string): boolean;
}
复制代码

定义函数

let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
  let result = source.search(subString);
  return result > -1;
}
复制代码

对于函数类型的类型检查来说，函数的参数名不需要与接口里定义的名字相匹配。比如，我们使用下面的代码重写上面的例子：

let mySearch: SearchFunc;
mySearch = function(src: string, sub: string): boolean {
  let result = src.search(sub);
  return result > -1;
}
复制代码

函数的参数会逐个进行检查，要求对应位置上的参数类型是兼容的。如果你不想指定类型，TypeScript的类型系统会推断出参数类型，因为函数直接赋值给了 SearchFunc类型变量。函数的返回值类型是通过其返回值推断出来的（此例是 false和true）。如果让这个函数返回数字或字符串，类型检查器会警告我们函数的返回值类型与 SearchFunc接口中的定义不匹配。

let mySearch: SearchFunc;
mySearch = function(src, sub) {
    let result = src.search(sub);
    return result > -1;
}
复制代码

鸭式辨形法，说的是：一个动物长得看起来像鸭子，叫起来也像鸭子，那么它就可以被认为是鸭子

定义类的类型：

interface ClockInterface {
    currentTime: Date;
    setTime(d: Date);
}

class Clock implements ClockInterface {
    currentTime: Date;
    setTime(d: Date) {
        this.currentTime = d;
    }
    constructor(h: number, m: number) { }
}
复制代码

一个接口可以继承多个接口，创建出多个接口的合成接口。

interface Shape {
    color: string;
}

interface PenStroke {
    penWidth: number;
}

interface Square extends Shape, PenStroke {
    sideLength: number;
}

复制代码

照本宣科写了这么多，其实这些就是TS的最有用的地方。文档写得比较好，建议多去看几遍，前提是一定要学好ES6！

`TS`中一定要尽量避免使用`any`类型

any类型有太多不可预测的后果

function identity<T>(arg: T): T {
    return arg;
}
复制代码

我们给identity添加了类型变量T。 T帮助我们捕获用户传入的类型（比如：number），之后我们就可以使用这个类型。之后我们再次使用了 T当做返回值类型。现在我们可以知道参数类型与返回值类型是相同的了。这允许我们跟踪函数里使用的类型的信息。

其他的`API`可以去刷文档，下面说重点：

工程化环境：

typescript遇上了webpack

React官方推荐使用typescript

使用传统的 react脚手架

在 Create React App 中使用 TypeScript

npx create-react-app my-app --typescript
复制代码

typescript遇上webpack

切记所有的ts的依赖，都必须是@types开头的否则用不了

配置tsconfig.json文件


{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es5",
        "jsx": "react"
    },
    "include": [
        "./src/**/*"
    ]
}

复制代码

npm install --save react react-dom @types/react @types/react-dom
复制代码

webpack.config.js配置文件

module.exports = {
    entry: "./src/index.tsx",
    output: {
        filename: "bundle.js",
        path: __dirname + "/dist"
    },

    devtool: "source-map",

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

    module: {
        rules: [
         
            { test: /\.tsx?$/, loader: "awesome-typescript-loader" },

            
            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
        ]
    },

    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    }
};



复制代码