ts的学习历程

ts是js的超集，ts的风格更偏向于后端语言，其中ts的类编程，即面向对象编程的方式使得js的写法不再混乱，使得前端能够有效并快速的地写出更加优秀且完美的js代码。但是ts无法被浏览器正确的解读为浏览器语言，所以目前ts依旧是翻译为js再翻译成浏览器语言。

ts翻译成js需要编译工具：npm install -g typescript

编译：tsc [文件名].ts

// 布尔类型  简单的true和false  :boolean
    let isDone:boolean=false
    console.log(isDone)
// 数字类型  所有数字类型都是浮点型：number除了支持十进制个16进制的字面量，
// 还支持ECMAScript中引入的二进制和八进制字面量   :number
        // 十进制
        let num10:number=1
        console.log("num10="+num10)
        // 十六进制
        let num16:number=0xf00d
        console.log("num16="+num16)
        // 二进制
        let num2:number=0b1010
        console.log("num2="+num2)
        // 八进制
        let num8:number=0o744
        console.log("num8="+num8)
// 字符串类型  可以是""引用的，也可以是''引用的,还可以是模板字符串 :string
        let str:string="但是覅会计师"
        console.log(str)
// 数组类型  和js数组差不多，但是ts对于数组的定义更加严谨，而且有两种生命方式
        //（1）[]声明方式
        let list:number[]=[1,2,3,4,5]
        console.log(list)
        // 错误示范 可执行，不会报错，但在ts中会有报错警告
        // let listErr:number[]=[1,2,3,'12']
        // console.log(listErr)
        //（2）Array<>声明方式  又叫做数组泛型
        let listArr:Array<number>=[0,1,2,3]
        console.log(listArr)
        // 使用数组泛型声明不同变量数组
        let arr:Array<any>=[1,"2"]
        console.log(arr)
        // 查看是否能够赋空值  会提醒在赋值前使用变量，符合js，单不符合ts
        // let kong:number[]
        // console.log(kong)
// 元组类型  元组类型允许表示一个已知数量和类型的数组，各元素类型可不相同,本质还是数组类型  :[类型,类型]
        let yuan:[string,number]=["1",2]
        console.log(yuan)
        // 数组越界 ,访问越界元素时，会使用联合类型代替
        let yue:[string,number]=["1",2]
        yue[1]=1
        console.log(yue)
        yue[3]="12"//可以使string也可以是number
        console.log(yue)
        // yue[3]=true
        // console.log(yue)
// 枚举类型  enum类型 是对javascript标准类型的补充 、
        enum Color{red,green}
        console.log(Color)
        //  其编号由0开始，可手动改变其编号
        enum Color1 {red=5,green}
        console.log(Color1)
// any类型 指定的未知变量类型的类型，当你写出一个变来个但是不知道接下来会赋值什么类型就可以使用any
        let any:any
        console.log(any)
        // 可使用any指定不知内容类型的数组的内容
        let anyArr:any[]=[1,"2",{num:1}]
        console.log(anyArr)
