TS使用记录使用ts之后，如果文件的内容是react的代码形式，文件后缀名必须为tsx。正常如下使用时编译没有问题，如

线上编译环境 www.typescriptlang.org/play

注意事项

使用ts之后，如果文件的内容是react的代码形式，文件后缀名必须为tsx。

基础类型

Boolean类型

const isShow: boolean = false;

Number类型

const age: number = 24;

String类型

const name: string = 'dyx';

Symbol 类型

const sym = Symbol();
const obj = {
  [sym]: "semlinker",
};

console.log(obj[sym]); // semlinker

Array 类型

const arr: number[] = [1, 2, 3];
const arr: Array<number> = [1, 2, 3]; // Array<number>泛型语法
const arr: ReadonlyArray<number> = [1, 2, 3]; // arr定义之后不可进行修改

Enum 类型(枚举类型)

export enum StatusEnum {
  CREAT = 'CREAT',
  DONE = 'DONE',
  PAUSE = 'PAUSE',
  DELETE = 'DELETE',
}
const status: StatusEnum = StatusEnum.CREAT;

Any 类型(可以为任何类型，应减少使用)

let anyState: any = 'dyx';
anyState = 24;
anyState = false;

// 可以将any类型的变量赋值给任何一种类型的变量
const age: number = anyState;
const isMan: boolean = anyState;

let info: any;

info.name; // ok
info.friends.good; // ok

Unknown 类型

可以给一个定义类型为unknown类型的变量赋任何类型的值，但是只能将这个变量赋值给any、unknown类型的变量。

let unknownState: unknown = 'dyx';
unknownState = 24;
unknownState = false;

// 只能将这个变量赋值给any、unknown类型的变量
const sex: any = anyState; // ok
const level: unknown = anyState; // ok
const age: number = anyState; // error
const isMan: boolean = anyState; // error

let info: unknown;
info.name; // error
info.friends.good; // error

Tuple 类型(元组)

使用方式与数组类似，可以存储不同类型的数据。使用时每一项类型必须匹配，且初始化时必须提供每个属性的值

let tupleType: [string, boolean];
tupleType = ["name", true];

console.log(tupleType[0]); // 'name'
console.log(tupleType[1]); // true

Void 类型

表示没有任何类型，当一个函数没有返回值时，将其返回值的类型设置为 void; 如果使用此类型声明变量，值只能为undefined或者null;

// 声明函数返回值为void
function getUser(): void {
  console.log("name");
}

interface Props {
  onChange?: (value: string) => void;
}

let voidState: void = undefined;

null 和 undefined 类型

可以把 null 和 undefined 赋值给任意类型的变量;如果指定了--strictNullChecks 标记，null 和 undefined 只能赋值给 void 和它们各自的类型。

let un: undefined = undefined;
let nu: null = null;

Never 类型

永不存在的值的类型, 使用 never 类型检验避免出现新增类型之后没有对应的代码兼容实现，目的是保证代码的绝对健壮

正常如下使用时编译没有问题，如果修改了Age的类型为type Age = string | number | boolean;，但是没有修改controlAgeTypeWithNever方法逻辑，就会有编译错误。

type Age = string | number;

const controlAgeTypeWithNever = (age: Age) => {
  if (typeof age === "string") {
  } else if (typeof age === "number") {
  } else {
    const isCheck: never = age;
  }
}

声明类型

普通形式

const name: string = 'dyx';

as语法

const name: string = 'dyx';
let nameLength: number = (name as string).length;

尖括号语法

const name: string = 'dyx';
let nameLength: number = (<string>name).length;

非空断言

// 从值域中排除 null 和 undefined
const func = (name: string | undefined | null) => {
  const copyName: string = name; // error
  const stringName: string = name!; // ok
}

声明一个变量是选择性传递的

value?: string  // 可以为undefined或者字符串

声明一个变量可以是多个类型

value: string | number // 可以为string或number

将多个类型进行合并

非同名合并

type CoordinateX = { x: number; };
type Coordinate = CoordinateX & { y: number; };

const coordinatePoint: Coordinate = {
  x: 1,
  y: 1
}

同名的基础类型合并之后变为never类型的数据,同名的非基础类型数据可以成功合并。

interface Bool { isMan: boolean; }
interface Str { name: string; }
interface Num { age: number; }

interface InfoA { info: Bool; }
interface InfoB { info: Str; }
interface InfoC { info: Num; }

type AllInfo = InfoA & InfoB & InfoC;

const userInfo: AllInfo = {
  info: {
    isMan: true,
    name: 'dyx',
    age: 24
  }
};

函数

ts有函数重载而js没有

定义参数类型和返回类型

function getUser(name: string, age: number): string {
  return name + age;
}

可选参数以及默认参数

可选参数放在普通参数后面

// 可选参数
function getUser(name: string, age: number, sex?: string): string {
  return name + age;
}

// 默认参数
function getUser(name: string = 'dyx', age: number, sex?: string): string {
  return name + age;
}

interface

普通类型

interface Person {
  name: string;
  age: number;
}

const userInfo: Person = {
  name: "dyx",
  age: 24,
};

可选以及只读

// 表示name属性不可修改，且age属性是可选的
interface Person {
  readonly name: string;
  age?: number;
}

任意属性

interface Person {
  name: string;
  age?: number;
  [propName: string]: any; // 可以添加任意属性值
}

泛型Partial

Partial<T>的作用就是将某个类型里的属性全部变为可选项 ?

ts代码书写常用示例

react

hooks定义状态的类型

const [name, setName] = useState<string>('dyx');

class形式组件声明props和state

interface Props {
  name: string;
}
interface State {
  age: number;
}

class User extends React.Component<Props, State> {

}

class形式组件上定义了一个属性，在最上方声明类型即可

class User extends React.Component<Props, State> {
  chartIns: any; // 定义的属性
}

location 和 match 的类型定义

import { Location, Match } from "react-router";

Route的组件的props类型

// 直接使用RouteComponentProps 作为组件的props的类型
import { RouteComponentProps } from "react-router-dom";

事件对象

import type { ChangeEvent, MouseEvent } from 'react';
// input取值等操作
e: ChangeEvent<HTMLInputElement>

// 阻止冒泡等操作
event: MouseEvent

// img标签取值
e: ChangeEvent<HTMLImageElement>

common

moment连续取值报错

import moment from "moment-timezone";

当定义一个变量可能时对象或者undfined时比如 find方法的返回值，下方取值时会提示错误，取值加!号即可

const matchInfo: OrderButton | undefined // 定义
matchInfo!.name  // 取值

定时器的定义

let timer = 0;
// 必须使用window.setInterval，不加window会有校验的错误
timer = window.setInterval(() => refreshDeliverInfo(), 10000);

dom操作的类型定义

let btn = buttons[0] as HTMLElement