从零开始学typescript

已于 2023-07-07 14:59:46 修改
阅读量474 收藏
点赞数 1
分类专栏： 前端 文章标签： typescript javascript 前端
于 2023-02-23 15:48:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yi742891270/article/details/121932680
版权

https://coding.imooc.com/learn/list/412.html
公司花钱买的，我边学边做笔记

设置

vscode设置

在这里插入图片描述
然后下个Prettier - Code formatter
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
以后保存就能格式化了

下载ts

npm install typescript@3.6.4 -g ts版本
npm install -g ts-node@8.4.1 node执行ts文件
这样，以后就能

//demo.ts
console.log(123);

PS D:\touchFish\code\typeScript> ts-node.cmd .\demo.ts
123

一些类型？

// 基础类型就布兰、字符、数值就不一一列出
// 对象类型
const func1 = (str: string) => {
    return parseInt(str)
}

// 自定义对象类型
interface Person {
    name: string
}

const p: Person = {
    name: 'jack'
}

// 泛型类型？
let temp: number | string = 123;
temp = '456'

然后interface、class、type这3个写法都差不多？不知道区别是啥，不像java分那么细

元组

长度和类型都固定的数组

const tuple: [string, string, number] = ['a', 'b', 1]

interface

interface Person{
    // private 
    readonly name:string;
    // 可有可无的属性
    age?:number;
    // 允许有其他的属性
    [propName:string]:any;    
    // 要有个函数，返回类型为string
    say():string;
}

然后一样像Java，interface可以被interface 继承extends
然后class一样可以implementsinterface
interface一样地，只是写而没有实际地方法内容之类的，要在class中写

class

老Java了

// public 公共
// private 私有
// protected 允许类内和子类使用

class Person {
    public name: string;
    private age: number;
    protected sayHi() {
        this.name; //使用共有
        this.age; //允许类内使用
        console.log('hi');
    }
}

class Teacher extends Person {
    public say() {
        this.sayHi() //允许类内使用
        this.name
        // this.age//私有，读不了
    }
}

const T = new Teacher()
// console.log(T.sayHi());//访问不了，因为sayHi是protected,只允许类内和子类使用

构造器

老Java了

class Person {
    constructor(public name: string) { }
}

class Teacher extends Person {
    constructor(public name: string, public age: number) {
        super(name)
    }
}

const teacher = new Teacher('tom', 12);

get和set

老Java了

static单例模式

老Java了


class Person {
    private constructor(public name: string) { }

    static createObj(name: string) {
        return new Person(name)
    }
}

const p = Person.createObj('啊强')
console.log(p.name);

抽象类

老java了

ts文件使用js类的包

比如在ts中npm install js的包，会导致不识别，这时候可以再进行
npm install @types/xxx -D
这个相当于

ts —> xxx.d.ts (翻译文件，用于ts识别js) --> js

ts的文件配置

tsc --init

生成一个tsconfig.json文件，
顺便说，npm init -y可以生成package.json

很明显嘛，一些json，都是配置项，下面跟着视频用一些简单的配置

tsc

创建个文件，test.ts,


class A {
    name: string
    constructor(name: string) {
        this.name = name
    }
}

const asdasd = new A('aaa')
console.log(asdasd.name);

然后tsc，就会自动编译成js嘛

//test.js
"use strict";
var A = /** @class */ (function () {
    function A(name) {
        this.name = name;
    }
    return A;
}());
var asdasd = new A('aaa');
console.log(asdasd.name);

tsc就是自动将根目录的ts转变为js，
如果多个ts，但只想编译其中某几个，就可以再tsconfig.json中配置

{
  "include":["./test.ts"],
}

热更新

tsc -w

输出为单文件

这里是一个ts生成一个js，但也可以只生成一个js，只要设置

   "outFile": "./dist/page.js",                       /* Concatenate and emit output to single file. */

类型保护方式

class Bird {
    sing: () => {};
}

class Dog {
    bark: () => {};
}

// as 来做保护
function tarin(animal: Bird | Dog) {
    (animal as Bird).sing;
    (animal as Dog).bark;
}

// in来做保护
function tarin2(animal: Bird | Dog) {
    if ('sing' in animal) {
        animal.sing();
    } else {
        animal.bark();
    }
}

class NumberObj {
    count: number;
}

// instanceof来做保护
function add(first: object | NumberObj, second: object | NumberObj) {
    if (first instanceof NumberObj && second instanceof NumberObj) {
        return first.count + second.count;
    }
    return 0;
}

枚举

enum Status{
    OFF,
    ON,
    DELETE
}
console.log(Status);
console.log(Status.OFF);
console.log(Status[0]);

