Ts大法

环境搭建(node环境)

node -v
npm -v
npm install typescript -g
tsc -v

创建项目

mkdir ts-demo
cd ts-demo
npm init -y
tsc --init
touch helloWorld.ts

编写helloWorld.ts文件

let a:string = "HelloWorld"
console.log(a)

运行

数据类型

类型	说明
undefined
boolean	let isDone: boolean = false
number	let age:number = 18
string	let name:string = “页面仔小杨”
Array	let list: number[] = [1, 2, 3] let list: Array = [1, 2, 3]
元组Tuple	let x: [string, number] x = [‘hello’, 10]
枚举enum	enum Color {Red = 1, Green = 2, Blue = 4} let c: Color = Color.Green
any	let notSure: any = 4
void	没有返回值
null
object	function create(o: object | null): void

函数传参

1. 可选参数

   function fun(a:number, b?:string):string {
     ...
   }
   

2. 默认值参数

   function fun(a:number, b:string='默认值'):string  {
     ...
   }
   

3. rest参数

   function fun(a:number, ...b:string[]):string {
     ...
   }
   fun(1, 'hello', 'world') // b: ['hello', 'world']
   

变量作用域

var name:string = 'a-name'

function fun():void {
    console.log(`名字${name}`)  // 变量提升 var name:string  undefined
    var name:string = 'b-name'
    console.log(`名字${name}`)  // b-name
}
fun()
console.log(name) // a-name

类

class Greeter {
    greeting: string
    constructor(message: string) {
        this.greeting = message
    }
    greet(): string {
        return "Hello, " + this.greeting
    }
}

let greeter: Greeter = new Greeter("world")
console.log(greeter.greet())

修饰符

• public:公有修饰符，可以在类内或者类外使用public修饰的属性或者行为，默认修饰符
• protected:受保护的修饰符，可以本类和子类中使用protected修饰的属性和行为, 不能被类和子类的实例对象调用
• private : 私有修饰符，只可以在类内使用private修饰的属性和行为,不能被类和子类的实例对象调用，只能在自身中调用私有方法

class People {
  public sex: string
  protected name: string
  private age: number
  public constructor(sex: string, name: string, age: number){
      this.sex = sex
      this.name = name
      this.age = age
  }
  public getName() {
      console.log('getName')
  }
  protected getAge() {
      console.log('getAge')
      return this.age
  }
}

class Man extends People {
}
let man1: Man = new Man("男", "man1", 18)
console.log(man1.sex)
console.log(man1.name) // 报错
man1.getName()
man1.getAge() // 报错

接口

// 接口可以校验传参/返参
interface paramsInterface {
  name: string
  age: number
}
interface addPersonResponse {
  success: boolean
  code?: number
}
class People {
  public static addPerson(params: paramsInterface): addPersonResponse {
    return {
      success: true,
      code: 200
    }
  }
}
console.log(People.addPerson({name: '页面仔', age: 18}))

范型

返回值的类型与传入参数的类型是相同

function identity<T>(arg: T): T { //<T>(arg: T[]): T[]
    return arg
}