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


目录
相关文章
|
10月前
ts的内置工具
ts的内置工具
59 0
|
1月前
ts笔记
ts笔记
|
1月前
|
JavaScript
使用TS的一些基础知识
使用TS的一些基础知识
32 0
|
7月前
|
JavaScript 前端开发 开发者
ts知识点
ts知识点
39 0
|
9月前
|
JavaScript 安全 Python
TS笔记
TS笔记
46 0
|
8月前
|
JavaScript 前端开发 开发工具
CocosCreator 面试题(五)TS有什么优缺点?为什么要用TS?
CocosCreator 面试题(五)TS有什么优缺点?为什么要用TS?
115 0
|
9月前
|
JavaScript 索引
ts - 类 进阶2
ES7类的使用
|
9月前
|
JavaScript 前端开发 程序员
ts - 类 进阶1
ES6 类的使用
|
9月前
|
JavaScript 前端开发
ts - ts基础
https://www.tslang.cn/ TypeScript是Microsoft公司注册商标。 TypeScript具有类型系统,且是JavaScript的超集。 它可以编译成普通的JavaScript代码。 TypeScript支持任意浏览器,任意环境,任意系统并且是开源的。
|
10月前
|
JavaScript 前端开发
TS基础用法
TS基础用法
70 0