随着vue3.0的即将到来，是时候学习一下TS了
简介：TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。
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 里面有一个name属性
interface parent {
name: string
}
function getname(anyamin:parent) {
console.log(anyamin.name)
}
//继承于parent的子类必须实现 name属性，要不会报错
getname({name: '123123'})
// 当然接口的属性是可以定义成可选的
interface anany {
name: string,
age?: number,
sex?: string
}
let bbb: anany = {
name: '123132',
}
// bbb可以不去实现sex 和 age ,当然也不能给bbb新增属性，那么也会报错
// 只读属性的定义
interface point {
readonly x: number,
readonly y: number
}
let bp: point = {
x: 123,
y: 123
}
// bp.x = 6 报错，只读属性不能从新赋值
// 函数类型
interface SearchFunc{
//表示一个函数，有两个参数，第一个参数是string类型，第二个参数是number,返回值是void
// x y 为形参，不需要一样
(x: string,y: number): void
}
let func: SearchFunc = function(z: string,b: number) {
console.log(z+b)
}
func('1',2)
// 可索引类型 好像和数组类似，没多大区别
interface stringarrray{
[index: number]: string
}
let arrayname: stringarrray = ['bob','333']
console.log(arrayname[0])
//类 类型 。。。。。。