{ ‘0’: ‘OFF’, ‘1’: ‘ON’, ‘2’: ‘DELETE’, OFF: 0, ON: 1, DELETE: 2 }
0
OFF

泛型

function join<T>(first: T, second: T) {
    return `${first}${second}`;
}

const res = join<String>('1', '2')
console.log(res);

12

命名空间namespace

其实就是把类统筹到一起，叫做命名空间namespace
比如

//这有一个命名空间，有2个类
namespace Components {
    export class Header {
        constructor() {
            console.log('I am Header');
        }
    }

    export class Content {
        constructor() {
            console.log('I am Content');
        }
    }
}

//这有另一个命名空间，下面这段话相当于import引入的写法
///<reference path="Components.ts"/>

namespace Home {
    export class Page {
        constructor() {
            new Components.Content();
            new Components.Header();
        }
    }
}

然后我们设置打包

{
  "compilerOptions": {
    /* Basic Options */
    // "incremental": true,                   /* Enable incremental compilation */
    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
    "module": "amd",    //只支持amd或者system                 /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    "outFile": "./dist/page.js",     //输出单文件                  /* Concatenate and emit output to single file. */
    "outDir": "./dist",       //输出文件                 /* Redirect output structure to the directory. */
    "rootDir": "./src",      //要打包的文件                 /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    "strict": true,            
    "esModuleInterop": true                  
  }
}

导出来的js

装饰器

这和java的注解很是相似
要先开启tsconfig.json的

{
  "compilerOptions": {
    "experimentalDecorators": true,       
    "emitDecoratorMetadata": true,        
  }
}

function Path(target: any) {
    console.log('我是装饰器');

}

function PathParam(str1: string, str2: string) {
    return function (target: any) {
        console.log(str1 + str2);

    }
}

@Path
class Test { }

@PathParam('hello', 'world')
class Test2 { }

ts-node跑一下

我是装饰器
helloworld

方法的装饰器

// 普通方法：target对应类的prototype，key对应方法名，
// descriptor可以理解为一些设置，比如不可修改值之类的功能
function getNameDecorator(target: any, key: string,descriptor:PropertyDescriptor) {
    console.log(target);
    console.log(key);
}

class Test {
    name: string;
    constructor(name: string) {
        this.name = name;
    }

    @getNameDecorator
    getName() {
        return this.name
    }
}

{ getName: [Function (anonymous)] }
getName

不是很懂。。。。

访问器的装饰器

其实也是一个样

// 普通方法：target对应类的prototype，key对应方法名，
// descriptor可以理解为一些设置，比如不可修改值之类的功能
function visitDecorator(target: any, key: string, descriptor: PropertyDescriptor) {
    console.log(target);
    console.log(key);
}

class Test {
    private _name: string;
    constructor(name: string) {
        this._name = name;
    }

    get name() {
        return this._name
    }

    @visitDecorator
    set name(name: string) {
        this._name = name;
    }
}

{}
name

这个descriptor很神奇，有很多东西，具体可以看官网

属性的构造器

属性没有descriptor，要这样写

function visitDecorator(target: any, key: string) {
    const descriptor:PropertyDescriptor = {
        writable:false
    }
    return descriptor
}

参数的构造器

function paramDecorator(target: any, method: string, paramIndex: number) {
    console.log(target);
    console.log(method);
    console.log(paramIndex);
}

class Test {
    getInfo(@paramDecorator name: string, age: number) {
        // console.log(name, age);
    }
}

const test = new Test();
test.getInfo('Dell', 30)

实际应用

比如做一个通用的捕捉异常注解

const userInfo: any = undefined

function catchError(target: any, key: string, descriptor: PropertyDescriptor) {
    // 这里就代表函数里面的所有内容，比如为 reruen userInfo.name
    const fn = descriptor.value;
    descriptor.value = function () {
        try {
            fn();
        } catch (e) {
            console.log('userInfo有问题');
        }
    }
}

class Test {
    @catchError
    getName() {
        return userInfo.name
    }
}

const test = new Test()
test.getName()

userInfo有问题

常见的一些操作

1. 配置统一参数

比如一些vueuse的，都是统一一个options参数，然后要配置的话就写参数进去，无的话就默认配置。js我不知道怎么实现，但ts很容易配置

//这是一个接口，2个参数都是可选的
interface config {
  loading?: boolean
  b?: string
}

//这里，config={}是为了占位符，一般都是在最后面才做的这个
export function test(config: config = {}) {
	//定义常量
  const {
    //如果loading原本有值的话，就取config.loading里面的，否则就默认是true。这种写法对js来说是无的
    loading = true,
    b = '123',
  } = config
  console.log(loading, b)
}

