Typescript入门｜青训营笔记这是我参与「第四届青训营」笔记创作活动的的第5天 TypeScript简介 Typ

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

TypeScript简介

TypeScript的发展历程

2012-10：微软发布了TypeScript的第一个版本、

2014-10：Angular发布了基于TypeScript的2.0版本

2015-04：微软发布了Visual Studio Code

2016-05：@types/react发布，TypeScript可开发React

2020-09：Vue发布了3.0版本，官方支持TypeScript

2021-11：v4.5版本发布

我们熟知的JS是动态类型的语言，而TypeScript是静态型的语言

他的静态型指的是：

可读性增强：基于语法解析TSDoc,ide增强
可维护性增强：在编译阶段暴露大部分错误，多人合作的大型项目中，获得更好的稳定性和开发效率

他是JS的超集：

包含于兼容所有的Js特性，支持共存
支持渐进式引入与升级

准备工作

1.下载全局包，cmd下输入npm i -g typescript 2.输入检查是否安全成功tsc -v 3.打开编辑器创建后缀为.ts的文件

基本语法

基础数据类型

string

number

boolean

null

undefined

定义方式：变量：数据类型=值
字符串：const q:string='string'

对象类型

//interface接口属性 只能为对象指定类型。它可以继承。
interface  IBytedancer {
    // 只读属性： 约束属性不可在对象初始化外赋值
    readonly age : number;
    name: string;
    sex: 'man' | 'woman'|'other'
    // 可选属性：定义该属性可以不存在
    hobby?: string;
    // 任意属性：约束所有对象属性都必须是该属性的子类型
    [key:string] : any;
    //当类型设置为any时，就取消了类型限制
}

const bytedancer:pyl= {
    name : 'p',
    age : 18,
    sex : 'woman',
}

函数类型

interface method{
    //传入x，y，以及返回值都必须是number
    (x:number,y:number) : number
}
const mult : method = (x,y) => x * y

例
function add(x:number,y:number) : number {
    return x + y;
}
const mult : (x:number,y:number) => number =(x,y) => x*y

函数重载

数组类型

//数组
// 类型+[] 表示全部
type Arr1 = number[];
// 泛型表示
type Arr2 = Array<String | number | Record<string,number>>
//元组表示
type Arr3 = [string,number,number]
//接口表示
interface Arr4{
    [key:number] : any; 
}

let arr : Arr2 = [1,'ds',{asd:121}]

TypeScript补充类型

TypeScript泛型

3.高级类型

联合/交叉类型

联合类型：IA|IB：联合类型表示一个值可以是几种类型之一交叉类型：IA&IB:多种类型叠加到一i成为一种类型，它包含了所需的所有类型的特性

类型保护与类型守卫

类型守卫：定义一个函数，他的返回值是一个类型谓词。生效范围为子作用域

Typescript入门｜青训营笔记

TypeScript简介

准备工作

基本语法

3.高级类型

联合/交叉类型

类型保护与类型守卫

4.工程应用

Ts工程应用-Web

Ts工程应用-Node