TypeScript入门|青训营笔记

挽不住枫
51 阅读6分钟

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

前言

又少了一节课，这是结合文档，结合自己的理解去总结的ts，不是很全，但是能够对ts有一个理性认识

TypeScript概述

TypeScript是什么

TpeScript是JavaScript的超集，具有可选的类型并可以编译为纯JavaScript。从技术上讲TypeScript就是具有静态类型的 JavaScrip

  • 动态类型：不需要编译，先运行，在运行过程中再报错（如果有）
  • 静态类型： 需要编译，在运行前就报错了（如果有）

TypeScript有什么用

  1. 增加的代码的可读性和可维护性
  2. 在编译阶段就能发现大部分错误，可以避免很多线上问题
  3. 增强编译器和IDE的功能
  4. 支持最新的JavaScript新特特性
  5. 周边生态繁荣，vue3已全面支持 typescript

基本语法

1、基础类型

和js不一样的是ts需要在变量名的后面加: 数据类型

const a: number = 2022;
const b: string = 'string'

2、对象类型

同样的在ts的对象名后要加类型，大部分类型都是自定义的，一般带一个I开头来表示一个类型

const bytedancer 2 IBytedancer = {
    jobId: 9303245,
    name: 'Lin',
    sex: 'man ',
    age: 28,
    hobby: ' swimming ',
}

/*接口*/
interface IBytedancer {
    /* 只读属性: 约束属性不可在对象初始化外赋值*/
    readonly j obId: number;
    name: string;
    sex: 'man' | ' woman' | ' other';
    age: number;
    /*可选属性:定义该属性可以不存在*/
    hobby ? :string;
    /*任意属性:约束所有对象属性都必须是该属性的子类型*/
    [key: string] : any;
}

3、函数类型

直接在函数上补充类型，或者定义一个函数类型并把类型赋给变量， 而ts加强了对函数的入参和出参的类型限制

函数声明

function add(x: number ,y:number):number{
     return x+y;
  }

函数表达式

 cost mult(x: number ,y:number) => number = (x,y) => x*y

接口定义函数

interface IMult { 
  (x: number, y: number) : number;
}
const mult: IMult = (x, y) X * y;

函数重载

function add(x: number, y: number) : number;
function add(x: string, y: string) : string;
function add(x: any, y: any) : any {
    return x + y;
}

函数重载例子：

