typescript简介及在项目中引入typescript

编程语言的类型

1、动态类型语言

在运行期间才会做数据类型的检查的语言，在编程期间不用给变量指定类型，只有运行期间才知道有啥错误。这类语言有javascript、ruby、python等。于是有了静态代码检查器比如eslint。

typescript = type+javascript，把不关注类型的动态语言变成关注类型的混合语言

2、静态类型语言 在编译期间检查数据类型，如c、c++、java

typescript是什么

1、javascript的超集

2、静态类型风格的类型系统

3、从es6到es10甚至是esnext的语法支持（无需babel）

4、兼容各种浏览器、各种系统、各种服务器，完全开源

为什么使用，解决什么问题

js本身弱类型，变量只有在运行调试的时候才知道它的类型，变量的使用错误率高

ts添加很多类型定义，使用变量的时候错误率降低，程序更容易理解

当我们进行编码或者查阅代码时，我们比较容易关注几个问题

1、函数或者方法输入输出的参数类型和外部条件等

2、动态语言的约束，要在代码运行的时候调试才能知道

3、有了typescript，代码本身就可以回答上述问题

对我的技术水平和为当前项目架构带来哪些帮助和提高

1、丰富的接口提示，编译期间能发现绝大部分错误

2、完全兼容javascript

3、第三方库可以单独编写类型文件，如果第三方库没有类型文件，我们可以给它添加类型文件然后读取

安装和初试Typescript

1、安装ts编译器 typescript compiler

npm install -g typescript

2、编译一个ts文件 生成js文件

tsc greeter.ts // 编译生成 greeter.js
// 查看 greeter.js
cat greeter.js
// 运行 greeter.js
node greeter.js

生成greeter.js

vscode ide 完美支持ts

vscode编辑器会检查语法，它和ts编译器编译报错一致

在项目中引入ts

yarn add typescript

配置webpack

// ts-loader 相当于babel-loader
module.exports = {
    //省略部分代码...
    module: {
        rules: [
            {
                test:/\.tsx?$/,
                loader:'ts-loader'
            }
            //省略部分代码...
        ]
    }
    //...省略部分代码
}

添加tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ]
}

这样就能用tsx文件了