TypeScript基础

最新推荐文章于 2024-07-18 10:24:18 发布
最新推荐文章于 2024-07-18 10:24:18 发布
阅读量445 收藏 1
点赞数
分类专栏： 前端笔记 文章标签： typescript javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45062076/article/details/125933044
版权

TS在js的基础上添加了很多java语言的特征
全局安装：
typescript： npm install -g typescript
执行ts文件： npm i -g ts-node
生成tsconfig.json配置文件：tsc -init

1. 用VSCode创建一个.ts文件
在这里插入图片描述
2. 强类型–为变量指定变量类型

var uname:string
uname = "1"
uname = null  //no
uname = undefined  //no
uname = 1  //no
uname = {}  //no
uname = []  //no
uname = function(){}  //no

var uname:string
uname = "1"
function a(uname:string){ //给形参显示指定类型
  return uname.split("");
}
a('qwe')//自动监测参数类型是否匹配

在这里插入图片描述

3. ts文件在浏览器上无法运行，需要执行ts命令：tsc 01.ts
ts会检测【同时打开的】文件中 是否存在命名冲突
在这里插入图片描述
4. 基础数据类型

var a:null
a = null

var b:undefined
b = void 0

var c:string
c = 1+""

var d:number
d = Math.PI
d = Number.MAX_SAFE_INTEGER
d = 2 ** 24
var e:any //任意类型
e = {}
e = []

var f: string | boolean //混合类型
f = `${a}`
f = true

5. 数组类型

//规定数组元素类型 为 number
//基础写法-01
var TS_arr:Array<number> = [1,2,3,4,null,undefined]
//基础写法-02
var TS_arr:number[] = [1,2,3,4]
//多类型
var TS_arr:(number | string |null | undefined)[] = [1,2,3,4,null,undefined]

//数组对象写法 -01
var cc:{a:number,b:string}[] = [
  {a:1,b:"aaac"},
  {a:3,b:"cccc"}
]
//数组对象写法 -02
type t = {a:number,b:string}
var cc:t[] = [
  {a:1,b:"aaac"},
  {a:3,b:"cccc"}
]
//数组对象写法 -03
class t{
  a:number
  b:string
}
var cc:t[] = [
  {a:1,b:"aaac"},
  {a:3,b:"cccc"}
]

6. 接口

interface ts_json {
  a:boolean,
  b:string,
  c?:number, // 加了问号代表 c属性可以不写
  [propname:string]:any, //写任何属性  不被约束 （属性名是string类型  属性值是任何类型）  
  say():string, // 必须有say方法  而且返回值是string类型
}

//对对象字面量进行约束
var ts_json_01:ts_json = {
  a:true,
  b:"",
  c:1,
  d:true,
  e:undefined,
  say() {
      return "返回值是接口中定义的string类型"
  },
}

//对 类进行约束
class A implements ts_json{
  a = true
  b = ""
  c = 1
  say(){
    return "返回值是接口中定义的string类型"
  }
}

//接口继承
interface ts_son extends ts_json{
  www() : string
}

class B implements ts_son{
  a = true
  b = ""
  c = 1
  say(){
    return "返回值是接口中定义的string类型"
  }
  www(){
    return "ts_son继承了 ts_json 所以这个类不仅得接受 ts_json接口的约束 还得添加一个 ts_son中约束的 www方法"
  }
}

console.log(ts_json_01);

7. 对象类型

//接口约束对象
interface ts_json {
  a:boolean,
  b:string,
  c?:number, // 加了问号代表 c属性可以不写
}
var ts_json_01:ts_json = {
  a:true,
  b:"",
}
console.log(ts_json_01);

//另一种写法
const aa: {
  a:boolean,
  b:string,
  c:number,
} = {
  a:true,
  b:"",
  c:123,
}
console.log(aa);

8. 类修饰符 public protected private

class Limit{
  public a=1 //实例化对象可用 
  protected b=2 // 类以及子类内部可用 
  private c=3 // 当前类内部可用 
}
//ts定义一个类
const a :Limit = new Limit();
console.log(a.a)

