TypeScript之小试牛刀

时间：2023-02-07 14:55:30

一、Javascript回顾

1.JavaScript的诞生：其实我个人觉得js就是一个终极缝合怪，什么好用拿什么。

  1. 基本语法：借鉴C语言和Java语言
  2. 数据结构：借鉴Java语言，包括将值分为原始值和对象两大类
  3. 函数用法：借鉴Scheme语言和Awk语言，将函数作为一等共鸣，引入闭包
  4. 字符串和数组处理：借鉴Python语言

2.JavaScript组成

  • Ecmascript:描述该语言的语法和基本对象
  • DOM：描述处理网页内容的方法和接口
  • BOM：描述了浏览器进行交互的方法和接口

3.ES6与ECMAscript2015的关系

  • ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等等，而 ES2015 则是正式名称，特指该年发布的正式版本的语言标准。

二、Typescript介绍

1.TypeScript的本质

  • TypeScript是 JavaScript 的一个超集，主要提供了类型系统和对 ES6 的支持，它由 Microsoft 开发，代码开源于 GitHub 上TypeScript之小试牛刀

2.ts的起源

  • 它的第一个版本发布于 2012 年 10 月，经历了多次更新后，现在已成为前端社区中不可忽视的力量，不仅在 Microsoft 内部得到广泛运用，而且 Google 的 Angular2 也使用了 TypeScript 作为开发语言。vue3和react也完全支持typescrpt

3.为什么选择TS

  • 类型系统实际上是最好的文档，大部分的函数看看类型的定义就可以知道如何使用了
  • 可以在编译阶段就发现大部分错误，这总比在运行时候出错好
  • 增强了编辑器和 IDE 的功能，包括代码补全、接口提示、跳转到定义、重构等

4.学习资源

  • https://www.typescriptlang.org/
  • https://www.tslang.cn/
  • https://ts.xcatliu.com/
  • https://es6.ruanyifeng.com/

三、基础使用

1.在线环境编辑

  1. https://www.tslang.cn/play/index.html

2.安装TypeScript

  1. npm install -g typescript   //全局安装

  2. tsc编译 hello.ts文件为 hello.js文件自动生成

    tsc hello.ts

3.配置文件tscoonfig.json

  • 解决了.ts和.js文件中变量同名的问题

  • tsc --init //自动生成tscconfig.json

4.编译的方法

  1. 自动编译

    • tsc -w //侦听当前目录的ts文件自动编译

  2. 降级编译target

    • TypeScript之小试牛刀

  3. 严格模式strict

    • TypeScript之小试牛刀

  4. 指定编译输出路径

    • TypeScript之小试牛刀

5.ts-node 直接运行ts文件

  • npm i ts-node -g
ts-node  hello.ts
报错，1. 找不到console.log,  安装 npm install -D tslib @types/node

四、基础语法

1.基础数据类型

  • 类型种类

    • 布尔值、数值、字符串、null、undefined 以及 ES6 中的新类型 Symbol 和 ES10 中的新类型 BigInt。

  • 使用基础类型变量

    • let count:number = 100
let name:string = '张三'
let isDone:boolean = false
let u: undefined = undefined;
let n: null = null;

  • 特别说明

    注:undefined 和 null 是所有类型的子类型。也就是说 undefined 类型的变量，可以赋值给 number 类型的变量

2.数组类型

第一种方式用类型+方括号来表示数组类let arry2:number[] =[1,2,‘d’] //不能将类型“string”分配给类型“number”

let arry:number[] =[1,2,3]

数组的第二种生成方式

let list:Array<number> = [1,2,3,4,5]

3.对象的类型–接口

在ts中我们用接口（interfaces）来定义对象的类型.

// 接口的定义
interface person {
    //定义对象的属性
    name:string
    age:number
}

let tom:person={
    //只能是定义里面有的属性
    name:'tom',
    age:12
}
//上面我们定义了一个接口、然后定义了一个变量tom，他的类型是person.这样我们约束了tom的形状和person一样

