typescript基本语法

test-ts.ts

import { isConstructorDeclaration } from "typescript";

//二、类型注解
let var1: String
var1 = 'typescript'
var1 = 1   //波浪线提示错误，因为是字符串类型，不能赋值为Number


let var2 = true   //编译器类型推断可省略这个语法
//常见原始类型：String/Number/Boolean/undefined/null/symbol

//二、类型基础
//类型数组
let arr: String[];
arr = ['Tom']

//任意类型any
let varAny: any;
varAny = 3
varAny = '3'  //3和'3'都是可以的，因为类型为any

//any类型也可以用于数组
let arrAny: any[];
arrAny = [1, true, 'free']
arrAny[1] = 2

//函数中的类型约束
function greet(person: String): String {
  return 'Hello' + person
}

//void 常用于无返回值的函数
function greet1(person: String): void {
  console.log('此函数无返回值')
}

//对象Object，不是原始类型的就是对象类型
function fn1(o: Object) {

}
fn1({ prop: 1 })  //ok
fn1(1)  //error    实参必须是对象
fn1('string')

//更的约束方式如下：
function fn2(o: { prop: Number }) {

}
fn2({ prop: 1 }) //ok

//类型别名：type:自定义类型
type prop = { prop: Number }
//f3变的更清爽了，类型prop是对象
function f3(o: prop) { }

//类型断言
//某些情况下用户可能比编译器列能确定变量的类型，所以用类型断言  as
const someValue: any = 'this is a string.'
const strLength = (someValue as string).length;  //as关键字

//联合类型
//希望某个参数的类型是多种类型之一
let aa: string | number   //或的关系，可能是string或number
aa = '1'   //ok
aa = 1    //ok

//交叉类型
//想要定义某种类型是多种类型合并而成就使用交叉类型
type First = { first: number }
type Second = { second: string }
type FirstAndSecond = First & Second;
function fn3(): FirstAndSecond {
  return { first: 1, second: '2' }
}

//三、函数：
//必填参：参数一旦声明，就要求传递，且类型需符合
function sayHello1(person: string): string {
  return 'Hello, ' + person
}
sayHello1('Mike')   //传参

//可选参数，参数名后面加上问号？就变成可选参
function sayHello2(person: string, msg?: string): string {
  return 'Hello' + person
}
//默认参
function sayHello3(person: string, msg = '此参数为默认参'): string {
  return 'Hello' + person
}

//函数重载  使用场景：写源码或框架时函数用参数个数、类型、返回值类型区分同名函数
//重载1
function watch(cb1: () => void): void;
//重载2
function watch(cb1: () => void, cb2: (v1: any, v2: any) => void): void
//实现
function watch(cb1: () => void, cb2?: (v1: any, v2: any) => void) {
  if (cb1 && cb2) {
    console.log('执行watch重载2');
  } else {
    console.log('执行watch重载1');
  }
}


//class 的实现
//ts中的类和es6中的几乎相同，这里主要关注控制器等特性

calss Parent{
  private _foo = 'foo'   //私有属性，不能在类的外部访问
  protected bar = 'bar'  //受保护的属性，可以在子类中访问
  //参数属性：构造函数参数加修饰符，能够定义为成员属性

  constructor(public tua = 'tua'){

  }
  //方法也有修饰符
  private someMethod(){ }

  //存取器，属性方式访问，可添加额外逻辑，控制读写性
  get foo(){
    return this._foo
  }
  set foo(val){
    this._foo = val
  }

}

//接口：接口仅约束结构，不要求实现，使用更简单
// 04-interface // Person接口定义了解构 
interface Person {

  firstName: string;

  lastName: string;
}
// greeting函数通过Person接口约束参数解构 
function greeting(person: Person) {

  return 'Hello, ' + person.firstName + ' ' + person.lastName;
}
greeting({ firstName: 'Jane', lastName: 'User' }); // 正确 greeting({firstName: 'Jane'}); // 错误


//泛型（Generics）：指定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。以此增加代码能用性。
//不用泛型   这时需要每个变量都重新写一遍
/* interface Result {
  ok: 0 | 1,
  data: Feature[]   //Result是后台返回的数据，将来如果写多个接口，就要写多次，因为data不同，有可能是Feature,还可能是User等，所以出现了泛型
  
} */
//使用泛型   在使用时再传入具体的数据类型
interface Result<T> {
  ok: 0 | 0,
  data: T
}

//泛型方法
function getResult<T>(data: T): Result<T> {
  return { ok: 1, data }
}
// 用尖括号方式指定T为string 
getResult<string>('hello')
// 用类型推断指定T为number 
getResult(1)