千锋教育-做有情怀、有良心、有品质的职业教育机构

手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

【热点话题】 零基础学IT IT学习教程 IT学习笔记 IT技术干货 IT培训机构 IT应聘面试 IT职场就业
当前位置:首页  >  关于学院  >  技术干货  > 15个Typescript项目常用语法练习,学会它,90%的场景不害怕!(一)

15个Typescript项目常用语法练习,学会它,90%的场景不害怕!(一)

来源:千锋教育
发布人:syq
时间: 2022-07-14 16:12:00 1657786320

  1.常用类型

/* 常用类型*/

// 1. string 字符串类型
export const str: string = "helloworld";
str.substr(3);

// 2. number 数字类型
let num: number = 100;
num++;

// 3. boolean 布尔类型
const bool: boolean = true;

// 4. 数组类型
const numArr: number[] = [1, 2, 3];
numArr.map((num) => ++num);

// 5. 对象类型
type User = {
 name: string;
 age: number;
 isAdmin: boolean;
};
const user: User = {
 name: "xiaoming",
 age: 18,
 isAdmin: false
};
const { name, age, isAdmin } = user;

// 6. 函数类型
type Fn = (n: number) => number;
const fn: Fn = (num) => ++num;
fn(1);

Typescript项目常用语法

  2、React 组件 Props

/* React 组件 Props */

interface Props {
 disabled?: boolean;
 style?: React.CSSProperties;
 children?: React.ReactNode;
 onClick?: () => void;
}

const Button = ({ onClick, disabled, children, style }: Props) => {
 return (
   <button onClick={onClick} disabled={disabled} style={style}>
    {children}
   </button>
);
};

export default Button;

  3.联合类型 Union

/* 联合类型 Union */

// id 可为字符串或数字类型
export function printId(id: string | number) {
 console.log(id);
}

printId(101); // OK
printId('202'); // OK

  4.类型判断

/* 类型判断 */

export function printId(id: string | number) {
 if (typeof id === 'string') {
   console.log(id.toUpperCase());
} else {
   console.log(id);
}
}

printId(101); // OK
printId('202'); // OK

  5.类型断言

/* 类型断言 */

export type Position = 'left' | 'right' | 'top' | 'bottom';
const setPos = (pos: Position) => {
 //...
};

const handleChange = (value: string) => {
 setPos(value as Position);
};

handleChange('left');

  6.属性名不确定的对象

/* 属性名不确定的对象 */

export type Paths = {
[key: string]: string;
};

// 等同于
// export type Paths = Record<string, string>;

const paths: Paths = {};

paths.home = '/home'; //OK
paths.settings = '/settings'; //OK
paths.somePath = '/somePath'; //OK

  7.对象的 key 值

/* 对象的 key */

export const ErrorMessage = {
 0: "success",
 7: "Permission denied",
 9: "Invalid parameters"
 //...
};

export type ErrorCode = keyof typeof ErrorMessage;

export const logErrMsg = (code: ErrorCode) => {
 console.log(ErrorMessage[code]);
};

  更多关于前端培训的问题,欢迎咨询千锋教育在线名师,如果想要了解我们的师资、课程、项目实操的话可以点击咨询课程顾问,获取试听资格来试听我们的课程,在线零距离接触千锋教育大咖名师,让你轻松从入门到精通。

声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。

10年以上业内强师集结,手把手带你蜕变精英

请您保持通讯畅通,专属学习老师24小时内将与您1V1沟通

免费领取

今日已有369人领取成功

刘同学 138****2860 刚刚成功领取
王同学 131****2015 刚刚成功领取
张同学 133****4652 刚刚成功领取
李同学 135****8607 刚刚成功领取
杨同学 132****5667 刚刚成功领取
岳同学 134****6652 刚刚成功领取
梁同学 157****2950 刚刚成功领取
刘同学 189****1015 刚刚成功领取
张同学 155****4678 刚刚成功领取
邹同学 139****2907 刚刚成功领取
董同学 138****2867 刚刚成功领取
周同学 136****3602 刚刚成功领取

推荐阅读

最新文章

开班信息
北京校区
  • 北京校区
  • 大连校区
  • 广州校区
  • 成都校区
  • 杭州校区
  • 长沙校区
  • 合肥校区
  • 南京校区
  • 上海校区
  • 深圳校区
  • 武汉校区
  • 郑州校区
  • 西安校区
  • 青岛校区
  • 重庆校区
  • 太原校区
  • 沈阳校区