Typescript学习笔记

最新推荐文章于 2024-09-18 14:27:48 发布
最新推荐文章于 2024-09-18 14:27:48 发布
阅读量417 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nikokvcs/article/details/103903352
版权
这篇博客详细介绍了TypeScript的安装、基本类型指定、面向对象特性、泛型、模块和装饰器等核心概念。通过实例展示了如何创建ts项目、定义数组、元组、枚举、接口、泛型类以及使用装饰器来增强类的方法。
摘要由CSDN通过智能技术生成

TypeScript

安装typescript

安装 npm install -g typescript

使用：

运行代码前需要将ts文件编译为js文件
（因为浏览器只能解释运行js代码）
编译ts：
tsc index.ts

生成ts项目目录

（使得vscode可以直接自动编译ts项目）

首先进入ts文件所在文件夹，终端输入
tsc --init

然后生成的tsconfig.json中
解除outdir这一行的注释

在这里插入图片描述

可以把 outDir 的 目录 “./” 改为 “./js”

然后点击 Terminal/Run Task
然后选择

tsc watch -tsconfig.json

这样它就会实时把你的ts代码编译为js代码

创建一个html文件以运行js
在这里插入图片描述

在html文件里面，输入html，然后点击html：5

在这里插入图片描述

添加一行

<script src="js/index.js" ></script>

ts必须指定类型

几种指定类型的方法：

var flag:boolean = true;
var num:number = 123;
var str:string = 'this is a str'
var arr:number[] = [11, 22, 33]
var arr:string[] = ['asd', 'vb ', 'a dasd']
数组类型的指定办法：
var arr:number[] = [11, 22, 33]
var arr:string[] = ['asd', 'vb ', 'a dasd']

或者

var arr:Array<number> = [11,22,33]

元组类型

和数组类型相似，但是可以指定每一个其中的元素的类型
let arr:[number, string] = [123, ‘abc’]

枚举类型

enum Flag {success, error}
(未赋值的话，值等于下标)
enum Flag {success= 1, error = 2}

let f:Flag = Flag.error

也可以这么写

enum Err {‘null’ = -2, ‘undefined’ = -1, ‘success’ = 1}
var e:Err = Err.success

any类型

var tmp:any = true
tmp = ‘abc’

复合类型

var num:number | undefined ;
表示这个变量既可以是undefined 也可以是number类型

var num:undefined
表示这个变量是undefined类型，赋其他任何值都报错

console.log(num) 不会报错

就是说一个变量定义之后，如果不赋值，那么其实就是undefined的状态，这个状态下如果被调用了，比如console.log(num)是会报错的，但如果变量类型定义了undefined，那就不会再报错了

var num:number | null | undefined;

表示这个变量要么是数字类型，要么为空，要么未被赋值

void表示空类型
function run():void {

}

这里表示没有返回值

注意， var b:undefined;那么b只能被 undefined 赋值，同理 null类型也是

never 类型表示不会出现的类型

比如

var b:never = (() => {})

定义匿名函数
var fun2 = function(name:string, age:number):string {
	return `${name} --- ${age}`;
}

可选参数，格式为 param ?: type

var fun2 = function(name:string, age?:number):string {
    if(age) {
        return `${name} --- ${age}`;
    }else{
        return `${name} --- 未知`;
    }
}

和可选参数类似的是，默认参数
格式为 param:type = xxx

var fun2 = function(name:string, age:number=20):string {
    return `${name} --- ${age}`;
}

无限参数

function sum(...result:number[]):number {
    var sum = 0;
    for (var i = 0; i<result.length; i++){
        sum +=result[i]
    }
    return sum
}

sum(1,4,2,1,44,5,6,4)

方法重载

在这里插入图片描述

ts中的重载，声明多个重载函数，然后在一个实现中，去判别不同重载，做出不同处理

如果调用时，调用了不存在的重载，比如 getInfo(true) 会报语法错误

毫无疑问这是个愚蠢的设计

箭头函数

setTimeout(()=>{

}, 1000)

其中箭头函数内，this指向上下文

ts引入js包
declare var require: any
const { batchInitPoolNode, get, put } = require('../module/pool');

面向对象，多态，继承

抽象类
abstract class Animal{
  abstract eat():any;
}

指定字典变量的类型：


function printLabel(labelinfo: {label:string}):void {

}

即参数必须是一个对象，这个对象的类型是 {label: string}

比如 printLabel({label: “name”})

接口
interface FullName{
	firstName:string;   这里用分号
	secondName:string;
}

function print( info:FullName ) {

}

那么调用可以这样：

var obj = {
  age:13,
  firstName:"s",
  secondName:"b",
}
print(obj)