4.联合类型

用一个 | 或运算符，添加你需要的类型种类

let numberAndString:number|string 
numberAndString = 7
numberAndString = '七'
错误示范
numberAndString = true//报错

5.any类型

所有类型都可以，最好是不用太多，要不然这个ts也就没啥意义了

let numberAndString:number|string 
numberAndString = 7
numberAndString = '七'
numberAndString = true

6.类型推论及空值void

类型推论

因为TS是对js向下兼容的，所以当你不声明你数据的类型时，系统会根据你给变量赋得值自动给一个类型。

void空值

在ts中，可以用void表示没有任何返回值的函数

7.类型断言as

有时候你会遇到这样的情况，你会比TypeScript更了解某个值的详细信息。 通常这会发生在你清楚地知道一个实体具有比它现有类型更确切的类型。这里的断言就好比其他语言的类型转换，但是不进行特殊的数据检查和解构。自信是程序员的第七件神装

  • 方式一：<类型>值
  • 方式一：值 as 类型 
let someValue:string = '1111'
let strLength:number = (someValue as string).length

TypeScript之小试牛刀

五、进阶语法

1.泛型

官方定义

  • 在定义函数、接口或类的时候、不预先指定具体的类型、而是在使用的时候在指定类型的一种特性。

自我理解

  • 在我看来、泛型其实就相当于一个函数、你函数里面形参的值、全部取决你的实参传递什么值。

理解一个东西为什么存在、就要有需求。我现在有一个需求，需要一个函数里的形参是字符串类型、和布尔类型。

// 声明一个形参为字符串的函数、返回值也是字符串
function dumpstr(arg:string):string{
return arg
}  
let str = dumpstr('我是字符串')
// 声明一个形参为布尔值的函数、返回值布尔值
function dumpBoolen(arg:boolean):boolean{
return arg
}  
let bool = dumpBoolen(true)

上述代码：我们发现、我们做的事情是相同、但是却写了两个函数，所以我们可以用泛型来进行解决。

// 写一个泛型，形参和返回值都让我自己自定义
function dump<Ts> (arg:Ts):Ts{
    return arg
}
// 传入实参和传入类型
let str = dump<string>('我是字符串')
let bool = dump<boolean>(true)

语法格式

  • 尖括号<>里写类型参数、一般用T来表示第一个类型变量名称、上述我用的Ts，其实任何名字都可以你写niuX都行

泛型类

TypeScript之小试牛刀

泛型方法

TypeScript之小试牛刀

泛型约束（泛型的重要使用办法）

由于我们在使用泛型变量时、事先不知道他是那种类型、所以不能随便的操作它的属性

function dump<TsNB>(arg:TsNB):TsNB{
    console.log(arg.length);
    return arg.length
} 报错：类型“TsNB”上不存在属性“length”。

因为在泛型中、你可以传一个number类型、而number类型中没有length属性，所以报错

完美实现

//定义接口
interface IString {
    length:number
}

//extends约束了泛型T必须符合接口IString的形状
function dump<T extends IString>(arg:T):T{
    console.log(arg.length);

    return arg
}

let myStr = dump<string>('让我看看')
console.log(myStr);

2.枚举

  • enum类型是对JavaScript标准数据类型的一个补充。 像C#等其它语言一样，使用枚举类型可以为一组数值赋予友好的名字。
  • 比如一周只能有七天，颜色限定为红绿蓝等。

TypeScript之小试牛刀

六、总结

以上我写的都是我个人在学习TS的时候的一些心得，其实TS给我的感觉就像是回到了写C语言代码的时候。果然，术之尽头炁体源流，哦不，是C语言。好的，这次分享就到此结束啦，后期如果在使用TS有更高级的用法、我到时候会分享出来滴，谢谢大家，再见。

标签：

相关文章