9. 类型注解 类型推断

//类型注解:手动添加变量的类型
//类型推断:程序可以推断一部分变量的类型 所以可以不用特意添加
let a = 1;
a = "" //报错

10. 函数参数类型和返回类型检测

//有返回值写法
let a = 1;
function aa(b:number):number{//防止类型意外变更
  return b
}
aa(a)
//无返回值写法
function aa(b:number):void{//防止代码中出现return语句  单写一个 return  不会出错
  console.log(b+"")
  return "";//报错
}
aa(a)
//执行死循环
let a = 1;
function aa(b:number):never{//让函数一直执行
  throw new Error()
}
function bb(b:number):never{//让函数一直执行
  while(true){}
}

//参数是对象
function a({aa}:{aa:number}){
  return aa
}
a({aa:1})

11. 元组 解决数组类型与元素对应的顺序不同

//一维数组
const arr :[string,number] = ["",1]
//二维数组
const arr :[string,number][] = [
  ["",1],
  ["",1]
]

12. ts 类的 static getter setter

class A {
  readonly b :string = "readonly关键字 设置属性只读"
  constructor(private _a:string){} //在构造函数内 定义一个 _a 属性  简化了定义属性的写法
  get a(){ // getter
    return this._a + "_get"
  }
  set a(val){ // setter
    this._a = val + "_set"
  }
  static saw(){  //定义静态方法 直接通过类名 . 方法名调用 不用再实例化对象
    console.log("saw方法")
  }
}
let aa = new A("sss")
aa.a = "修改a__"
//aa.b = "修改b属性" //报错
console.log(aa.a)
//调用静态方法
A.saw()

13. ts 抽象类

//abstract 关键字定义抽象类  和 抽象方法
abstract class A{
  abstract sss():any
}
class B extends A{
  sss() {
      console.log("B类需要定义 sss的方法体");
  }
}

14. tsconfig.json 文件常用 配置 把注释解开即可

{
  "include": ["01.ts"], //只编译 01.ts
  "exclude": ["02.ts"], //编译除了 02.ts文件
  "files": ["*.ts"],//编译 所有文件
  "compilerOptions": {
	"removeComments": true,  //去掉注释  在执行的时候 直接终端输入 tsc即可
	"strict": true,   //开启严格模式
	"noImplicitAny": true,//允许注释类型 为any 的 可以不用特意声明 any
	"rootDir": "./src",  //入口文件路径
    "outDir": "./build", //出口文件路径
    "sourceMap": true, //编译后 文件 和源文件的映射  方便排错
    "noUnusedLocals": true,  // 未使用的变量 不再进行打包
  }
}

15. 联合类型 和 类型守护

interface AI {
  a:string,
  ai():any
}
interface BI {
  b:string,
  bi():any
}
//联合类型
interface AI {
  a:string,
  ai():string
}
interface BI {
  b:string,
  bi():string
}

function jw(j:AI | BI){//联合类型
  //类型守护 判断 属于哪个接口
  let a = (j as AI).a;
  console.log("a=>",a);
  if(a){ 
    let ai = (j as AI).ai;
    console.log(ai());
  }
  let b = (j as BI).b;
  console.log("b=>",b);
  if(b){
    let bi = (j as BI).bi;
    console.log(bi());
  }
}
jw({a:"aaa",ai(){return "调用了ai方法"}})
jw({b:"bbb",bi(){return "调用了bi方法"}})

16. 枚举类型

enum TYPE { //定义枚举类型  默认从0开始 也可以像这样手动设置
  A = 1,
  B = 2,
  C = 3,
}
//反查枚举属性
console.log("反查A=>", TYPE[1]);
function F(type: any) {
  switch (type) {
    case TYPE.A:
      console.log("case_a");
      break;
    case TYPE.B:
      console.log("case_b");
      break;
    case TYPE.C:
      console.log("case_c");
      break;
  }
}
F(TYPE.B);

17. 泛型 它像一个参数一样 把一个类型做参数传递

