这是我参与「第五届青训营」伴学笔记创作活动的第 2 天

typescript 基本数据类型

布尔类型

let flag: boolean = true;
console.log(flag);

数字类型

let num: number = 123;
console.log(num);

字符串类型

let str: string = "Hello,TypeScript";
console.log(str);

数组类型

let arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
console.log(arr);

元组类型

let user: [number, string];
let userId = 10086;
let userName = "Nick";
let randomBoolean = true;

user = [userId, userName];      // 正确
user = [userId, randomBoolean]; // 错误

枚举类型

enum 枚举名 {
    标识符[= 整型常数/字符串],
    标识符[= 整型常数/字符串], 
    ...
    标识符[= 整型常数/字符串],
};

null类型

let n: null = null;

undefined类型

let u: undefined = undefined;

never类型

通常用作抛出函数返回值

function error(): never {
    throw new Error('抛出错误了');
}

组合类型

let num: number | null | undefined;

num = 3;
console.log(num);

num = null;
console.log(num);

num = undefined;
console.log(num);

typescript 函数

函数的基本定义格式

function 函数名(参数列表): 返回值类型 {
    函数体 ...
    [return 返回值;]
}
or
let 函数名 = function (参数列表): 返回值类型 {
    函数体 ...
    [return 返回值;]
};

参数设置为可选参数和必须参数以及默认参数

function getInfo(name: string, age?: number): string {
    return `${name} --- ${age}`;
}

console.log(getInfo("张三", 28)); // 正确
console.log(getInfo("张三")); // 正确
console.log(getInfo(28)); // 错误

function getInfo(name: string, age: number = 20): string {
    return `${name} --- ${age}`;
}

console.log(getInfo("张三", 28)); // 正确
console.log(getInfo("张三")); // 正确
console.log(getInfo(28)); // 错误

对于参数个数不确定的情况可以使用剩余参数

function sum(init: number, ...result: number[]): number {
    let sum = init;
    for (let i = 0; i < result.length; i++) {
        sum += result[i];
    }
    return sum;
}

console.log(sum(100, 1, 2, 3, 4, 5, 6));

typescript 接口

//可索引接口，对数组的约束
interface UserArr {
    [index: number]: string
}
var arr1: UserArr = ["aaa", "bbb"];
console.log(arr1[0]);

//可索引接口，对对象的约束
interface UserObj {
    [index: string]: string
}
var arr2: UserObj = { name: '张三', age: '21' };
console.log(arr2);

typescript 泛型

记住如下一种简单的定义方式即可,此处表示函数参数类型默认为number类型，如果在调用的时候不做泛型的声明，则只能传递number类型，但是做特定声明后可以使用特定类型，返回值为该类型的数组

type IGetRepeatArr<T = number> = (target:T)=>T[];

typescript 高级用法

此处介绍交叉类型，使用场景广泛，使用&（{}|{}）的方式可以为interface设立交叉类型

总结

typescript应用场景越来越多，成为前端开发的新趋势，多敲多练！

typescript | 青训营笔记