vue中TS的应用

TS(typescript)

ts: typescript ,它是js超集（包含js所有的语法，在基础上增加了数据类型定义）
它最主要做的一件事，就是数据类型验证。
js是弱类型语言，java是强类型语言
let a = 123,a 就是number类型。let a = '123',a就是字符串类型
但是ts是在声明并定义的时候就是定义了它的数据类型。 let a:number = 100
如果你要去修改a ,a只能被修改成数值型，如果你修改成其他类型，那么会报错。
它运行的时候并不会报错（即使数据类型有问题，但是结果不会出错），在编译的过程中会报错。
浏览器没有办法去解析ts,ts是来源于js最终还是要以js的状态去运行。ts是弱类型，它也标志着，ts去向java靠拢
ts是谁开发的？
是微软开发的
ts适用的场景？
它适用于大型的项目开发，使你的开发更加的严谨
谁在用ts？
15年angular2.x它就是开始使用ts,所以说angular是谷歌和微软开发的精品。
15之前大家都是使用angular(1.x)，它的设计模式还是MVC。它在升级到2.x时候，全变了，从语法到设计模式都换了。它换成MVVM设计模式
vue3.0（核心库，还是载测试版本）它的源码就是用ts
一线大厂做项目都用ts。比如vue最新脚手架+ ts  或者 react中 ts + dva +umi+hook

一、安装

npm install -g typescript
Version 4.2.3

二、查看版本

tsc --version

三、运行文件（手动）

tsc 文件名

四、自动运行文件

• 先生成配置文件

tsc --init

它会自动创建出tsconfig.json文件

• 设置终端监听

vscode => 终端=> 运行生成任务 => 选择监听 （开启自动监听模式）

• tsconfig.json

释放出，输出目录，目录地址随意设置
  "outDir": "./dist", 

{
   
"compilerOptions": {
   
    /* 基本选项 */
    "target": "es5",// 指定 ECMAScript 目标版本: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'
    "module": "commonjs",// 指定使用模块: 'commonjs', 'amd', 'system', 'umd' or 'es2015'
    "lib": [],// 指定要包含在编译中的库文件
    "allowJs": true,//允许编译 javascript 文件
    "checkJs": true,//报告javascript文件中的错误
    "jsx": "preserve",//指定jsx代码的生成: 'preserve', 'react-native', or 'react'
    "declaration": true,//生成相应的 '.d.ts' 文件
    "sourceMap": true, //生成相应的 '.map' 文件
    "outFile": "./",//将输出文件合并为一个文件
    "outDir": "./",//指定输出目录
    "rootDir": "./",//用来控制输出目录结构 --outDir.
    "removeComments": true,//删除编译后的所有的注释
    "noEmit": true,//不生成输出文件
    "importHelpers": true,//从tslib导入辅助工具函数
    "isolatedModules": true,//将每个文件做为单独的模块（与 'ts.transpileModule' 类似）.
    /* 严格的类型检查选项 */
    "strict": true,//启用所有严格类型检查选项
    "noImplicitAny": true,//在表达式和声明上有隐含的any类型时报错
    "strictNullChecks": true,//启用严格的null检查
    "noImplicitThis": true,//当this表达式值为 any 类型的时候，生成一个错误
    "alwaysStrict": true,//以严格模式检查每个模块，并在每个文件里加入 'use strict'
    /* 额外的检查 */
    "noUnusedLocals": true,//有未使用的变量时，抛出错误
    "noUnusedParameters": true,//有未使用的参数时，抛出错误
    "noImplicitReturns": true,//并不是所有函数里的代码都有返回值时，抛出错误
    "noFallthroughCasesInSwitch": true,//报告switch语句的fallthrough错误。
    /* 模块解析选项 */
    "moduleResolution": "node",//选择模块解析策略：'node' (Node.js) or 'classic' (TypeScript pre-1.6)
    "baseUrl": "./",//用于解析非相对模块名称的基目录
    "paths": {
   },//模块名到基于 baseUrl 的路径映射的列表
    "rootDirs": [],//根文件夹列表，其组合内容表示项目运行时的结构内容
    "typeRoots": [],//包含类型声明的文件列表
    "types": [],//需要包含的类型声明文件名列表
    "allowSyntheticDefaultImports": true, //允许从没有设置默认导出的模块中默认导入。
    /* Source Map Options */
    "sourceRoot": "./",//指定调试器应该找到 TypeScript 文件而不是源文件的位置
    "mapRoot": "./",//指定调试器应该找到映射文件而不是生成文件的位置
    "inlineSourceMap": true,//生成单个 soucemaps 文件，而不是将 sourcemaps 生成不同的文件
    "inlineSources": true,//将代码与 sourcemaps 生成到一个文件中，要求同时设置了 --inlineSourceMap 或 --sourceMap 属性
    /* 其他选项 */
    "experimentalDecorators": true,//启用装饰器
    "emitDecoratorMetadata": true//为装饰器提供元数据的支持
  }
}

注意：有的同学电脑运行有问题，powerShell 权限的问题

以管理员身份运行 PowerShell，并执行命令set-ExecutionPolicy RemoteSigned将PowerShell的执行策略更改为RemoteSigned

五、ts的基本语法

• Number
• String
• Boolean
• Object
• Array
• 元祖
• undefined
• 枚举
• 任意类型any

//number
let a:Number = 10
//a = '字符串' 这种赋值不对！！！
a =500
console.log(a,'a的值')
//String
let msg:String = '信息'
msg = "100"
//Boolean
let isShow:Boolean = true
isShow = false
//Object
let obj:Object = {
   
    name:'张三',
    age:18
}
//array 
//空数组
let arr:[] = []
// 下面的赋值不对
//arr = [1,2,3]
//定义普通数组
let arr1:Array<String> = ['香蕉','苹果']
let arr2:Array<Number> = [1,2,3,4]
//指向声明 不赋值
let info:String
info= "1111"
//undefined 类型
let b:undefined

//元祖类型 声明N个类型，你要根据你声明的类型进行赋值，一一对应
let arr3:[Number,String,Boolean] = [1,'字符串',true]

//枚举（有序举例） 默认是从0开始 依次排序。如果想去修改默认值直接赋值即可
enum Sex{
   
    man,
    woman
}
//传输方式