typescript学习：介绍与安装

本文内容如下

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

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

---

typescript是什么

简称TS，是微软开发的一款语言，它能够对代码进行约束，提升代码认知

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

---

与JS的区别

JS是一款弱类型，动态类型语言：运行期间才会检测问题
TS是一款强类型，静态类型语言：编译期间就会检测问题

function fn(){
	console.log(n)
}

在JS中，不运行代码和执行fn函数，是不会报错的，这就导致了问题
在TS中，在写代码时就提示了n变量不存在

---

TS的优缺点

优点

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

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

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

4.完全兼容JS
第三方库可以单独编写类型文件
流行项目都支持ts：react，vue，ant design等
​
缺点（其实不算缺点）
1.增加了一些学习成本
2.短期内增加了一些开发成本

---

安装

单独安装

1.全局安装
cnpm i -g typescript

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

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

---

TS和React结合

简单规则

在 react 中使用 ts 的几点原则和变化：
1.所有用到jsx语法的文件都需要以tsx后缀命名
2.使用组件声明时的Component<P, S>泛型参数声明，来代替PropTypes！
3.全局变量或者自定义的window对象属性，统一在项目根下的global.d.ts中进行声明定义
4.对于项目中常用到的接口数据对象，在types/目录下定义好其结构化类型声明

结合使用

第一种：初始项目时，使用脚手架集成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


第三种：配置webpack，安装对应的loader
module.exports = {
   entry:"./src/index.tsx",
   output:{
       filename: "app.js",
  },
   module:{
       rules:[
          {test:/\.tsx?$/, loader:"ts-loader"}
      ]
  },
   resolve:{
       extensions: [".ts", ".tsx", ".js"]
  }
}

---

学习更多

JS学习地图