可以成功调用，因为obj实现了 FullName接口

但是如果这样：

print({
  age:13,
  firstName:"s",
  secondName:"b",
})

将会报错，必须改为

print({
  firstName:"s",
  secondName:"b",
})

毫无疑问这也是个愚蠢的设计

用法例子：
网络请求，的参数用interface定义好

interface Param{
  type:string;
  url:string;
  data ?:string;      ?: 是可不传的意思
  dataType:string;
}


function ajax(config: Param) {
  var xhr = new XMLHttpRequest();
  xhr.open(config.type, config.url, true);
  xhr.send(config.data);
  xhr.onreadystatechange=function(){
    if(xhr.readyState == 4 && xhr.status == 200) {
      if(config.dataType ==='json'){
        JSON.Parse(xhr.responseText)
      }else{
        console.log(xhr.responseText)
      }
    }
  }
}
接口被类实现
interface Animal{
  eat():void;
}

interface Person extends Animal {
  work():void;
}

class Web implements Person{
  public name:string
  constructor(name:string){
    this.name = name
  }
  eat(){
    console.log("eat")
  }
  work(){
    console.log("work")
  }
}

var ww = new Web("小吴")

class Programmer {
  public coding(){
    console.log("coding")
  }
}

既继承，也实现接口
class GameDesigner extends Programmer implements Person {
  public name:string
  constructor(name:string){
    this.name = name
  }
  eat(){
    console.log("eat")
  }
  work(){
    console.log("work")
  }
}
类 类型接口
interface Animal{
  name:string;
  eat(str:string):void;
}

class dog implements Animal{
  name:string;
  constructor(name:string){
    this.name = name;
  }
  
  辣鸡啊，不把参数放进去居然也是对的
  eat(){
    console.log("eat" + str)
  }
}
接口继承接口
interface Animal{
  eat():void;
}

interface Person extends Animal{
  work():void;
}

class Programmer implements Person{
  public name:string
  constructor(name:string){
    this.name = name
  }
  
  eat(){
    console.log(this.name + " eating")
  }
  
  work(){
    console.log(this.name + " working")
  }
}
用interface对函数的类型进行约束
interface encrypt{
  (key:string, value:string)
}

var md5:encrypt = function(key:string, value:string):string{
  
}

function encryptPassword(encryptFunc:encrypt, password:string){
  return encryptFunc(password, password)
}
使用interface约束数组
interface UserArr{
  [index:number]:any
}

var arr:UserArr = ['aaa', 123, 'bbb'];

interface UserArr{
  [index:string]:string
}

var arr:UserArr = {'a':'b',  'c':'d'}
泛型
interface ConfigFn{
  <T>(value:T):T;
}

function getData<T>(value:T):T{
  return value;
}

var mygetData:ConfigFn= getData;

mygetData<string>('kill')

指定T类型

interface ConfigFn{
  <T>(value:T):T;
}

function getData<T>(value:T):T{
  return value;
}

var mygetData:ConfigFn<string>= getData;

mygetData('kill')
泛型类
class MySQL<T>{
  add(info:T):boolean{
    console.log(info)
    return true;
  }
}


var db = new MySQL()
db.add(3);    可以随便传入

var db = new MySQL<string>()
db.add('abc');   只能传入字符串

泛型接口只能由泛型类继承

interface DB<T>{
  add(info:T):void;
}

class MySQL<T> implements DB<T>{
  
}

模块

export function getData():any{
  return ""
}

export var externValue:number = 3

命名空间

namespace A{
  interface Animal{
    
  }
  export class Dog {          export之后才可以被命名空间外访问
    
  }
  class Cat{
    
  }
}
  
var d = new A.Dog()   注意是 A.Dog

装饰器

function logclass(target:any){
  console.log(target)
  target.prototype.apiUrl = 'xxx'
}

@logclass
class HttpClient{
  getData(){
    
  }
}

装饰器就是那个  @logclass
会自动把class作为参数传进去

装饰器工厂

function logclass(param:string){
  if (param === 'class'){
    return function(target:any){
      console.log(target)
    }
  }
}

@logclass('class')
class HttpClient{
  getData(){
    
  }
}

装饰器重载类方法

function logclass(target:any){
  return class extends target{
    getData(){
      console.log("fuck world!")
    }
  }
}

@logclass
class HttpClient{
  getData(){
    console.log('hello world')
  }
}

这样，装饰器就将类的方法给重载了

属性装饰器

function logproperty(param:string){
  return function(target:any, attr:any){
      console.log(target)
    	console.log(attr)
    	target[attr] = param;
  }
}

@logclass
class HttpClient{
  