// void  某种程度上，void和any相反，不代表任何一种类型，当一个函数没有返回值时常用，其返回类型为void
        function voidFun():void{
                console.log(1)
        voidFun()
        //会报错，因为void时在没有返回值得情况下，二而下面我们用到了return返回
        //function voidFun1():void{
        //        return 1
       //console.log(voidFun1()) 
// null和undefined  在js中undefined是未赋值，已声明，null时未声明
// 在ts中分别叫做undefined类型和null类型，和void相似。他们可以使所有类型的子类型
// never类型 表示永不存在值得类型，例如总会抛出异常而根本不会有返回值的函数表达式等的返回类型
// 可以使任意类型的子类型，可以赋值给任意类型，即便是any也不可能赋值给never
// function error(message: string): never {
//         throw new Error(message);
//     }
//     error("2323")
// object类型表示除number，string，boolean，symbol。null。undefind之外的类型即非原始类型
// 类型断言 写法<类型>，as两种
        // <>写法
        let value:string="2323"
        let len=(<string>value).length
        console.log(len)
        // as
        let value1:string="2323sd"
        let len1=(value1 as string).length
        console.log(len1)

变量 声明

和js一样

// 简单接口使用 
interface spConfig{
        color:string;
function sp(color:spConfig):void{
        console.log(color)
sp({color:'red'})
// 1 可选属性 接口中某些属性不全是必需的，只在某些条件下存在，或者根本不存在，可选属性在应用option bags模式时
// 很常用。即给函数传入的参数对象中只有不分属性赋值了  属性?:类型
        // 这是用到的接口
        interface dataConfig{
                name:string;
                age?:number;
                height?:string;
                weight?:string
        //这是定义的方法 
        function data(config:dataConfig):void{
                console.log(config.name)
                console.log(config.age)
                console.log(config.height)
                console.log(config.weight)
        // 这是要传入的值
        let option={
                name:"伊始",
                height:"170cm",
                weight:"106kg"
        // 调用方法
        data(option)
// 只读属性  readonly
interface phoneConfig{
        readonly vesin:string
function phone(pOption:phoneConfig):void{
        console.log(pOption.vesin)
        // 此处报错
        // pOption.vesin="1.2"
phone({vesin:"1.1"})
        //readonly和const的区别
                // readonly 主要作为属性。const主要作为变量
// 额外的检查属性 当我们将未定义的接口值传入时，建辉在javascript中失败。
// 那么在我们引入和一个意外变量时如何处理呢 [propName:string]:any
interface colorConfig{
        r:number;
        g:number;
        b:number;
        [propName:string]:any
function setColor(color:colorConfig):void{
        console.log(color)
let colorOption={
setColor(colorOption)
// 函数类型  为了使用接口表示函数类型，我们需要给接口定义一个调用签名，它就像时一个只有参数列表和返回值类型的函数定义
// 参数列表里的每个参数都需要名字和类型
interface searchFun{
        (key:string,str?:string):boolean
let search:searchFun
search=function(key:string,str?:string){
        console.log(key)
        console.log(str)
        return true
console.log(search("111","222"))
// 可索引的类型
interface indexConfig{
        [index:number]:string
let iConfig:indexConfig
iConfig=["non","coc"]
let istr:string=iConfig[0]
console.log(istr)
// 类类型 与c#和java的接口的基本作用一样，ts也能够用它来明确的强制一个类去符合某种契约
interface ClassInterface{
        time:Date;
        name:string;
class Person implements ClassInterface {
        time:Date;
        name:string;
        constructor(){
                this.time=new Date()
                this.name="伊始"
let personFun=new Person()
console.log(personFun)
// 类静态部分和实例部分的区别  当你操作接口和类的时候，你要知道类是有两个类型的:静态部分的类型和实例的类型，
// 你会注意到，当你用构造器签名去定义一个接口并试图定义一个类去实现这个接口时会得到一个错误
        // interface timeIn{
        //         new (h:number,m:number)
        // class time implements timeIn{
        //         newTime:Date;
        //         constructor(h:number,m:number){
        //                 this.newTime=new Date()
        //         }
// 当我们去处理他的时候应该直接操作类的静态部分
        interface timeCu{
                new (h:number,m:number):timeIn
        interface timeIn{
                tick():any;
        function createTime(ct:timeCu,h:number,m:number):timeIn{
                return new ct(h,m)
        class ct implements timeIn {
                constructor (h:number,m:number){};
                tick() {
                    console.log("实现")
        let aTime=createTime(ct,12,1)
        console.log(aTime)
// 继承接口  和类一样，接口也可以互相继承
interface Shop{
        color:string
interface Goods extends Shop{
        name:string
// 这里使用到了断言
let windows =<Goods>{}
// let windows ={} as Goods
windows.color="red"
windows.name="vivo"
console.log(windows)
// 混合类型 接口能够描述javascript里的丰富类型
//接口继承类
class Control{
        public state:any
interface select extends Control{
         name:string
// function selectFun(option:select):void{
//         console.log(option)
// selectFun({name:"12",state:"23"})
class button extends Control implements select{
        name:string;
        constructor(){
                super()
                this.name="1212"
let btn=new button()
console.log(btn)

// 简单的类
class Goods{
        public name:string;
        private color:string;
        // 构造函数
        constructor(name:string,color:string){
                this.name=name
                this.color=color
        // 函数
        getter(name:string):void{
                console.log(name)
let goods=new Goods("手机","红色")
console.log(goods)
// 继承  extends 继承类，允许使用继承来扩展现在所有的类
class Phone extends Goods{
        private vison:string
        constructor(name:string,vison:string){
                super(name,"红色")
                this.vison=vison
let phone=new Phone("vivo","1.0")
console.log(phone)
phone.getter("我是方法")
// 在这里。Phone是派生类，派生类需要用super()函数去执行基类的构造函数，在调用this前要使用super()函数
// public 默认修饰符，在这里是公开
// private 私有的，它不能在声明它的类外部访问
// protected 如果其中一个类里包含一个private，name只有当另一个类中也存在这样一个private成员，并且他们
// 都来自同一处声明时,我们才认为这两个类型是兼容的,对于protected成员也使用这个规则
// readonly 只读,只能在声明时或者在构造函数中被初始化
// 存取器,ts通过getters/setters来截取对对象成员的访问，他能帮你有效地控制对对象成员的访问
// 静态属性static
// 抽象类 abstract 作为其他派生类的积累使用，一般不会被直接实例化，abstract关键字是用于定义抽象类和抽象类内部
// 定义抽象方法
abstract class NewGoods{
        name:string;
        abstract use():void;
        constructor(name:string){
                this.name=name
class NewPhone extends NewGoods{
        vison:string;
        use(): void {
            console.log(this)
        constructor(vison:string,){
                super("1")
                this.vison=vison
let newPhone=new NewPhone("1.1")
console.log(newPhone)
newPhone.use()
//构造函数  我们在创建了类时候，同时也创建了一个构造函数，这个构造函数在我们使用new创建类实例的时候被调用
// 把类当做接口使用，即接口继承类

// 书写完整的函数类型
// let addGoods:(name:string,vison:string)=>Boolean=function(name,vison):boolean{
//         return true
let addGoods:(name:string,vison:string)=>Boolean=function(name,vison){
        return true
console.log(addGoods("1","2"))
// 可选参数和默认参数   ts中每个函数的参数都是必须的，这不是指不能传递null或者undefined作为参数，而是说编译器检查
// 用户是否为每个参数都传入了值，编译器还会假设只有这些参数会被传递进函数，
// 简短的说就是传递给一个函数的参数个数必须与函数期望的参数个数一直
// 在js中每个参数都是可选的，然而在ts中我们可以通过  参数名？实现参数的可选
// 可选参数必须在必选参数后面
let selectFun:(obj:object,name?:string)=>number=function(obj){
        console.log(obj)
        return 1
        // 插曲
                // 数组的声明
                let arr:Array<number>=[1,2,3,4]
                // 元组
                let arr1:[number]=[1]
                // 数组
                let arr2:number[]=[1,2,5,4]
                // any数组
                let arr3:any[]=[1,"2","3",arr]
                console.log(arr1)
                console.log(arr2)
                console.log(arr3)
selectFun(arr)
// 默认参数  在ts中当用户没有传这个参数的时候或传递的是undefined时，我们可以为参数提供一个默认值。
// 他们叫做有默认初始化值得参数
function selectName(name="12"):void{
        console.log(name)
selectName()
// let select:(name:string)=>void=function(name="1"){
//         console.log(name)
// select()
// 剩余参数 ...agu
function agu(...agu:any):void{
        console.log(agu)
agu([1,2,3],"name",1212)
// this指向
// 重载
function set(a:number):number
function set(a:string):string
function set(a:any):any{
        if(typeof a=='number'){
                return true
        }else if(typeof a==='string'){
                return false
        }else{
                return 1
console.log(set(1))

在网上搜了一圈前端使用ts的优缺点，各种拿去跟ES6,JS比较的。你说你跟eslint校验比较下tslint还有理可循，你跟JS,ES6是在比啥呢？ 本篇文章总结一下使用TS的优"缺"点。 1.个人在使用TS的时候，基本上把接口文档抄了一遍，接口一旦有任何的输出不对劲你都可以很明确的知道到底是谁在瞎几把改字段，熟练掌握后慢慢的你可以自己定义接口交给服务端，这样可以少点适配器，当然使用了ts还用个p的适配器 2.如果你的代码足够规范的话，一旦增删改了公共接口，提交数据的函数或者跟这部分数据有关的页面 let和const是JavaScript里相对较新的变量声明方式。 TypeScript 是JavaScript的超集，所以它本身就支持let和const。 TypeScript 推荐let和const使用来代替 var。 const是对let的一个增强，它能阻止对一个变量再次赋值。 let与var的用法类似 const： 前言fengmian.png其实早在初学前端时，就有大致了解过 typescript ,但后面工作中基本 vue2 开发为主，所以真正能够接触到 typescript 的机会其实并不多。尽管在某些间歇性踌躇满志的时刻，我也会上X站搜索 typescript 最新教程，但都很难坚持过10节视频，又或者刷掘金的时候看到相关文章，我也会麻溜的点赞收藏一条龙，可是到现在也只是在我的... 网上的资料都说 ts 是 js 的类型的超集，遵循最新的ES6规范，它扩展了js的语法。 ts 更像后端面向对象语言，规范类型的定义，可以在便衣阶段发现大部分错误。 3.最新的 Vue 和 React 也可以集成 TypeScript 。 4.势头凶猛，谷歌在大力地推广 ts，angular2 以上都基于 ts 的语法。 5.ts 是前端未来开发的趋势，很多公司都开始拥抱 ts。 安装&&编译 想着边 学习 边敲代码，可是浏览器不能运行ts，所以我们得先编译成ts 2012-10：微软发布了 TypeScript 第一个版本（0.8），此前已经在微软内部开发了两年。 2014-04： TypeScript 发布了 1.0 版本。 2014-10：Angular 发布了 2.0 版本，它是一个基于 TypeScript 开发的前端框架。 2015-01：ts-loader 发布，webpack 可以编译 TypeScript 文件了。 2015-04：微软发布了 Visual Studio Code，它内置了对 TypeScript 语言的支持，它自身也是用 Ty const router = require('koa-router')() // koa路由文件 const User = require('../models/userSchema') // schema文件 定义user用户的字段的 const util = require('../utils/util') // 方法的基本使用就是这样，具体使用起来思想还是和vue2+js+elementUI是一样的，知道vue3+ts如何获取数据与定义函数，就可以将数据进行可视化出来，如果需要，后期会找时间做一个完成vue3+ts+elementPlus来获取数据，分页展示出来，以及增、查、改，删除及批量删除的功能。需要注意的是，vue3中使用前端组件element时，需要用elementPlus，而不是elementUI，后者是针对vue2的，并不是很兼容vue3；简单列举一个表格数据演示，命名为user表。 Tim Berners-Lee 于1989年发明了万维网并于1991年对外发布了世界上第一个网页浏览器 WorldWideWeb，从此拉开了 Web 时代的序幕。 1994 年网景公司（Netscape）发布了 Navigator 浏览器 0.9 版本，这是历史上第一个比较成熟的网络浏览器，轰动一时。 1995 年，受雇于 Netscape 的 Brendan Eich 用了十天时间设计出了 JavaScript。之后便开启了浏览器兼容和争夺的至暗时刻，到 1997 年 ECMA 组织开始发布公