Typescript入门 | 青训营笔记这是我参与「第四届青训营」笔记创作活动的的第7天 Typescript发展历程

这是我参与「第四届青训营」笔记创作活动的的第7天

Typescript发展历程

TS vs JS

JS为动态类型语言，只有当执行阶段，才会去进行语句检查和匹配
TS为静态类型语言，需要提前经过编译，确认语句无误编译成JS，才能被执行
静态和动态的区别，就是编译的时间发生在执行前还是执行时
TS与JS都是若类型语言，变量类型会在一定条件下进行类型转换，比如说'1'与1相加，字符串会被转化为数字，null、undefined、false在作判断时会转换成数字0

为什么选择TS

TS数据类型

✔基础数据类型

类型	说明
number	数字型
boolean	布尔型
string	字符串型
字面量	一个变量只能为一个或者多个值，如 let a: 'str' \| 1 \| true
null	空值
undefined	未定义
any	任意类型（会污染其他变量）
unknown	任意类型（安全）
never	不可以为任何值

定义方法

// 变量
let num: number = 20;

✔对象类型

类型	说明
object	任意的对象类型
自定义	使用type或interface关键字定义类型

interface定义

// interface定义
interface Object01 {
    readonly num: number, // 只读属性
    name:string,
    gender: '女' | '男' | '未知',   // 字面量定义
    age?: number,  // 可有可无
    [key: string]: any // 任意类型
}
const obj1: Object01 = {
    num: 1,
    name: '李华'，
    gender: '男',
    hobby: '敲代码'
}

type定义

// type定义
type Object01 = {
    readonly num: number, // 只读属性
    name:string,
    age: number,  
    [key: string]: string // 任意字符串类型属性
}
const obj1 = {
    num: 1,
    name: '李华'，
    age: '18',
    hobby: '敲代码'
}

✔函数类型

类型	说明
void	无返回值或者undefined

定义方法

// 函数
function print(str: string): void {
    print('Hello TS'+str);
}

// 箭头函数
const add: (a: number.b: number) => number = (a,b) => a + b;

interface定义

interface Add {
    (a: number,b: number): number;
}

函数的重载

// interface声明重载
interface Add {
    (a: number,b: number): number;
    (a: string,b: string): number;
    (a: string,b: number): number;
    (a: number,b: string): number;
}

const adds: Add = (a,b)=>{
    if(typeof a === 'string') {
        a = parseInt(a);
    }
    if(typeof b === 'string') {
        b = parseInt(b);
    }

    return a + b;
}