001--初探ts

女爷i 2021-11-14 14:48 239阅读 0赞

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文件如下

转载于:https://www.cnblogs.com/ccbest/p/10910726.html