前端---ts语法

 

ts

https://zh.uniapp.dcloud.io/tutorial/typescript-subject.html

 

@ts 语法就是java.语法！ 只是类型写在后面，无论是字段属性定义，还是函数参数及返回类型，还是接口interface，继承extends,泛型      都类似java用法 都要制定明确都类型！  常见的 类型有string  number  boolean  array  enum  any/unkonwn   void

@还可以直接 定义type 类型 

例如 type  name="sw"   type user={name:"sw"}

 

 

@可以仿照ta 抽的一堆组件封装。

1  都有types  ——定义的多个interface接口类型，通过同一个index.ts 暴露出去

2  都有util ——定义的多个功能方法，通过同一个index.ts 暴露出去

3  util中引用types中的类型。

4  

@ 可以先用jsx写，然后用ai工具转成 tsx 代码。

 

 

一  基本类型定义

let str: string = "Hello";

let num: number = 42;

let bool: boolean = true;

let arr: number[] = [1, 2, 3];

let tuple: [string, number] = ["TS", 2023]; // 元组

let anyValue: any = "任意类型";

let unknownValue: unknown = "未知类型"; // 更安全的替代 any

 

export const TENANT_PERSONAL: IDataTenant = {

  id: '0',

  name: '个人用户',

  locked: false,

  authStatus: ETenantAuthStatus.NO_NEED,

  accountCount: 1,

  contactName: '',

  contactMobile: ''

};

 

 

 

 

二  type和类型别名 ，接口

 

// 接口（可扩展）

interface User {

  name: string;

  age?: number; // 可选属性

  readonly id: number; // 只读

}

 

export interface IDataBlockType {

  id: string;

  name: string;

  color: string;

  heightMin: number; // 我们转成单位毫米

  heightMax: number; // 我们转成单位毫米

}

 

 

// 类型别名（适合联合类型或复杂类型）

type Status = "success" | "error";

type Point = { x: number; y: number };

 

import createLogger, {

  CreateLoggerOptions

} from '@kcuf/sls-logger-web';

import {

  ENV

} from '@lcai/shango-env';

 

import {

  getDefaultParams

} from './util';

 

export const SLS_OPTIONS: CreateLoggerOptions = { // ts类型

  project: 'lcai-shango',

  endpoint: 'cn-wulanchabu.log.aliyuncs.com',

  logstore: ENV,

  defaultParams: getDefaultParams

};

 

export default createLogger(SLS_OPTIONS);

 

 

 

 

 

 

三   函数

// 函数参数与返回值类型

function add(a: number, b: number): number {

  return a + b;

}

 

// 可选参数与默认值

function greet(name: string, prefix: string = "Hello"): string {

  return `${prefix}, ${name}`;

}

 

// 箭头函数

const multiply = (x: number, y: number): number => x * y;

 

// 函数重载和java一样方法名称相同，参数不同，返回类型无关

function reverse(value: string): string;

function reverse<T>(value: T[]): T[];

function reverse(value: unknow): unknow {

  return typeof value === "string" 

    ? value.split("").reverse().join("")

    : value.slice().reverse();

}

 

// 登出

export default function dataAccountLogout(): Promise<void> {

  return fetcher.post('/member/auth/logout');

}

 

 

 

 

 

 

 

四   泛型

function Demo(): ReactElement {

// useState 的 ts 写法

  const [stateColored, setStateColored] = useState<boolean>(true);

  const handleToggleColored = useCallback(() => setStateColored(prevValue => !prevValue));

  

。。。。

}

 

 

// 导出对象{} ts 类型：Record<string, unknown>

export default function getDefaultParams(): Record<string, unknown> {

  return {

    UA: navigator.userAgent,

    OS: UA.OS,

    OS_VERSION: UA.OS_VERSION,

    BROWSER: UA.BROWSER,

    BROWSER_VERSION: UA.BROWSER_VERSION,

    ...getDefaultParamsPage(),

    ...getDefaultParamsAccount()

  };

}

 

// 泛型函数
function identity<T>(arg: T): T {
return arg;
}

// 泛型接口
interface Response<T> {
code: number;
data: T;
}

// 泛型类
class Box<T> {
constructor(public value: T) {}
}

// 泛型约束
interface Lengthwise {
length: number;
}
function logLength<T extends Lengthwise>(arg: T): void {
console.log(arg.length);
}

 

 

 

五  枚举

export enum EBlockTypeSpecial {

  RIDGE = '屋脊线',

  GUTTER = '天沟',

  EXPANSION = '伸缩缝',

  DIVIDER = '分割线',

  PARAPET = '女儿墙',

  DOWN_POINT = '引下点'

}

 

 

六  type

// 类型别名（适合联合类型或复杂类型）

type Status = "success" | "error";

type Point = { x: number; y: number };

 

export type {

  DataLoginProfile as DataAccountProfile

} from '@lcai/shango-data-login';