TypeScript语法

基础类型

let isDone: boolean = false;
let num: number = 6
let name: string = 'zhangsan'
let notSure: any = 4 	// notSure = false  notSure='lisi'

// 数组
let arr: number[] = [1,2,3]
let arr: Array<number> = [1,2,3]

// 只读数组
let arr: ReadonlyArray<number> = [1,2,3,4]
arr[0] = 2  // error
arr.push(6) // error
arr.length  // error
let a = arr // error，赋值给新数组也不行

// 元组
let x: [string, number]
x = ['zhangsan', 28]
// x = [28, 'zhangsan'] Error

// 枚举
enum Color {Red = '#ff0000', Green = '#00ff00', Blue = '#0000ff'}
let c: Color = Color.Green

// void
function warnUser():void{
  console.log('this is a void function, no return')
}

// 对象
declare function create(o: object|null):void;
create({prop: 0})
create(null)

// 类型断言
let someValue: any = "this is a any type"
let len: number = (<string>someValue).length
let len: number = (someValue as string).length

接口

接口的作用是为类型命名和定义契约

interface Config {
  color?: string; // 可选属性
  url: string; 		
  readonly len: number; // 只读属性
  [propName: string]: any; // 字符串索引签名：除了上面定义的属性外其他任意名称、任意类型的属性均可
  [index: number]: string; // 索引签名, Config[0]
}

function create(config: Config): {color: string; url: number}{
  newConfig.color = config.color
 	newConfig.url = config.url
  // newConfig.len = 5 // error!
  return newConfig
}
create({color: 'red', url: 'http://localhost:8013'})


// 函数类型的接口
interface SearchFunc{
  (source: string, subString: string): boolean;
}

let mySearch: SearchFunc = function(source: string, subString: string){
  ...
  return true
}

// 类类型的接口
// 描述类的公共部分，而不是公共和私有两部分。不会检查类是否具有某些私有成员。
interface ClockInterface {
  currentTime: Date;
  setTime(d: Date);	// 接口中描述一个方法，入参/出参
}

class Clock implements ClockInterface{
  currentTime: Date;
  constructor(h: number, m: number){}
  setTime(d: Date){	// 实现接口中定义的方法
    this.currentTime = d
  }
}

// 继承接口
interface Shape{
  color: string;
}
interface PenStroke{
  penWidth: number;
}
interface Square extends Shape, PenStroke{
  sideLength: number;
}

函数

// 解决fuction中this类型为any的问题, ts会报--noImplicitThis错误
function(this: void){
  ...
  return this.a
}

interface Test{
  a: string;
  b: string;
  print(this: Test): ()=> void
}
let test: Test = {
  a: 'test_a',
  b: 'test_b',
  print: function(this: Test){
    console.log(`a:${this.a},b:${this.b}`)
  }
}

test.print()

泛型

// 入参和返回都可以是任意类型，无法约束返回值类型和入参类型必须一致
function identify(arg: any): any{
  return arg
}
// 函数的返回类型和入参类型必须一致
function identify(arg: T): T{
  return arg
}

枚举

enum E {
    Foo,
    Bar,
}

function f(x: E) {
    if (x !== E.Foo || x !== E.Bar) {
        //             ~~~~~~~~~~~
        // Error! Operator '!==' cannot be applied to types 'E.Foo' and 'E.Bar'.
    }
}
/**
这个例子里，我们先检查 x是否不是 E.Foo。 如果通过了这个检查，然后 ||会发生短路效果， if语句体里的内容会被执行。 然而，这个检查没有通过，那么 x则 只能为 E.Foo，因此没理由再去检查它是否为 E.Bar。
**/