简单一文，让你快速上手TypeScript

最新推荐文章于 2024-04-27 02:07:46 发布

小宇宙a

最新推荐文章于 2024-04-27 02:07:46 发布

阅读量225

点赞数

文章标签： typescript 前端

本文链接：https://blog.youkuaiyun.com/qq_58949290/article/details/120104329

版权

今天我们来简单介绍一下TypeScript，让你可以快速上手

TypeScript 概述

javascript的超集
任何一种javascript运行环境都支持
功能更为强大，生态也更健全、完善

缺点

语言本身多了很多概念
小型项目，项目初期，增加一些成本

快速上手

- yarn add typescript  --dev
- yarn tsc hello.ts    //=执行过后会生成一个同名的js文件
- tsc hello.ts     //运行tsc文件

配置文件

- yarn tsc --init  //初始化配置文件
- target  //设置编译后使用的typescript标准   ES2015 ES2016
- module  //导入导出操作 例如 commonjs amd umd
- outDir //压缩后的 输出目录
- rootDir //源代码目录
- sourceMap  //是否开启源码映射
- strict  //是否开启严格模式
-

原始类型

默认允许为空

string
number
boolean
void
null
undefined
symbol

标准库声明

- 内置对象所对应的声明
- 使用严格模式的时候 Smybol 和console报错
- 解决办法1：将tsconfig.json文件里的targer设置为es2015
- 解决办法2：在配置文件中加上 "lib":['ES2015','DOM']
- 内置对象必须引用对应的内置库

TypeScript 中文错误消息

yarn tsc --locale zh-CN   //值是设置命令行报错提示为中文
在setting 里找到 typescript locale 文件 设置为 zh-CN  //这样可以设置代码中的报错为中文  但是不推荐  不利于错误的搜索

作用域问题

在全局定义了一个变量另一个文件定义了同样的变量就会报错

1. 使用闭包
(function (){
   const a = 124 
})()
2.通过export导出  这样就属于形成模块作用域中的成员

object类型

数组类型

const arr1: Array<number> = [1,2,3]
const arr2:number[] = [12,3]

function sun(...args:number[]){
    return args.reduce((prev,current)=>prev+current,0)
}

元组类型

export {}  //确保更其他事例没有成员冲突
const tuple:[number,string] = [18,'dd']

const [age,name] = tuple

枚举类型

enmu

enum PostStatus {
    success = 1,
    error = 2,
    warning =3
}

//如果不设置值  默认从0开始累加1
enum PostStatus {
    success ,
    error ,
    warning 
}

//如果设置了第一个值  会从第一个值 累加1
enum PostStatus {
    success = 3 ,
    error ,
    warning 
}

//枚举类型会入侵到我们运行时候的代码
//最后会编译成  双向的键值对  可以通过值过去键  也可以通过键获取值


//因为我们用值获取键不常用  所以enum前面加上一个 const关键字  就可以了
const enum PostStatus {
    success = 1,
    error = 2,
    warning =3
}

函数类型

export {}  //确保跟其他示例没有成员冲突

function fn(a:string,b:string):string {
    return a+b
}

//这种方式参数是固定的  不能大于当前的个数
//如果是需要任意个参数  我们可以使用es6的rest操作符
function fn(a:string, b:string, ...rest:string[]):string {
    return a+b
}

fn("hello")
fn('hello','world')
fn('hello','world','1')

任意类型

any

function add(a){
    return JSON.stringify(a)
}
//这样我们的参数a默认就是任意类型any

add(1)
add("hhh")
add([1,2,3])
//这样在编写的时候不会报错  但是编译阶段还是会报错

//一般我们是默认还是在参数后面加上any比较好

隐式类型推断

如果我们没指定类型，我们的typescript会给我们做一个隐式类型推断

//例如
const a= 12;
这个时候我们的a就隐式的赋值为 数字类型了

类型断言

export {}  //确保跟其他示例没有冲突

const nums = [20,30,40];