//把类型做参数传递
//基本泛型 T代表泛型
function A<T>(a: T, b: T) {
  console.log(a, b);
}
A<string>("1", "2");
A<number>(1, 2);
//定义多个泛型
function D<T, P>(a: T, b: P) {
  console.log(a, b);
}
D<string, number>("1", 1);
//数组泛型 T代表泛型
function B<T>(a: Array<T>) {
  console.log(a);
}
B<number>([1, 2]);
//类泛型
class AA<T> {
  constructor(private a: T) {}
  say_a(): T {
    return this.a;
  }
}
let a = new AA<string>("AA传入的参数");
console.log(a.say_a());
//泛型继承  约定里面必须有一些东西
interface J {
  name: string;
}
function JC<T extends J>(jc: T) {
  console.log(jc);
}
JC({ name: "1" }); // J 中 要求必须有一个 name属性
//泛型约束
function YS<T extends string | number>(jc: T) { //泛型只能 从类型 string 和 number中 选择
  console.log(jc);
}
YS("ys参数");

18. 命名空间 用命名空间将代码包裹 防止代码全局污染 实现模块化 命名空间可以嵌套

//定义命名空间 
namespace N {
  class A {
    constructor(public a: string) {
      console.log(a);
    }
  }
  class B {
    constructor(public b: string) {
      console.log(b);
    }
  }
  class C {
    constructor(public c: string) {
      console.log(c);
    }
  }
  //如果你想在外界使用 需要 export 暴露出去
  export class Main {
    constructor() {
      new A("aaaa");
      new B("bbbb");
      new C("cccc");
    }
  }
}
let m = new N.Main();

技术参考 b站：【技术胖】TypeScript从入门到精通视频教程-2020年新版

TS官网：https://www.tslang.cn

写博客这么长时间 发现博客除了可以整理 我们不经常用但是很重要的容易忘的知识点 ，更重要的是学习能力得到了很大的提升， 坚持了这么久 我依然觉得写博客从来不只是在做一两件事， 而是把你的综合能力提升到了一定的高度 ，个人认为这就是学习的最好的方式。

