typescript学习:介绍与安装

2021/8/3 6:08:52

本文主要是介绍typescript学习:介绍与安装,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

本文内容如下

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学习地图



这篇关于typescript学习:介绍与安装的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程