安装与更新

# 安装
npm install -g typescript

# 编译
tsc hello.ts

基础知识和核心概念

1. 基础类型
2. 接口
3. 装饰器

基础类型

let userName: string = "silkshadow"

let birthYear: number = 1992

let married: boolean = false

let hobby1 : string[] = ["running","yoga","cooking"]
let hobby2 : Array<string> = ["running", "yoga", "cooking"]

let tuple : [number,string] = [1,'2']

enum Fruits {
  Apple,
  Banana,
  Pear,
  Peach = 5
}
let fruit:string = Fruits[2]          //Pear
let banana: Fruits = Fruits.Banana    // 1
let peach: Fruits = Fruits.Peach      // 5

let notSure:any = null
notSure = false;

let list: any[] = [1, true, "free"];
list[1] = 100;

function warning():void{
  alert('warning')
}

function getUserName(name:string) :string{
  return `My name is ${name}`
}

let u: undefined = undefined;
let n: null = null;

function error(message: string): never { 
  throw new Error(message);
}

接口

enum Gender {
  Male = 1,
  Female = 2
}
interface Person {
  name: string,
  age: number,
  readonly gender: Gender,
  birthDay?: Date,
  [propName: string]: any
}

let zhangsan: Person = {
  name : 'zhangsan',
  age: 25,
  gender: Gender.Male,
  married : false
}

装饰器

function addAge(constructor: Function) {
  constructor.prototype.age = 18;
}
function method(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  console.log(target);
  console.log("prop " + propertyKey);
  console.log("desc " + JSON.stringify(descriptor) + "\n\n");
};

@addAge
class HelloFn {
  name: string;
  age: number;
  constructor() {
    console.log('hello');
    this.name = 'yugo';
  }

  @method
  hello() {
    return 'instance method';
  }

  @method
  static shello() {
    return 'static method';
  }
}

interface IProps {
  aProps: string;
  bProps: string;
}
interface IState {
  aState: string;
  bState: string;
}

class App extends React.PureComponent<IProps, IState> {
  state = {
    aState: '',
    bState: '',
  };
}

import { Component, Emit, Prop, Vue, Watch } from 'vue-property-decorator'

@Component
export class MyComponent extends Vue {
  @Emit()
  addToCount(n: number){ this.count += n }

  @Emit('reset')
  resetCount(){ this.count = 0 }

  @Prop()
  propA: number

  @Prop({ default: 'default value' })
  propB: string

  @Prop([String, Boolean])
  propC: string | boolean

  foo: string = 'foo'
  baz: string = 'bar'

  @Watch('child')
  onChildChanged(val: string, oldVal: string) { }
}