/*对getDate函数进行重载，timestamp为可缺省参数，可以用来获取需要返回类型的参数*/
function getDate(type:' string', timestamp?: string): string;
function getDate(type: 'date' ，timestamp?: string): Date;
function getDate(type:'string' | 'date', timestamp?: string): Date | string {
const date = new Date (timestamp) ;
return type === 'string' ? date. toLocaleString() : date ;

const X = getDate( 'date' ); // x: Date
const y = getDate('string', '2018-01-10'); // y: string

//同样可以用接口简化
interface IGetDate { 
(type: ' string', timestamp ? :string) : string;
(type: ' date'，timestamp ? :string) : Date; 
(type: ' string' | 'date' , timestamp l > string ): Date| string;
}
/* 
不能将类型" (type: any, timestamp: any) = >string | Date "分配给类型"IGetDate "。
不能将类型"string | Date "分配给类型"string "。
不能将类型"Date "分配给类型"String "。ts(2322)
*/
const getDate2: IGetDate = (type, timestamp) => {
const date = new Date( timestamp ) ;
return type === 'string' ? date. toLocaleString() : date;
"

4、数组类型

类型+方括号

type IArr1 = number[] ;

const arr1 : IArr1  =[1,2,3,4,5，6];

泛型表示

type IArr2 = Array<string| number| Record<string, number>> ;

const arr2: IArr2 = [1, 2,'3', '4', {a: 1 }];

元祖表示，是一个已知数量和类型的数组,可以理解为他是一种特殊的数组，如果存在数量和类型都不确定，那就直接any[]。

type IArr3 = [number, number, string, string] ;

const arr3: IArr3 = [1, 2,'3' , '4'];

接口表示

interface IArr4 {
[key: number]: any;
}

const arr4: IArr4 = ['string', () => null, {}, []];

5、enum枚举

枚举类型用于定义数值集合，使用枚举我们可以定义一些带名字的常量。

初始值默认为 0 其余的成员会会按顺序自动增长 可以理解为数组下标,可以更改初始值比如：RED = 2 或者字符串枚举：RED = "红色"

enum Color {
  RED,
  PINK,
  BLUE,
}

const red: Color = Color.RED;
console.log(red); // 0

支持枚举值到枚举名的正、反向映射

enum EnumExample {
    add = '+',
    mult = '*',
}
EnumExample['add'] === '+';
EnumExample['+'] === 'add';

enum ECorlor {
    Mon,
    Tue,
    Wed,
};
ECorlor['Mon'] === 0;
ECorlor[0] === 'Mon';

6、any

any会跳过类型检查器对值的检查，任何值都可以赋值给any类型

type IAnyType = any;

7、空类型

表示没有返回值

type IEmptyFunction = () => void;

8、泛型

简单说就是：不预先指定具体类型，而在使用中的时候再指定类型

  • K（Key）：表示对象中的键类型；
  • V（Value）：表示对象中的值类型；
  • E（Element）：表示元素类型。
/* T 自定义名称 */
function myFun<T>(target: T[]) {
  return target;
}
myFun <string> (["123", "456"]);
/*写法二 */
type IGetRepeatArrR = <T>(target;: T) => T[];

泛型接口&多泛型

interface IX<T, U> {
key: T;
val: U;
}

泛型类

class IMan<T> {
instance: T;
}

泛型别名

type ITypeArr<T> = Array<T>;

泛型约束，可以限制泛型必须符合字符串

type IGetRepeatStringArr = <T extends string>(target: T) =>T[];

泛型参数默认类型

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

9、类型断言

通过as关键字，手动指定一个值的类型

return result as Record<st ring T>;

尖括号写法

let strLength: number = (<string>str).length;

10、联合类型

联合类型用|分隔，IA | IB，表示取值可以为多种类型中的一种

let status:string|number
status='to be or not to be'
status=1

11、交叉类型

用&操作符表示，交叉类型就是两个类型必须都存在

12、类型守卫

类型保护可以保证一个字符串是一个字符串，尽管它的值也可以是一个数值，是检查的一种表达式，用于确保该类型在一定的范围内

typeof 操作符可以用来获取一个变量或对象的类型

if (typeof target === 'string') {
  return target.split('').reverse().join();
}

instanceof

if (target instanceof Object) {
  return target.reverse() ;
}

实现函数reverse，其可将数组或字符串进行反转

function reverse(target: string | Array<any>) {
}

13、keyof

keyof 取 interface 的键

interface Point {
    x: number;
    y: number;
}

// type keys = "x" | "y"
type keys = keyof Point;

用 keyof 可以更好的定义数据类型

function get<T extends object, K extends keyof T>(o: T, name: K): T[K] {
  return o[name]
}

安装typescript

首先，我们先要有Node（每个学前端的应该都有的），然后打开cmd

安装ts：

npm install -g  typescript

查看安装的ts版本：

tsc -v

ts初始化：

tsc --init

在idea中更改路径： image.png

我们可以新建一个空文件夹，用来学习 ts，例如我在文件夹下新建了个 text.ts随便写点什么

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

右键编译

image.png

同时在下方会生成.js文件

image.png

通过tsc命令，发现我们的typescript代码被转换成了熟悉的js代码

var a = 123;
console.log(a);

总结

这次对概述了ts作为一个静态类型语言，相较于js有什么优势与用处，简述了语法，比较重要的比如，泛型、接口等做了一个大致的叙述

有任何错误欢迎指出~

参考

掘金大佬-- 呛再首

掘金大佬-- 俊劫

TypeScript 中文手册

TypeScript Playground

avatar
文章
阅读
粉丝