typescript 简介

一、ts简介

TypeScript 是由微软开发的自由和开源的编程语言，它可以在任何操作系统上运行。TypeScript 是JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型查询。

二、ts开发环境

typescript 目前浏览器还不能支持，需要把编写好的ts转译为js，编译环境为nodejs环境。

1、切换npm镜像源

手动切换npm镜像，执行下面的命令，会在电脑上多一个cnpm，cnpm就是切换过后镜像npm工具。
npm install -g cnpm --registry=https://registry.npm.taobao.org

nrm ：管理镜像源

安装nrm:
npm i -g nrm   cnpm i -g nrm   

注：高版本有bug，安装好后，有提示不可用。
解决方法：
打开nrm的安装文件，一般是在这个路径下：C:\Users***\AppData\Roaming\npm\node_modules\nrm，找到cli.js文件的第17行，做如下修改
把 const NRMRC = path.join(process.env.HOME, '.nrmrc');
修改const NRMRC = path.join(process.env[(process.platform == 'win32') ? 'USERPROFILE' : 'HOME'], '.nrmrc');

nrm相关命令：
nrm ls 查看可用的镜像
nrm use 名称	切换镜像
nrm add 名称	添加镜像
nrm del 名称	删除镜像

2、使用npm全局安装typescript

npm i -g typescript

// 检查是否安装成功  查看到版本，表示安装成功
tsc -v

3、使用tsc命令对ts文件进行编译

// 使用命令行工具，进入到对应的文件目录中，执行如下命令
tsc ts文件名

三、ts编译配置

网址：https://www.tslang.cn/docs/handbook/compiler-options.html

tsc编译可以通过tsconfig.json来进行自定义配置

在项目根目录下创建名称为tsconfig.json文件或使用tsc --init 命令自动生成tsconfig.json文件

配置常用的配置选项

{
    // 用来指定哪些ts文件需要被编译
    // src目录下面的任意目录和任意文件
    "include":[
      "./src/**/*"
    ],   
    // 编译器的选项
    "compilerOptions":{
      // 用户指定ts被编译为es的版本 默认为转为es3 esnext最新版本
      "target":"es5",
      // 指定要使用的模块化规范
      "module":"es6",
      // 用户来指定编译后文件所在的目录
      "outDir":"./dist",
      // 是否对js文件进行编译，默认是false
      "allowJs": true,
      // 是否检查js代码，是否符合语法规范，默认false
      "checkJs": true,
      // 当有错误时不生成编译后的文件 true有错就不生成
      "noEmitOnError":true,
      // ------------------------------------------------
      
      // 开启严格检查
      "strict": true
    }
}

配置好配置文件后就可以执行

// 实时编译，只要文件有修改就会自动进行编译，不在需要修改后手动执行
tsc -w

项目配置示例

1. 生成 package.json 文件 npm init -y
   

2. 生成 tsconfig.json 文件 tsc --init
   
   最终项目效果