TS 快速入门

简介: TS 快速入门

1. 什么是 TS

TS 的唯一作用就是确定变量类型。

TS 可确定的类型有:string,number,boolean,字面量,any(不建议使用),unknown,void,never,object,array,tuple,

2. TS 怎么用

TS 变量限制

// str 只能是 string 类型
let str: string;
// 联合类型
let str = string | number;
// 字面量
let str = "male" | "female";

TS 函数限制

// 定义 fn,参数必须是number,返回值必须是number
let fn: (agr1: number, agr2: number) => number;
 
// 参数1,参数2,返回值,都被 TS 确定为必须是 number 类型,不然报错。
function fn(arg: number, arg2: number): number {
  return arg + arg2;
}
// void 表示空,表示没有返回值
function fn1(): void {}
// never 表示永远不会返回结果
function fn2(): never {
  throw new Error("报错了");
}

TS 对象限制

// 对象属性必须有 name,age,且类型必须匹配
let obj = {
  name: string,
  age: number,
};
// [propName: string]: any 表示任意类型的属性,如下表示,obj1 必须有 string类型的 name,还有其他类型随便
let obj1 = {
  name: string,
  [propName: stirng]: any
}

TS 数组限制

// arr 只能是字符串数组
let arr: string[];
let arr: Array<string>;
// 元组:固定长度的数组
let arr: [string, string];

TS 类限制

class Person {
  name: string;
}

3. TS 语法糖

TS 类型断言

// 语法:变量 as 类型
//       <类型>变量
let str = unknown;
str as string;
<stirng>str;

TS 枚举

enum Gender {
  Male = 1,
  Female = 2,
}
let people: { name: string; gender: Gender };
people: {
  name: 'qcoder',
  gender: Gender.Male
}

TS 类型别名

// a 的类型可以是
type myType = string | number | boolean;
let a: myType;

TS 接口

// 接口就是一个规范,满足这个规范,就可以在这个场景中使用
// 接口定义类的结构,所有属性和方法都没有值
interface myInterface {
  name: string;
  sayHi(): void;
}
 
// 类 实现接口
class MyClass implements myInterface {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  sayHi() {}
}

TS 属性封装

class Person {
  // public 默认时 public 公有属性,可以在
  name: string;
  // private 只能在类内部进行修改访问,实例对象不能访问,子类也不能访问
  private age: number;
  // protected 可以在当前类,和子类中可以访问
  protected gender: string;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  // get,set 是 TS 的语法糖,就可以在外部对private属性进行访问和修改了
  get name() {
    return this.name;
  }
  set name(value: string) {
    return (this.age = value);
  }
}

TS 泛型

// 类型不确定时,可以使用泛型
function fn<T>(a: T): T {
  return a;
}
fn(10); // 不指定泛型,TS自动推断
fn<string>("hi"); // 指定泛型
 
// 多个泛型
function fn<T, K>(a: T, b: K): T {
  return a;
}
fn<number, string>(10, "hi");
 
// 限定泛型类型
interface Inter {
  length: number;
}
// T 泛型必须时继承了 Inter 的对象,里面必须有 length 属性
function fn<T extends Inter>(a: T): number {
  return a.length;
}


目录
相关文章
|
存储 JavaScript 前端开发
掌握这34个知识点,助你快速入门TS
TypeScript现在几乎已经是所有前端程序员必备的技能了,现在的各大框架已经全部采用TS进行开发。本篇文章总结了TS中常用的知识点,希望能对你有所帮助。
1581 0
|
JavaScript 前端开发 API
【第42期】一文了解服务端渲染框架NextJS
【第42期】一文了解服务端渲染框架NextJS
1407 0
|
2月前
|
人工智能 API 开发者
重磅炸场!阿里云百炼Coding Plan一口气上线四大顶流模型,开发者狂喜
阿里云百炼Coding Plan上线Qwen3.5、GLM-5、MiniMax M2.5、Kimi K2.5四大顶尖开源模型,支持Qwen Code等工具自由切换。Lite/Pro套餐首月仅7.9元/39.9元,大幅降低编码成本。(239字)
998 0
|
3月前
|
人工智能 前端开发 Go
前端开发必备的 VSCode 插件推荐(第一期)
本文推荐三款提升前端开发效率的VSCode插件:Live Server实现网页实时预览,Tencent Cloud AI Code Assistant提供智能补全与代码优化,WakaTime记录编程时长。助力开发者高效编码,欢迎交流分享使用心得。
535 0
前端开发必备的 VSCode 插件推荐(第一期)
|
4月前
|
人工智能 JSON 安全
大模型应用开发中MCP与Function Call的关系与区别
MCP与Function Call是大模型应用的两大关键技术。前者为跨模型工具调用的标准化协议,实现系统解耦与生态扩展;后者是模型调用外部功能的内置机制。二者互补协同,推动AI应用向高效、开放、安全演进。
|
5月前
|
机器学习/深度学习 人工智能 前端开发
终端里的 AI 编程助手:OpenCode 使用指南
OpenCode 是开源的终端 AI 编码助手,支持 Claude、GPT-4 等模型,可在命令行完成代码编写、Bug 修复、项目重构。提供原生终端界面和上下文感知能力,适合全栈开发者和终端用户使用。
49053 11
|
10月前
|
前端开发 JavaScript
CSS变量实战:动态主题切换技巧
CSS变量实战:动态主题切换技巧
440 81
|
JavaScript 前端开发 编译器
还不会ts?一文带你打开ts的大门
该文章详细介绍了TypeScript的基础知识,包括类型系统、类、接口、泛型等核心概念,并通过具体示例展示了如何使用TypeScript进行项目初始化和模块化开发,帮助读者快速掌握TypeScript的基本用法。
1302 133
还不会ts?一文带你打开ts的大门
|
JavaScript 前端开发 UED
PDF在线预览实现:如何使用vue-pdf-embed实现前端PDF在线阅读
本文详细介绍了如何在Vue项目中使用vue-pdf-embed实现PDF文件的在线展示。从项目初始化、插件集成到高级功能的实现和部署优化,希望对你有所帮助。在实际项目中,灵活运用这些技术可以大大提升用户体验和项目质量。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~