Typescript - ①
编辑
91
2024-08-16
Typescript简介
> TypeScript是JavaScript的超集。
> 它对JS进行了扩展,向JS中引入了类型的概念,并添加了许多新的特性。
> TS代码需要通过编译器编译为JS,然后再交由JS解析器执行。
> TS完全兼容JS,换言之,任何的JS代码都可以直接当成JS使用。
> 相较于JS而言,TS拥有了静态类型,更加严格的语法,更强大的功能;TS可以在代码执行前就完成代码的检查,减小了运行时异常的出现的几率;TS代码可以编译为任意版本的JS代码,可有效解决不同JS运行环境的兼容问题;同样的功能,TS的代码量要大于JS,但由于TS的代码结构更加清晰,变量类型更加明确,在后期代码的维护中TS却远远胜于JS。
安装与部署
安装Node.js
https://nodejs.org/
校验Node.js
node -v
校验npm
npm -v
安装Typescript
npm i -g typescript
mac用户
sudo npm install -g typescript
验证版本
tsc --version
编译Tapescript
创建一个ts文件
const person = { name:'halo', age:18 } console.log('我叫${person.name},今年${person.age}岁')
命令行编译
tsc xxx.ts
自动化编译
tsc --init
监听全目录
tsc --watch
修改配置
"target": "ES5", "noEmitOnError": true,
基本类型
类型声明
let 变量: 类型; let 变量: 类型 = 值; function fn(参数: 类型, 参数: 类型): 类型{ ... }
// 声明一个变量a,同时指定它的类型为number let a: number; // a 的类型设置为了number,在以后的使用过程中a的值只能是数字 a = 10; a = 33; // a = 'hello'; // 此行代码会报错,因为变量a的类型是number,不能赋值字符串 let b: string; b = 'hello'; // b = 123; // 声明完变量直接进行赋值 // let c: boolean = false; // 如果变量的声明和赋值是同时进行的,TS可以自动对变量进行类型检测 let c = false; c = true; // JS中的函数是不考虑参数的类型和个数的 // function sum(a, b){ // return a + b; // } // console.log(sum(123, 456)); // 579 // console.log(sum(123, "456")); // "123456" function sum(a: number, b: number): number{ return a + b; } let result = sum(123, 456);
类型总览
// 也可以直接使用字面量进行类型声明 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; // 声明变量如果不指定类型,则TS解析器会自动判断变量的类型为any (隐式的any) let d; d = 10; d = 'hello'; d = true; // unknown 表示未知类型的值 let e: unknown; e = 10; e = "hello"; e = true; let s:string; // d的类型是any,它可以赋值给任意变量 // s = d; e = 'hello'; // unknown 实际上就是一个类型安全的any // unknown类型的变量,不能直接赋值给其他变量 if(typeof e === "string"){ s = e; } // 类型断言,可以用来告诉解析器变量的实际类型 /* * 语法: * 变量 as 类型 * <类型>变量 */ s = e as string; s = <string>e; // void 用来表示空,以函数为例,就表示没有返回值的函数 function fn(): void{ } // never 表示永远不会返回结果 function fn2(): never{ throw new Error('报错了!'); } // object表示一个js对象 let a: object; a = {}; a = function () { }; // {} 用来指定对象中可以包含哪些属性 // 语法:{属性名:属性值,属性名:属性值} // 在属性名后边加上?,表示属性是可选的 let b: {name: string, age?: number}; b = {name: '孙悟空', age: 18}; // [propName: string]: any 表示任意类型的属性 let c: {name: string, [propName: string]: any}; c = {name: '猪八戒', age: 18, gender: '男'}; /* * 设置函数结构的类型声明: * 语法:(形参:类型, 形参:类型 ...) => 返回值 */ let d: (a: number ,b: number)=>number; // d = function (n1: string, n2: string): number{ // return 10; // } /* * 数组的类型声明: * 类型[] * Array<类型> */ // string[] 表示字符串数组 let e: string[]; e = ['a', 'b', 'c']; // number[] 表示数值数值 let f: number[]; let g: Array<number>; g = [1, 2, 3]; /* * 元组,元组就是固定长度的数组 * 语法:[类型, 类型, 类型] * */ let h: [string, number]; h = ['hello', 123]; /* * enum 枚举 * * */ enum Gender{ Male, Female } let i: {name: string, gender: Gender}; i = { name: '孙悟空', gender: Gender.Male // 'male' } // console.log(i.gender === Gender.Male); // &表示同时 let j: { name: string } & { age: number }; // j = {name: '孙悟空', age: 18}; // 类型的别名 type myType = 1 | 2 | 3 | 4 | 5; let k: myType; let l: myType; let m: myType; k = 2;
类型总结
number
let decimal: number = 6; let hex: number = 0xf00d; let binary: number = 0b1010; let octal: number = 0o744; let big: bigint = 100n;
boolean
let isDone: boolean = false;
string
let color: string = "blue"; color = 'red'; let fullName: string = `Bob Bobbington`; let age: number = 37; let sentence: string = `Hello, my name is ${fullName}. I'll be ${age + 1} years old next month.`;
字面量
//也可以使用字面量去指定变量的类型,通过字面量可以确定变量的取值范围 let color: 'red' | 'blue' | 'black'; let num: 1 | 2 | 3 | 4 | 5;
any
let d: any = 4; d = 'hello'; d = true;
unknown
let notSure: unknown = 4; notSure = 'hello';
void
let unusable: void = undefined;
never
function error(message: string): never { throw new Error(message); }
object(没啥用)
let obj: object = {};
array
let list: number[] = [1, 2, 3]; let list: Array<number> = [1, 2, 3];
tuple
let x: [string, number]; x = ["hello", 10];
enum
enum Color { Red, Green, Blue, } let c: Color = Color.Green; enum Color { Red = 1, Green, Blue, } let c: Color = Color.Green; enum Color { Red = 1, Green = 2, Blue = 4, } let c: Color = Color.Green;
类型断言
有些情况下,变量的类型对于我们来说是很明确,但是TS编译器却并不清楚,此时,可以通过类型断言来告诉编译器变量的类型,断言有两种形式:
//第一种 let someValue: unknown = "this is a string"; let strLength: number = (someValue as string).length; //第二种 let someValue: unknown = "this is a string"; let strLength: number = (<string>someValue).length;
- 3
-
分享