==1. Typescript是什么==
1.1 Typescript与Typescript的区别
| Typescript | Javascript |
|---|---|
JS的超集，本质是JS + Types，即向JS中添加了可选的静态类型和基于类的面向对象编程 |
一种脚本语言，用于创建动态网页 |
| 可以在编译期间发现并纠正错误 | 解释性语言，只能在运行时发现错误 |
| 强类型，支持静态和冬天类型 | 弱类型，没有静态类型选项 |
最终被编译成JS代码，使浏览器可以理解 |
可以直接在浏览器中使用 |
| 支持模块、泛型和接口 | 不支持模块、泛型或接口 |
1.2 Typescript工作流程
（图略）
==2. 基本数据类型==
2.1 数字
const a: number = 3;
2.2 字符串
const b: string = '1';
2.3 数组
const c: number[] = [1,2,3];
const d: Array<number> = [1, 3];
const arr: any[] = [1, '33', true];
// 元祖
const e: [number, string] = [1, 'www'];
2.4 枚举
// ts支持数字和基于字符串的枚举
// 枚举会生成一个maping对象
enum Result {
success = 1,
fail = 2,
}
const res: Result = Result.success // 1
// 减少冗余代码
const list = [{
key: 1,
value: 'tomato'
}, {
key: 2,
value: 'banana'
}]
// 使用枚举：
enum FruitEnum {
tomato = 1,
banana = 2,
}
const list = Object.entries(FruitEnum)
// 当某个变量需要使用枚举时，不能定义为string
enum GenderEnum {
male = '1',
female = '2',
}
const gender: keyof typeof GenderEnum = 'male';
2.5 布尔类型
const g: boolean = true;
2.6 对象
const obj： object = {};
2.7 undefined / null
// 常用于组合类型
let j: number | undefined;
let i: number[] | null;
j = 100;
i = [0];
2.8 任意类型
// 任何类型都可以被归为any类型，全局超级类型
// 参数可以是任何一种类型
// 相当于放弃了类型检测，尽量不使用
let h: any = 1;
h = true;
h = 'str';
// 如果对于某个值的类型不确定，可使用unknown
// unknown是任何类型的子类型
let value: unknown;
let value1: unknwon = value; // OK
let value2: any = value; // OK
let value3: number = value; // Error
==3. 函数==
3.1 函数声明
// void
// 指定方法类型，表示没有返回值
function func(): void {
console.log(111)
}
// 如果方法有返回值，可以加上返回值的类型
function bb(): number {
return 11;
}
3.2 方法传参
// ?表示参数可传可不传，不传就是undefined
// 可选参数要放在普通参数后面，否则会编译错误
function getInfo(name: string, age: number, company = 'huawei', addr?: string) {
const str = addr ? `-${addr}` : '';
return `${name}-${age}-${company}${str}`;
}
// 参数超过4个的时候，可使用对象来聚合
interface IParams {
name: string;
key: string;
page: number;
size: number;
id?: string;
}
function handleList(params: IParams) {
// to do
}
==4. 接口==
// 接口是对行为的抽象
interface Props {
name: string;
handleClick(): void;
}
// 子组件
const ChildItem = (props: Props) => (
<div onClick={props.handleClick}>
{props.name}
</div>
)
// 父组件
const Father = () => {
const handleClick = () => {
console.log('clicked!');
}
return (
<div>
<ChildItem name="Click me" handleClick={handleClick} />
</div>
)
}
// 交叉类型
interface SpiderProps {
type: string
swim(): void;
}
interface ManProps {
name: string;
age: number;
addr?: string;
}
type SpiderMan = SpiderProps && ManProps
let bob: SpiderMan = {
name: 'Bob',
age: 20,
type: '1',
swim: () => {
console.log('I can swim.');
},
}
// 接口可以被定义多次，会自动合并为单个接口
interface Point {
x: number
}
interface Point {
y: number
}
const point: Point = {
x: 10,
y: 20,
}
==5. 断言==
5.1 非空断言
// x!将会从x值域中排除null和undefined
function func(str: string | undefined | null) {
const finalStr: string = str!; // OK
const otherStr: string = str; // Error
}
function handleClick(onClick: void | undefined) {
onClick!(); // OK
onClick(); // Error, Object is possibly 'undefined'
}
==6. 运算符==
6.1 逻辑空赋值运算符??=
6.2 空值合并运算符??
// 当左侧是操作数为null或者undefined时，返回其右侧操作符，否则返回左侧操作数
const foo = null ?? 'hello'; // hello
const baz = 0 ?? 42; // 0;
const val = 0 || 42; // 42;
// 不能和&&或者||组合使用
const val1 = null || undefined ?? 'hello'; // SyntaxError
const val2 = (null || undefined) ?? 'hello'; // hello
6.3 可选链式操作符?.
// 允许读取位于连接对象链深处的属性值
// before:
const name = arr && arr[0] && arr[0].links && arr[0].links[0]
&& arr[0].links[0].sourceNode && arr[0].links[0].sourceNode.name || 'node'
// after:
const name = arr![0]?.links![0]?.sourceNode?.name || 'node';
// 处理函数
// before:
function doSth (onError) {
if (onError) {
onError(err.msg)
}
}
// after:
function doSth (onError) {
onError?.(err.msg)
}
// 可选链不能用于赋值
let object = {};
object?.property = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment
