本文内容如下

typescript是什么？与js有什么区别？如何使用？

如果你都有了答案，可以忽略本文章，或去TS学习地图寻找更多答案

typescript是什么

简称TS，是微软开发的一种语言，简单来说就是对代码进行约束，提升代码认知

• 1.超集：js基础上的拓展（js有的它都有，js没有的它也有）
• 2.静态类型风格的类型系统
• 3.从es6 到 es10 甚至 esNext 的语法支持
• 4.兼容各种浏览器，各种系统，各种服务器，完全开源

与JS的区别

JS是弱类型的，动态类型语言：运行期间才会检测问题，使用JS，大多错误只能在运行时发现
TS是强类型的，静态类型语音：编译期间就会检测问题，使用TS，大多错误可以在编译时发现

如：

function fn(){
	console.log(n) //n变量不存在
}

在JS中，这个fn函数只要不运行，是不会报错的，只有在运行时调用了该函数，才会报错，这就导致了问题
在TS中，在写代码时，就已经提示，该变量不存在了

TS的优缺点

优点：
1.程序更容易理解
问题：
函数或者方法输入输出的参数类型，外部条件等
动态语言的约束：需要手动调试等过程
解决：有了ts，代码本身就可以回到上述问题

2.效率更高
在不同的代码块和定义中进行跳转
代码自动补全
丰富的接口提示

3.更少的错误
编译期间能够发现大部分错误
杜绝一些比较常见错误

4.完全兼容JS
第三方库可以单独编写类型文件
流行项目都支持ts:react,vue,ant design等

缺点：
1.增加了一些学习成本
2.短期内增加了一些开发成本

安装

单独安装

1. 全局安装
npm i -g typescript

2.编译与运行
tsc demo.ts
得到demo.js, demo.ts两个文件
运行：node demo.js

使用 ts-node 简化步骤：
cnpm i -g ts-node
ts-node demo.js​

TS与React集成

第一种：初始项目时，使用脚手架，集成ts，自动生成ts.config.js文件
create-react-app name --template typescript

第二种：项目重构时/升级
1.init -y​
2.tsc --init​
3.配置tscogfig.json
{
   "compilerOptions": {
       "module": "commonjs",
       "target": "es5",
       "sourceMap": false,
       "jsx": "react"
  },
   "exclude": ["node_modules"]
}
​
4.安装react相关文件
cnpm i -S react react-dom @types/react @types/react-dom

5.配置webpack
module.exports = {
   entry:"./src/index.tsx",
   output:{
       filename: "app.js",
  },
   module:{
       rules:[
          {test:/\.tsx?$/, loader:"ts-loader"}
      ]
  },
   resolve:{
       extensions: [".ts", ".tsx", ".js"]
  }
}

tsconfig.json配置文件

{
   "exclude":["demo,ts"],      //不编译的文件
    "include":["test.ts"],     //要编译的文件
    "files":["test.ts"],       //要编译的文件
    "compilerOptions":{
        "removeComments":true  //编译时去掉注释
        "strict":true    //严格按照ts规范，开启全部规则
        "noImoliciAny":false //false允许是any时不写any
        "strictNullChecks":true //true是不允许null值出现
        "rootDir":"./src"   //出口文件
        "outDir":"./build"  //入口文件
        "sourceMap":true    //开启代码隐射
        "noUnusedLocals":true //检测未使用的变量
      }
}

声明文件

使用第三方模块时，index.d.ts文件是该模块的声明文件，它的作用是：代码补全，接口提示等等

一般的第三方模块都是没有的，而是由微软来帮这些库来维护的

1.到微软官方github查看是否有声明文件
microsoft.github.io/TypeSearch/

2.有的话则可以引入使用
cnpm i -S @types/jquery

3.没有的话，自己写也是可以的，这里不介绍了
declare let jQuery:(selector:string) => any

学习更多

TS学习地图