zoukankan      html  css  js  c++  java
  • 001--初探ts

    1.编写我们的第一个ts程序

    function greeter(per){
      return 'hello' + per
    }
    var per = '小学生'
    console.log(greeter(per))

    //greeter.ts

    执行tsc greeter.ts 进行编译,可以看到生成了一个js文件,执行 node greeter.js 输出 ' hello小学生'

    现在我们给参数类型加上注解,并尝试编译

    function greeter(per:string){
      return 'hello' + per
    }
    var per = []
    console.log(greeter(per))
    //greeter.ts:5:21 - error TS2345: Argument of type 'any[]' is not assignable to parameter of type 'string'.
    //由于per赋值成了数组类型,编译出错
    //虽然编译出错了,但是仍然完成了编译,正常生成了greeter.js
    //如果我们per正确的赋值成了字符串,但是多传了一个参数也会报错

    现在我们定义一个接口来描述参数类型,接口相当于一个对象,来描述参数的类型

    interface Person {
      firstName: string
      lastName: string
    }
    function greeter(per:Person){
      return 'hello ' + per.firstName + per.lastName
    }
    let user:Person = {
      firstName: '小学生',
      lastName: '之神'
    }
    console.log(greeter(user))

    tsc编译后的代码

    function greeter(per) {
        return 'hello ' + per.firstName + per.lastName;
    }
    var user = {
        firstName: '小学生',
        lastName: '之神'
    };
    console.log(greeter(user));//hello 小学生之神

    class是ES6新增的内容,现在我们加上class

    class User {
      fullName: string 
      firstName: string
      lastName: string//先定义好数据类型方便后续的constructor使用
      constructor(firstName: string,lastName: string){
        this.firstName = firstName
        this.lastName = lastName
        this.fullName = firstName + '' + lastName
      }
    }
    interface Person {
      firstName: string
      lastName: string
    }
    function greeter(per:Person){
      return 'hello ' + per.firstName + per.lastName
    }
    let user = new User('小学生','king')//也可以这样做,因为user也有lastName和firstName属性
    console.log(greeter(user))

    编译后的js文件如下

    var User = /** @class */ (function () {
        function User(firstName, lastName) {
            this.firstName = firstName;
            this.lastName = lastName;
            this.fullName = firstName + '' + lastName;
        }
        return User;
    }());
    function greeter(per) {
        return 'hello ' + per.firstName + per.lastName;
    }
    var user = new User('小学生', 'king'); //也可以这样做,因为user也有lastName和firstName属性
    console.log(greeter(user));//hello 小学生king
    工欲善其事,必先利其器
  • 相关阅读:
    DataTable.AcceptChanges方法有何用处
    ItemArray DataRow对象的RowState和DataRowVersion属性特点
    C#中MessageBox用法大全(附效果图)
    tp5数据库操作 模型层
    07-11 Linux命令操作
    Thinkphp模板标签if和eq的区别和比较
    TP3.2单字母函数
    0629-TP整理四(create(),success(),error(),U())
    0627-TP整理三(对表的操作,数据的显示)
    0626-TP整理二(调试模式,空操作,跨控制器调用,跨方法跳转--redirect(),框架语法,创建model模型)
  • 原文地址:https://www.cnblogs.com/ccbest/p/10910726.html
Copyright © 2011-2022 走看看