//正常情况下回输出一个数字类型  但是如果没找到  就会返回undefined
const res = nums.find(i=> i>0)
//所以当我们清楚知道肯定输出结果是某个类型的时候  就可以使用类型断言
const num1 = res as number  //方式1  使用as  后面跟上类型
const num2 = <number>res    //方法2 前面加上<number> 但是会跟jsx语法冲突 所以建议方法1

接口

用来约束对象的结构，一个对象要实现一个接口，就必须要拥有这个对象约束的所有成员

具有正常、可选、动态和只读

export {}  //确保跟其他示例没有冲突


//使用interface关键字定义接口
interface Post{
    title:string
    status:number
    subtitle?:string   //可选成员
    readonly name:string   //只读成员  设置之后就不能修改 只能读取
}

function printPost (post:Post){
    console.log(post.title)
    console.log(post.status)
    console.log(post.name)
}

printPost({
    title:"success",
    status:200,
    name:"dali"
})

interface Cache {
	[prop:string]:string  //这样定义好之后  就可以随意添加属性名和属性值了  但是类型必须都是string类型
}

const cache:Cache ={}

cache.name = "dali"
cache.hobby = 'study'

类

用来描述一类具体对象的抽象成员

在使用之前必须对成员进行一个标注

export {}  //确保跟其他示例没有冲突

class Person{
    //需要在这里标注一下
    name:string
    age:number

    constructor(name:string,age:number){
        this.name = name
        this.age = age
    }
}

访问修饰符

public 公有默认就是public 可以不加

private

在类中如果声明一个属性为私有，则表示这个属性仅仅属于这个类。
仅仅能在这个类中进行在这个属性的访问。在子类和类的实现的对象中都不能访问。在子类可以通过调用使用这个属性的方法来间接来使用这个属性。

protected
被保护的对象。因为一个类可以化身为好多好多的对象。对于一些这些对象应该共有的一样的属性不应该让对象有访问和修改的权力。

对于protected声明的属性，可以在子类中访问他。不能在实现对象中访问。
对于protected声明的构造方法。则该方法只能在j继承的子类中调用不能直接在创建对象的时候直接调用。即该类只能被继承不能被实现。

export {}  //确保跟其他示例没有冲突

class Person{
    //需要在这里标注一下
    public name:string			//都可以访问到
    private age:number        //只能在类的内部访问
    protected readonly gender:boolean   //私有 在类和 在子类中访问到  readonly只读  不允许修改
    

    constructor(name:string,age:number,gender:boolean){
        this.name = name
        this.age = age
        this.gender = true
    }
}

类与接口

用类对接口进行抽象

一般一个接口抽象一个类

export {}  //确保跟其他示例没有冲突

interface Eat {
    eat (food:string): void
}

interface Run {
    run (distance:number): void
}

class Person implements Eat, Run{
    eat (food:string):void{
        console.log(`用筷子吃饭：${food}`)
    }
    run (distance: number){
        console.log(`穿鞋走路：${distance}`)
    }
}

class Animal implements Eat, Run{
    eat (food:string):void{
        console.log(`直接吃：${food}`)
    }
    run (distance: number){
        console.log(`光脚走路：${distance}`)
    }
}

抽象类

跟接口相似

不同的是可以包含一些具体的实现而接口只能是一个成员的抽象不包含具体实现

使用方式在类前面加上 abstract

定义为抽象类之后就只能被继承，不能通过new的方式创建实例对象了

泛型

把定义时不能明确的类型变成一个参数

我们在使用的时候再去传递这样一个参数

export {}  

//在方法名后面  以及需要的传入类型的后面 都加上<T>
function creatArray<T>(length:number, value:T):T[] {
        const arr = Array<T>(length).fill(value)
        return arr
}

//创建的时候将 类型写到这里面来<>  
// 这种方式叫泛型
// 这种方式使得创建更灵活
const res = creatArray<string>(3,'Tmi')   //['Tmi','Tmi','Tmi']