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;
}


目录
相关文章
|
7月前
|
JavaScript 前端开发 API
第9期 一文读懂TS的(.d.ts)文件
第9期 一文读懂TS的(.d.ts)文件
148 0
|
JavaScript 前端开发 API
一文读懂TS的(.d.ts)文件
一文读懂TS的(.d.ts)文件
4040 0
|
3月前
|
JavaScript 前端开发 程序员
ts学习(1)
ts学习(1)
136 69
|
JavaScript 前端开发
TS基础语法
TypeScript(缩写为TS)是一种静态类型的JavaScript超集,它为JavaScript添加了类型注解和其他扩展功能。下面是TypeScript的基础语法
ts的内置工具
ts的内置工具
107 0
|
7月前
ts笔记
ts笔记
|
7月前
|
JavaScript
使用TS的一些基础知识
使用TS的一些基础知识
87 0
|
7月前
|
JavaScript 前端开发 编译器
ts面试题总结
ts面试题总结
129 0
|
JavaScript 前端开发 开发者
ts知识点
ts知识点
60 0
|
JavaScript 安全 Python
TS笔记
TS笔记
68 0