重写类型（interface）

比如在vue router中，

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),

  routes: [{
    path: '/about',
    name: 'about',
    component: () => import('@/views/AboutView.vue'),
    meta:{
    	title:'主页'
    	}
  },]
})

其中的routes类型为 RouteRecordRaw[]，
但是其中的meta类型，是RouteMeta

export declare interface RouteMeta extends Record<string | number | symbol, unknown> {
}

可以说这是个泛型，但是我们在项目中，meta不可能是多变化的嘛，最好就是统一meta的字段，方便我们以后使用，上去官网查，发现这样
在这里插入图片描述
这样确实可以实现我们的目标了，明确地定义meta里面是什么样子

//冲定义
declare module 'vue-router' {
  interface RouteMeta {
    title?: string //导航条标题
    showNav?: boolean //是否显示导航条
    rightText?: string //导航条
    rightFunction?: () => void //点击右边文字按钮实现的方法
    closeWevView?: boolean //当前页面返回是否关闭H5页面
    rightIcon?: string //右上角icon
    documentTitle?: string //浏览器标题
  }
}

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'home',
    component: HomeView,
    //这样meta就统一了
    meta: {
      title: '主页',
      showNav: true, //是否显示左上角返回按键
      rightText: '按钮', //右上角按钮文字，如果没有则不显示
      closeWevView: true, //当前页面点返回是否关闭H5页面
      //点击右上角按钮文字触发的方法
      rightFunction: () => {
        console.log('ssss')
      },
      rightIcon: 'chat-o',
    },
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('@/views/AboutView.vue'),
  },
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: routes,
})

断言

就是比如uni.request，在函数写着返回必然是一个string类型，但是我想写成必然是number类型，可以用断言进行强制转换

