随着vue3.0的即将到来，是时候学习一下TS了

　　简介：TypeScript是一种由微软开发的自由和开源的编程语言。它是java script的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。

　　ts并不是js语言，所以它是不能直接被浏览器识别的，所有从ts到js是有一个转换的过程，我们可以称之为编译。

　　ts转化到js和es6到es5是类似的，所以我们借助webpack 构建工具，将要使用的转化插件是ts-loader,和css-loader,style-loader都是差不多的

　　https://www.webpackjs.com/guides/typescript/ webpack 使用指南

　　webpack 4 　安装webpack-cli  创建webpack.config.js 文件 

　　执行 npm install --save-dev typescript ts-loader 安装转化插件，创建tsconfig.json 配置文件

　　整体的项目结构如图

　　

 

 

 　　测试一下，我们创建一个ts文件tsdome.js,经过编译后申请bundle.js

　　tsdome.ts

function getname():string {
  let name: string = "123"
  return name
}
console.log(getname())

　　最终生成的bundle.js(可以不用关系)

!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t){console.log("123")}]);

　　最终可以再浏览器打印出123　　

 

 

 　　经过上面我们初始开发ts的环境已经搭建完毕

　　一、TS基础类型

　　　　布尔值 boolean  数值 number  字符串 string  数组 number[] 或者 Array<number>  元组 Tuple 枚举 enum

　　　　任何类型 Any  空值 void  Null和Underfined  nerver   Object 对象

　　　　下面是所以的类型，以及所以的类型使用

let isdome: boolean = true
let cname: string = '123132'
let age: number = 123
let list: number[] = [1,2,3,4]
let listname: string[] = ['1','2','3','4']
let listarray: Array<number> = [1,2,3,5]
// 元组 对每个元素都进行单独类型定义 ,如果类型对不上就会报错
let yzlist: [number,number,string] = [1,2,'3']
//枚举 （好像有点像对象）
enum Color {red,green,blue}
let c: Color = Color.red
let notsure: any = 4 //不确认类型，可以用any

function getbname(): void {
  // 表示没有换回值的函数
  console.log(123)
}
getbname()
// undefined  null 意思不是很大
let und: undefined = undefined
let nl: null = null

// never 表示永不存在的值类型，如一些总是抛出错误，或者根本不会有返回值的函数表达式，或者是箭头函数
function error(message: string):never {
  throw new Error(message)
}
//object 对象类型
let obj: object = {
  a:132
}
// 类型断言
let anykey: any = '七月的风，八月的雨，你的过去，无法参与'
let alength: number = (<string>anykey).length
console.log(alength)

let aslength: number = (anykey as string).length
console.log(aslength)

　　二、变量申明 let const var

　　没什么可说的，es6 es5 ,let表示局部变量，没有申请提升，只能先申明后使用，否则报错，var 略，const，表示常量，赋值后就不能再次改变了。如果值是一个对象，表示地址不能变。

　　三、接口  （未完待续）

　　

// 定义一个父类接口parent 里面有一个na