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

猜你喜欢