  @logproperty('http')
  public url:any |undefined;
  
  getData(){
    console.log('hello world')
  }
}
NikoKVCS
关注
TypeScript的学习笔记
03-14
TypeScript的学习笔记
typeScript学习笔记
04-27
TypeScript学习笔记 TypeScript是一个自由和开源的编程语言，由微软开发。它是JavaScript的一个超集，扩展了JavaScript的语法，解决了JavaScript的“痛点”：弱类型和没有命名空间，导致很难模块化。TypeScript支持...
我的TypeScript笔记
chenxi1025的博客
05-09 661
去年换工作去参加其他公司面试，很多公司都问你会ts吗？了解ts吗？，第一家问的我一脸蒙蔽样，很老实的我回答说我不知道没有了解过，面试官一副鄙视样很受打击，回来之后我就网上查询搜索ts，搜索出来的原来ts是TypeScript ,是javascript的超集，所有使用JavaScript实现的东西TypeScript都能实现, TypeScript现在用的已经很广泛了，无论你使用n...
2024年最新版TypeScript学习笔记——泛型、接口、枚举、自定义类型等知识点
qq_65034569的博客
09-18 1524
TypeScript支持基础类型如布尔值、数字、字符串、数组、元组、枚举等，以及高级类型如交叉类型、联合类型、类型别名和条件类型。它引入了接口来定义对象结构，支持类和面向对象编程，包括构造函数、方法和装饰器。函数在TypeScript中可以定义输入输出类型，增强了代码的可读性。泛型允许创建可重用的代码组件，支持多种数据类型。模块和命名空间特性使得代码组织和封装更加有效，避免了全局命名冲突。装饰器为类和成员提供元数据，混入允许合并构造函数和工厂方法，而类型声明文件（.d.ts）则提供必要的类型信息。
TypeScript笔记(一)
ljt2724960661的博客
01-05 271
TypeScript 是 JavaScript 的一个超集，主要提供了 类型系统 和对 ES6 的支持，由 Microsoft 开发。 应用：vue3.0，angular2.0 1编译型语言：编译为 js 后运行，单独无法运行;2 强类型语言;3面向对象的语言; 优势 类型系统实际上是最好的文档，大部分的函数看看类型的定义就可以知道如何使用； 可以在编译阶段就发现大部分错...
Typescript 笔记
qq_38779317的博客
07-16 333
typescript 笔记
typescript笔记
qq_31539817的博客
05-25 889
一：typescript介绍和环境搭建 1.typescript介绍 TS是属于JavaScript的超集，可以编译成纯JavaScript，TS新增了许多特性，例如数据类型、类、继承以及接口等。 2，typescript环境搭建 i.项目环境搭建 安装node.js=>全局按照typescript：npm i -g typescript ii.编写一个ts文件并编译 编写一个.ts文件=>命令行tsc b.ts=>编译成一个JavaScript文件。 iii.vscode
typescript学习笔记
03-04
Typescript 学习笔记 TypeScript 是一种静态类型的编程语言，作为 JavaScript 的超集，它的主要特性是坚持与 ECMAScript 标准同步发展。下面是 TypeScript 的一些重要知识点： 一、ECMAScript 标准同步发展 * ...
TypeScript学习笔记
02-07
**TypeScript 学习笔记** TypeScript 是一种由微软开发的强类型、静态类型的超集编程语言，它扩展了 JavaScript，增加了对类、接口、泛型等面向对象编程特性的支持，并提供了更好的工具链和类型检查，以提高代码...
TypeScript 学习笔记
最新发布
09-24
TypeScript 学习笔记
TypeScript笔记
qq_42717015的博客
03-07 375
一、TypeScript初体验 1. TypeScript 是 JS 的超集，为 JS 添加了类型系统。相比 JS，开发体验 更友好，提前发现错误，Bug更少，增加开发的幸福度。 2. JavaScript 的两个运行环境是什么？1 浏览器 2 Node.js 3.TypeScript 能直接在浏览器或 Node.js 中执行吗？不能 4. 如何将 ts 编译为 js？ tsc hello.ts -> hello.js 5. 如何简化执行 ts 代码？ ts-node hello.ts...
TypeScript笔记(1)
qq_18417627的博客
03-05 178
类型 基本类型 TypeScript与JavaScript的区别就是TypeScript更加严谨，这里的严谨体现在对每一个变量的类型要求上，定义这个变量是，就要定义这个变量的类型，而在JavaScript中，变量主要有5个原始数据类型。 布尔值，数值，字符串，null，undefined。（正经来说，对象也是一个原始数据类型，但是在ts中，对象和前几个规则差的很多，所以等下再说，还有Symbol，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值