TS基本语法 TS中的泛型

---

)

---

ts 没有扩展 js 的内容，只是用来类型检测！
ts 最终是需要ts解析器（npm i -g typescript）解析成js才能运行的，而这个解析器是用node写的，所有必须先装NodeJS。
详细教程可以直接去TypeScript入门教程查看。

---

类型

默认情况下 null 和 undefined 是所有类型的子类型

基本类型

let isDone:boolean = false // var isDone = false;
let decLiteral: number = 6 // var decLiteral = 6;
let myName: string = 'Jane' // var myName = 'Jane';
// 在不确定类型的时候尽量使用 unknown类型，不用any类型，unknown是安全的any类型
let a: unknown = 10
let anyThing: any = 'hello' // var anyThing = 'hello';
// void 类型表示没有返回值（没有return xxx）
function add(): void {
  console.log('没有返回值')
}

联合类型

let myFavoriteNumber: string | number // var myFavoriteNumber;

数组

// 两种方式
let numberArray: number[] = [1, 2, 3] // var numberArray = [1, 2, 3];
let numberArray1: Array<number> = [4, 5, 6] // var numberArray1 = [4, 5, 6];

let arr: (string | number)[] = [1, 'a']

let arr: {name: string, age: number}[] = [
  {name: 'Jane', age: 17},
  {name: 'Jian', age: 20}
]

元组

// 元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同，超出部分采用的是联合类型
// 注意：类型顺序要对应，相当于plus版的数组了
let data: [number, string, boolean] = [2, '3', true] // var data = [2, '3', true];

枚举

enum Direction {
    Up = 1, // 不赋值默认从0开始
    Down,
    Left,
    Right
}

console.log(Direction.Down) // 2
console.log(Direction[1]) // Up

类型推论

// 定义变量时没有给变量指定类型但是赋值了，TypeScript 会依照类型推论的规则推断出一个类型，后面就不能将其赋值其他类型了
let myString = 'seven'
// 等价于
// let myString: string = 'seven'

// 定义变量时没有赋值，会推断为 any 类型
let myString;
myString = 'seven'
myString = 7

类型断言

function getStrLen(str: number | string) {
  // if(str.length) {  这里ts会因为不确定str是否一定是string而报错，告诉你 类型string|number上不存在length属性
  if((<string>str).length) { // 类型断言str就是string类型（书写方式一）
    return (str as string).length // 两种书写方式（书写方式二）
  } else {
    return str.toString().length
  }
}

console.log(getStrLen('hello'))

类型别名

type Lady = {name: string, age: number} // 对象类型可以使用类型别名
let arr: Lady[] = [
  {name: 'Jane', age: 17},
  {name: 'Jian', age: 20}
]

泛型是什么？有什么作用？

当我们定义一个变量不确定类型的时候有两种解决方式：
使用any
使用any定义时存在的问题：虽然 以 知道传入值的类型但是无法获取函数返回值的类型；
另外也失去了ts类型保护的优势
使用泛型
泛型指的是在定义函数/接口/类型时，不预先指定具体的类型，而是在使用的时候在指定类型限制的一种特性。

泛型的用法

在函数中使用泛型

function test <T> (arg:T):T{
  console.log(arg);
  return arg;
}
test<number>(111);// 返回值是number类型的 111
test<string | boolean>('hahaha')//返回值是string类型的 hahaha
test<string | boolean>(true);//返回值是布尔类型的 true

在接口中使用泛型

// 注意，这里写法是定义的方法哦
interface Search {
  <T,Y>(name:T,age:Y):T
}
let fn:Search = function <T, Y>(name: T, id:Y):T {
  console.log(name, id)
  return name;
}
fn('li',11);//编译器会自动识别传入的参数，将传入的参数的类型认为是泛型指定的类型

在类中使用泛型

class Animal<T> {
 name:T;
 constructor(name: T){
  this.name = name;
 }
 action<T>(say:T) {
   console.log(say)
 }
}
let cat = new Animal('cat');
cat.action('mimi')

泛型约束

使用接口约束泛型

interface Person {
  name:string;
  age:number;
}
function student<T extends Person>(arg:T):T {
  return arg;
}
student({name:'lili'});//类型 "{ name: string; }" 中缺少属性 "age"，但类型 "Person" 中需要该属性
student({ name: "lili" , age:'11'});//不能将类型“string”分配给类型“number”
student({ name: "lili" , age:11});

数组泛型

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

ts 中的 this

默认指向

js中函数的this指向
ts 中默认情况下函数中的 this 是 any 类型（ts 不能提示任何属性和方法，也就是类型系统没用了…所以我们一般都尽量不使用 any 类型）

let obj = {
  a: 10,
  fn() {
    // this 是 any 类型
  }
}

设置this指向

我们也可以强行设置 this 的指向，比如：

let obj = {
  a: 10,
  fn() {
    this // this指向obj对象
  }
}

document.onclick = obj.fn // 期望的函数中的this指向document对象

ts 中函数的第一个参数是用来设置 this 类型约束的（这是一个假参数，没有实际的运行作用，只是用来给 ts 检测使用的）

let obj = {
  a: 10,
  fn(this: Document) {
    this // this指向document对象
  }
}

document.onclick = obj.fn

泛型工具类型

Partial

partial的作用就是将某个类型中的属性全部变为可选项

interface Person {
  name:string;
  age:number;
}
function student<T extends Person>(arg: Partial<T>):Partial<T> {
  return arg;
}

Record

Record<K extends keyof any, T>的作用是将K中所有的属性转换为T类型

interface PageInfo {
  title: string
}
type Page = 'home'|'about'|'other';
const x: Record<Page, PageInfo> = {
  home: { title: "xxx" },
  about: { title: "aaa" },
  other: { title: "ccc" },
};

Pick

Pick<T, K extends keyof T>的作用是将某个类型中的子属性挑出来，变成包含这个类型部分属性的子类型，示例：

interface Todo {
  title:string,
  desc:string,
  time:string
}
type TodoPreview = Pick<Todo, 'title'|'time'>;
const todo: TodoPreview ={
  title:'吃饭',
  time:'明天'
}

Exclude

Exclude<T,U>的作用是将某个类型中属于另一个类型的属性移除掉，示例

type T0 = Exclude<"a" | "b" | "c", "a">; // "b" | "c"
const t:T0 ='b';

ReturnType

returnType的作用是用于获取函数T的返回类型，示例：

type T0 = ReturnType<() => string>; // string
type T1 = ReturnType<(s: string) => void>; // void
type T2 = ReturnType<<T>() => T>; // {}
type T3 = ReturnType<<T extends U, U extends number[]>() => T>; // number[]
type T4 = ReturnType<any>; // any
type T5 = ReturnType<never>; // any
type T6 = ReturnType<string>; // Error
type T7 = ReturnType<Function>; // Error