const numberData = stringData as number
yi742891270
关注
专栏目录
从零开始学习TypeScript
AI天才研究院
08-15 933
作者：禅与计算机程序设计艺术 1.简介 TypeScript是一个由微软推出的自由和开源的编程语言，它是JavaScript的超集。它增加了可选的静态类型系统，并且可以编译成纯JavaScript代码，因此可以运行在任何浏览器上，服务器上或其他任何环境中，不需要进行额外的编译步骤。 本文将
从零开始学typescript— 自动编译
weixin_33894640的博客
01-15 315
上一篇 从零开始学typescript构建一个rest风格web服务 我们搭建了一个 web 服务器，细心的读者有没有发现当我们改动 server.ts 的内容后，程序并不会自动编译。每次查看改动后的效果需要手动运行两行命令 .\node_modules\.bin\tsc node ./dist/server.js 复制代码 是不是觉得有点小麻烦，这次我们就来解决这个痛点 首先安装 nodemon...
【Vue Router】011-路由元信息
訾博（ZiBo）的博客
01-01 335
1.11 路由元信息 1.11.1 概述 有时，你可能希望将任意信息附加到路由上，如过渡名称、谁可以访问路由等。这些事情可以通过接收属性对象的meta属性来实现，并且它可以在路由地址和导航守卫上都被访问到。定义路由的时候你可以这样配置 meta 字段： const routes = [ { path: '/posts', component: PostsLayout, children: [ { path: 'new', compone
TypesScript+vue3+vite项目根据文件目录自动生成路由注册表
weixin_48226213的博客
03-02 951
vue工程化项目每新增一个页面都要注册路由，是个繁琐而且重复的工作，下面通过vite提供的import.meta.glob方法自动引入路由，拼接路由注册表，从而减少手动注册路由的工作量。备注：如果使用webpack可以使用require.context()，也能做到根据文件目录生成路由注册表，这里不多赘述
【博学谷学习记录】超强总结，用心分享 _ 前端开发 TypeScript
pifae的博客
03-22 156
博学谷前端
TypeScript 学习笔记
weixin_41990299的博客
07-20 40
theme: jzman highlight: atelier-cave-light By understanding JavaScript, TypeScript saves you time catching errors and providing fixes before you run code. Any browser, any OS, anywhere Jav...
零基础学 TypeScript.zip
06-19
本教程针对初学者，将逐步引导你从零开始学习 TypeScript。 ### 1. 搭建后台界面布局和结合Vuex实现完整登录流程 在 `37 搭建后台界面布局和结合Vuex实现完整登录流程.html` 文件中，你将学习如何使用 TypeScript ...
typescript-guide:从零开始学习的TypeScript指南
05-05
该文档仍然不完整，但是当学习开发Web前端时，它开始被创建为内部内容，您将通过使用TypeScript从一开始就学习它，而无需使用JavaScript。除基本语法外，还有许多章节尚未编写。有可能将更多内容添加到所写的章节中...
从0开始学习TypeScript
08-10
对于从0开始学习 TypeScript，首先需要理解以下几个基本概念： 1. **类型注解**：TypeScript 最具特色的特性之一，通过类型注解（如 `let name: string`），可以提供编译时类型检查，避免运行时错误。 2. **变量...
零基础入门TypeScript详细教程
最新发布
12-15
本详细教程旨在帮助初学者从零开始学习TypeScript，掌握其基本概念、语法特性以及如何在实际项目中应用。 一、TypeScript基础 1. 变量声明：TypeScript引入了类型注解，允许在声明变量时指定其数据类型，如`let ...
Vue + TypeScript 实战（三）vue-router 路由模块化
Yushia的博客
04-19 3063
项目中一般都会分为很多模块，每个模块都是独立的，而且每个模块最好也有自己独立的路由文件，便于项目后期的拓展和维护。配置的路由模块多后，动态加载路由配置就至关重要
typescript处理角色认证以及路由的使用
wu_xiao_qing的博客
07-18 753
import * as React from 'react'; import { BrowserRouter, Switch, Route, Redirect } from 'react-router-dom'; import Login from '../src/component/login/Login'; import Experiment from './component...
类型“unknown”上不存在属性“foreach”_你不知道的 TypeScript 高级技巧
weixin_39600400的博客
11-25 4549
作者： 高翔转发链接：https://mp.weixin.qq.com/s/0DZ2f1dZue8-BATX0FQpSQ前言在 2020 年的今天，TS 已经越来越火，不管是服务端(Node.js)，还是前端框架(Angular、Vue3)，都有越来越多的项目使用 TS 开发，作为前端程序员，TS 已经成为一项必不可少的技能，本文旨在介绍 TS 中的一些高级技巧，提高大家对这门语言更深层次的认知。...
vue-cli3+typescript+router
ddr66288的博客
03-29 471
vue基于类的写法，和基于对象的写法并不一致。使用vue-cli3创建的项目，src目录下的文件结构并没有多大区别，store、router、app、view、components、aeests该有的还是有的。但是，多了一个东西：vue-property-decorator，vue-property-decorator是vue-class-component的超集。 import ...
Vue+Typescript使用vue-router路由不正常跳转采坑记录
weixin_42565137的博客
07-08 5474
近期经常看到Typescript的一些文章。自己看了看文档，写了一个demo。哇，一种重所未有的体验。决定自己以后写的产品都用Typescript+Vue了。可能vue2.x和对ts的支持不是很好（期待vue3，将用ts重构）。期间遇到了一个最大的坑，跟大家分享一下 页面上报的错： Property or method “xxx” is not defined on the instance b...
Vue + TypeScript 实战（二）路由详解
Yushia的博客
04-18 2887
一、路由属性配置说明 export default new Router({ mode: 'history', //路由模式，取值为history与hash base: '/', //打包路径，默认为/，可以修改 routes: [ { path: string, //路径 ccomponent: Component; //页面组件 name: string; // 命名路由-路由名称 components: {
学习搭建后台管理系统模板之vuex和vuerouter
weixin_45042868的博客
03-20 1436
本项目学习对象是优秀的后台系统模板vben-admin，期待通过学习解读该项目，熟悉前端项目工程化。 内容 VUEX 状态管理工具 Vue Router 路由管理 1. VUEX 状态管理工具 1.1 安装 npm install vuex@next --save 1.2 自动导入modules文件夹中写的module src/store/index.ts import type { App } from 'vue' import { createStore } from 'vuex' //.
vueRouter4.0+ts
BLUESKYHOST的博客
05-27 4653
准备工作 所需了解的vuex接口类 Module<S,R> module的类型 S 代表当前module的State类， R代表 createStore的State类 ActionContext<S,R> store上下文的类型 S 代表当前的State类， R代表 createStore的State类 StoreOptions 代表创建的Store类型 S 代表当前module的State类， 所需了解vuex的Store需要准备State类型 文件名 root-
typescript用什么软件写_我是如何从零开始学TypeScript的
weixin_29373995的博客
12-29 547
本文记录了我这个周末从零开始学习 TypeScript 的经历，包括背景学习途径做笔记的技巧保持专注和确保进度的方法实践过程背景我的Java基础很好 —— 熟悉静态语言类型的常见规范我的JavaScript基础也很好我正计划将 typescript 引进工作项目(以下统一将 typescript 简写成 ts)从官方文档入手虽然之前从未系统学习过 ts， 但在看一些三方库的源码或者示例代码时，多多...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值