阿波次嘚
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
tsconfig.json 配置详解
小青蛙的博客
03-12 1497
tsconfig.json 配置详解: Basic Options Strict Type-Checking Options Additional Checks Module Resolution Options Source Map Options Experimental Options { "compilerOptions": { /* Basic Options */ ...
TypeScript基础知识点
06-20
TypeScript基础知识点，自己总结的，免费，欢迎下载TypeScript基础知识点，自己总结的，免费，欢迎下载TypeScript基础知识点，自己总结的，免费，欢迎下载TypeScript基础知识点，自己总结的，免费，欢迎下载...
TypeScript配置、tsconfig.json配置文件，TypeScript使用详解
沐枫
12-30 7393
TS，TypeScript配置文件，tsconfig.json配置文件详解，TS编译、TS配置、tsc编译
Typescript | ts转换到AMD在浏览器中直接运行
u011607490的博客
12-06 5655
使用ts-node就可以直接运行ts，但是vscode控制台还是不如大chrome的好用呀！所以想办法用最简单的办法让ts间接地跑在浏览器里进行调试！ 浏览器是不能直接运行ts的，所以需要转换到js。但是js又有一堆不同的规范。。 ts可以转换的目标规范有很多，比如es6，commonjs，amd等等。 但是转换到es6时，会有浏览器无法兼容的import关键字，还要再用厚重的babel转。...
tsconfig.json配置项解析
weixin_42185305的博客
09-18 538
compilerOptions配置说明 基本选项 “target”:“es5”，/指定ECMAScript目标版本:“ES3”(默认)、“es5”、“ES2015”、“ES2016”、“ES2017”、“ES2018”或“ESNEXT”。 / “module”:“commonjs”，/指定模块代码生成:“none”、“commonjs”、“amd”、“system”、“umd”、“es2015”...
Typescript的三种运行方式
热门推荐
HaiJing1995的博客
04-29 3万+
Typescript的三种编译运行方式一、在线complier这种方式最简单，不需在本地做任何配置安装，只需进入Typescript的官网，点击里面的playground就可以直接写代码了。但这种方式只适用于测试而不适用于开发。二、本地命令行编译1、在本地编译运行Typescript需要使用npm下载typescript npm install -g typescript 至于n
typescript基础大全
02-02
TypeScript 是一种由微软开发的强类型、面向对象的编程语言，它是 JavaScript 的超集，旨在为大型应用提供更好的可维护性和静态检查能力。以下是一些 TypeScript 基础语法元素
TypeScriptAcademind：TypeScript基础
02-12
**TypeScript基础知识详解** TypeScript是由Microsoft开发的一种强类型、静态类型的编程语言，它是JavaScript的超集，旨在提供更安全、可维护的代码，并且在编译时进行类型检查。TypeScript广泛应用于大型项目和...
IntelliWakeTSFoundation:IntelliWake TypeScript基础
03-07
**TypeScript基础知识** TypeScript是JavaScript的一个超集，由微软开发并维护，它为JavaScript带来了静态类型、类和接口等特性，提升了代码的可维护性和可靠性。本教程将深入讲解TypeScript的基础知识，帮助开发者...
UCTSBasics:终极课程TypeScript基础课程
04-14
此仓库充当Ultimate Angular的TypeScript基础课程的种子项目，以及分步分支中的最终解决方案，请与我们一起 ！ | |设置和安装从GitHub内部分叉此存储库，以便您可以直接提交到您的帐户，或仅下载内部包含内容的.zip...
const枚举 ts_typescript 枚举
weixin_39519619的博客
01-12 329
枚举的基础就像官网介绍的，枚举是对 js 标准数据类型的补充，声明一组带名字的常量；// 利用 const 关键词也可以声明一组常量，例如，声明十二生肖的排位const rat: number = 1const cattle: number = 2const tiger: number = 3const rabbit: number = 4const dragon: number = 5// 上述...
TypeScript - 浏览器中运行TS
小多的博客
10-30 2096
注意：浏览器中只能运行 JS，无法直接运行 TS，因此，需要将 TS 转化为 JS 然后再运行 浏览器中运行 TS 的步骤： 使用命令 tsc index.ts 将 ts 文件转化为 js 文件。 在页面中，使用 script 标签引入生成的 js 文件（注意是 js 文件）。<script src="./index.js"></script> 问题：每次修改 ts 文件后，都要重新运行 tsc 命令将 ts 转化为 js 。 解决方式：使用 tsc 命令的监视模式-----
ts_01 数据类型
zy_mofeimo的博客
06-30 155
ts学习笔记
tsconfig.json配置详解
m0_59565114的博客
06-22 3427
tsconfig.json配置详解
typescript安装及如何编译运行
Angela
08-02 1万+
typescript安装及编译运行 首先确保你的电脑里已经有了node,如果没有的话请先安装node，点击此链接地址安装node 页面如下，选择适合自己电脑的版本进行安装即可。已经安装node了那么请跳过此部分介绍，往下看。 检查Node.js 安装是否成功： 快捷键 win+R 打开运行面板，输入命令 cmd ，打开命令窗口 输入命令：node -v 查看Node.js版本号，如果看到版本...
typescript打开和下载文件
keeptotheend的专栏
12-09 1765
// 读取多个文件示例 public static async getAssetsFromLocal(accept:string = "*", bMul = false, func:any=null): Promise<string> { let document = Laya.Browser.document; let uploader = document.createElement('input'); uploader.ty...
vue检测页面手指滑动距离，执行回调函数，使用混入的语法，多个组件都可以使用
白白的博客
07-15 496
vue检测页面手指滑动距离，执行回调函数，使用混入mixin的语法，多个组件都可以使用
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1223
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
react 快速入门思维导图
最新发布
weixin_44565776的博客
07-18 328
只要掌握了这些react技能，基本就可以熟练使用react了
TypeScript基础语法
07-08
下面是 TypeScript 的一些基础语法： 1. 变量声明和类型注解: ```typescript let num: number = 10; let name: string = "John"; let isTrue: boolean = true; ``` 2. 函数定义和类型注解: ```typescript ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值