TyepScript语法简介【TS介绍一】

最新推荐文章于 2022-11-03 22:52:32 发布

牛小小小婷～

最新推荐文章于 2022-11-03 22:52:32 发布

阅读量89

点赞数 2

分类专栏： # JavaScript 文章标签： 1024程序员节

本文链接：https://blog.csdn.net/hannah2233/article/details/127494308

版权

JavaScript 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

TypeScript开发环境搭建

npm i -g typescript
tsc 01.ts

文章目录

1-1 ts类型声明一

export {};
// 声明一个变量a，同时指定它的类型为number
let aa: number;

// a的类型设置为了number，在以后的使用过程中a的值只能是数字
aa = 10;
aa = 33;
// a = 'hello';  // 报错，变量a的类型是number，不能赋值字符串

// 声明完变量直接进行赋值
// 如果变量的声明和赋值是同时进行的，TS可以自动对变量进行类型检测
let cc: boolean = false;
// let c = false;

cc = true;

// 类型声明也可以加在参数上
function sum(aaaa: number, bbbb: number): number {
  return aaaa + bbbb;
}
sum(123, 456);

1-2 ts类型声明二

export {};
// 直接使用字面量进行类型声明
let a: 10;
a = 10;

// 可以使用 | 来连接多个类型（）联合类型
let b: "male" | "female";
b = "male";
b = "female";

let c: boolean | string;
c = true;
c = "hello";

// any 表示的是任意类型，一个变量设置类型为any相当于对该变量关闭TS的类型检测
// 使用TS时，不建议使用any类型
let d: any;
d = 10;
d = "hello";
d = true;

//声明变量如果不指定类型，则TS解析器会自动判断变量的类型为any （隐式的any）
let f;
f = 10;
f = "hello";
f = true;

//unknow 表示未知类型的值
// 、、 unknow实际上就是一个类型安全的any
// unknown 类型的变量，不能直接赋值给其他变量
let e: unknown;
e = 10;
e = "hello";
e = true;
// if(typeof e === "string"){
//   s = e;
// }

let s: string;
s = d; // any类型不报错，还会活活别人

// e  = 'hello'
// s = e;    // 未知类型赋值给string，会报错

// 类型断言，可以用来告诉解析器变量的实际类型

// 语法
//   变量 as 类型
//   <类型>变量
s = e as string;
s = <string>e;
function fn(num): boolean | string {
  if (num > 0) {
    return "999";
  }
  return true;
}
// void用来表示空，以函数为例，就表示没有返回值的函数
function fn1(): void {}

// never 表示永远不会返回结果
function fn2(): never {
  throw new Error("报错了");
}

1-3 ts类型声明三

export {};

// object表示一个js对象
let aaa: object;
aaa = {};
aaa = function () {};

// {} 用来指定对象中可以包含哪些属性
// 语法：{属性名：属性值，属性名：属性值}
let bbb: { name: string; age?: number };
bbb = { name: "孙悟空", age: 18 };
bbb = { name: "孙悟空" };

let ccc: { name: string; [propName: string]: any; a?: number; b?: number };
ccc = { name: "猪八戒", age: 18, gender: "男" };

// ----------------设置函数结构的类型声明--------------------
// 语法：（形参：类型，形参：类型...）=>返回值
let ddd: (a: number, b: number) => number;
ddd = function (n1: number, n2: number): number {
  return n1 + n2;
};

// --------------------数组的类型声明：------------------------
//   类型[]
//   Array<类型>
// string[] 表示字符串数组
let eee: string[];
eee = ["a", "b", "c"];

// number[]表示数值
let fff: number[];

let g: Array<number>;
g = [1, 2, 3];

// 元组： 固定长度的数组
// 语法： [类型，类型，类型]
let h: [string, string];
h = ["hello", "abc"];

// enum 枚举
enum Gender {
  Male = 0,
  Female = 1,
}

let i: { name: string; gender: number };
i = {
  name: "孙悟空",
  gender: Gender.Male,
};

console.log(i.gender === 1);

// &表示同时
let j: { name: string } & { age: number };
j = { name: "孙悟空", age: 19 };

// 类型的别名
type myType = string;
let k: 1 | 2 | 3 | 4 | 5;
let l: 1 | 2 | 3 | 4 | 5;