TS使用
站长
· 阅读数 28
TS学习使用
一、ts环境搭建
1.ts简介
typescript 是 javascript 的一个超集，在js的基础上，添加了变量类型的限制
2.环境
1.安装node：https://nodejs.org/dist/v16.1... 2.使用包管理器安装ts编译器typescript
npm install -g typescript编译运行：
// tsc =====> typescript compiler
// 编译 将指定ts编译编译成.js，tsc hell.ts -w可完成文件修改后的自动重新编译
tsc hello.ts
// 运行编译后的.js
node hello.js3.可使用ts-node，一次性完成ts的编译与运行
// 安装ts-node
npm install -g ts-node
// 运行ts
ts-node hello.ts4.使用webpack搭建hmr环境，实时的看到ts编译运行效果。
二、ts的基本类型
1.类型声明的基本使用方式：
let a: number;
let b: string = "hello";
function fn(x:number, y:string):void{
console.log(x, y);
}
let sym:symbol = Symbol("symbol");2.常用类型
number、string、boolean类型：
let a:string;
let b:boolean;
function fu():number{
return 1;
}
let nu:null = null;
let und:undefined = undefined;字面量类型：
// 直接使用字面量进行类型声明，使用时相当于常量
// 可以使用 | 来连接多个类型
let sex: "male" | "female";
sex = 'male';
// 字面量推断
type MethodType = "get" | "post" | "put" | "delete" | "patch";
let get: string = "get";
function request(method: MethodType): void {}
request(get as MethodType);any类型：
//任意类型，等同于没有类型限制了
let d: any; // 显示any类型
let m; // 隐式any类型unknown类型：
let s: string;
// unknown 实际上就是类型安全的any
// unknown 类型的变量，不能直接赋值给其它类型的变量
let e: unknown = "hello";
// 将unknown赋值给其它类型
// 方法一：类型判断
if(typeof e === "string"){
s = e;
}
// 方法二：类型断言
// s = (<string>e);
s = e as string;void与never:
// void 返回值为空值
function fn():void{
return undefined||null;
}
// never 不会有返回值，常用于用来报错的函数
function fn2():never{
throw new Error('error');
}object类型：
// 对象声明一：
let a: object; // 可以是任何类型的对象，一般不适用
// 对象声明二：
let b: { //对象类型声明，包含属性限制
name: string,
age? : number // ? 表示改属性可选
};
b = {
name: 'jiangjiangwa',
age: 18
}
// 对象声明三：
let c:{
name: string,
// 任意的字符串属性名，任意类型的any属性值
[x: string]: any
}函数结构类型声明：
// (形参:类型，形参:类型)=>返回值类型
let f :(arg1:number,arg2:number)=>number
f = function(n1,n2):number{
return n1+n2;
}array类型：
// 表示数字数组
let a:number[];
let b:Array<number>;
const names: string[] = ["John", "Jane", "Mary"];
names.forEach((item)=>{ // 这里的item可以不添加类型注解
console.log(item);
})tuple固定长度的数组：
let h:[number,string];
h = [123, "world"];
// 使用示列
function useState<T>(state: T) {
let currentState = state;
const changeState = (newState: T) => {
currentState = newState;
};
const tuple: [T, (newState: T) => void] = [currentState, changeState];
return tuple;
}
const [counter,setCounter] = useState(0);enum枚举类型：
enum Gender {
Male,
Female,
}
console.log(Gender)
let i: { name: string; gender: Gender };
i = {
name: "孙悟空",
gender: Gender.Male, // 'male'
};联合类型：
let a:number|string;
a = 1;
let b : {name:string}&{age:number};
b = {
name:'jiangjiangwa',
age:18
}
type IdType = string | number;
function printId(id: IdType) {
// 内部需要对联合类型做操作时，需要使用typeof 先做类型判断
// narrow type (缩小范围)
if(typeof id === 'string') {
console.log(id.toUpperCase());
}else{
console.log(id);
}
}
printId('abs');交叉类型
type MyType = number & string; // 等同于 never 类型
interface Colorful {
color: string;
}
interface IRun {
running: () => void;
}
type NewType = Colorful & IRun;
const obj: NewType = {
color: "red",
running() {},
};
类型的别名
type myType = string | number;
let k:myType = 'hello';类型断言
const imgEle = document.getElementById("img_show") as HTMLImageElement;
imgEle.src = './img/1.jpg';
class Person{};
class Student extends Person{
studying(){
console.log('studying');
}
}
function sayHello(person: Person){
(person as Student).studying();
}
sayHello(new Student());非空断言
function printMessage(message?:string){
console.log(message!.length)
}可选链是ES11（ES2020）中增加的特性，它的作用是当对象的属性不存在时，会短路，直接返回undefined，如果存在，那么才会继续执行
function printMessage(message?:string){
console.log(message?.length)
}
// 编译得到的js
function printMessage(message) {
console.log(message === null || message === void 0 ? void 0 : message.length);
}??操作符空值合并操作符（??）是一个逻辑操作符，当操作符的左侧是 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数，与||使用的区别，??值判断null、undefined，而||会判断所有假值，包含0、""、false、null、undefined
let message: string |null = "Hello World";
const content = message ?? '你好哇，李银河';
// const content = message || '你好哇，李银河';
console.log(content);三、ts编译选项
初始化ts编译配置文件tsconfig.json
tsc --init
使用tsconfig.json后，可批量编译整个项目的所有ts文件
// tsc 直接编译所有ts文件
// tsc -w 编译所有ts文件并监视所有ts文件tsconfig.json配置参数说明：
{
/*
tsconfig.json 是ts编译器的配置文件，ts编译器会读取该文件，并且根据该文件的配置来编译ts文件。
"include": 用来指定那些ts文件需要被编译
路径：** 递归匹配任意子目录
* 表示任意文件
? 匹配一个任意字符（不包括目录分隔符
*/
"include": ["./src/**/*.ts", "./src/**/*.js", "./main.ts"],
// "exclude": ["./node_modules"], //有默认值
"compilerOptions": {
//target 用来指定ts被编译为的ES的版本
"target": "ESNext", //ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext
"module": "es2015", //指定编译为模块化规范
//lib 用来指定哪些库是需要被包含在编译后的js中 可以指定多个
// "lib": ["dom","es6"] // 默认不变
"outDir": "./dist", //指定编译后的js文件输出目录
// 设置outFile后，所有全局作用域中的代码，回合并到统一的js文件中，一般使用打包工具完成
// "outFile": "./dist/bindle.js",
// 是否对js文件进行编译，默认是false
"allowJs": true,
// 是否检查js代码的语法，默认是false,需要在tsconfig.json中设置"allowJs": true
"checkJs": true,
"removeComments": false, //是否移除注释，默认是false
// 不生成编译后的js文件，默认是false.但只需要对ts进行语法检查时，使用
"noEmit": false,
// 所有严格检查的总开关
"strict":true,
// 发生错误时，不生成编译文件,默认是false
"noEmitOnError": true,
"alwaysStrict": true, //是否开启严格模式，默认是false，当使用了模块化语法时，默认开启了严格模式
// 不允许使用隐式any类型，默认是false
"noImplicitAny": true,
// 不允许不明确类型的this
"noImplicitThis": true,
"strictNullChecks": false, //是否开启严格空值检查，默认是false
}
}
四、面向对象
1.类的使用
// 使用class关键字定义一个类
/*
对类的属性（实例属性、静态属性）和方法进行描述
在对类的静态方法或实列属性进行赋值时，需要被限制
*/
class Person {
// 静态属性
static readonly county: string = "中国";
// 实例属性
name: string = "default";
age = 18;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
// 实列方法
// say: (a: number, b: number) => void = function (a, b) {
// console.log(a + b);
// };
say(a: number, b: number): number {
return a + b;
}
}
const person = new Person("John", 30);类做类型：
class Person {
name:string = '123'
eating(){}
}
// 需要跟类的实例，具有相同的结构与类型
const p1:Person = {
name:'jiang',
eating(){}
}
function printPerson(p:Person){
console.log(p.name);
}
printPerson({
name:'jiang',
eating(){}
})extends使用：开放封闭原则（OCP，Open Closed Principle），修改是封闭的， 对扩展开放。
class Animal {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
say() {
console.log("I am a animal");
}
}
class Dog extends Animal {
constructor(name: string, age: number) {
super(name, age);
}
}
class Cat extends Animal {
say(): void {
console.log('miao miao miao')
}
// 没有重写contructor方法，创建的实例会调用父类的构造函数
}
Cat.prototype.__proto__ = Animal.prototype抽象类abstract:
(function () {
// 不能用来创建实列，专门用来继承的类
// 可以添加抽象方法
abstract class Animal {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
// 抽象方法，只能定义在抽象类中，子类必须实现该方法
abstract say(): void;
}
class Dog extends Animal {
constructor(name: string, age: number) {
super(name, age);
}
say(): void {
console.log('wang wang wang')
}
}
class Cat extends Animal {
say(): void {
console.log("miao miao miao");
}
// 没有重写contructor方法，创建的实例会调用父类的构造函数
}
})();接口interface
const obj: myInterface = {
name: "John",
age: 30,
gender?: "男",
say() {
console.log("jiang");
},
};
console.log(obj);
// 结构用来定义类的结构,也可当作类型声明使用
// 可重复声明（拓展原有接口功能），类型限制叠加,接口中，所有方法，都是抽象方法
// 实现接口，就是满足接口的要求
interface myInterface {
name: string;
age: number;
}
interface myInterface {
gender: string;
say(): void;
}
class Person implements myInterface {
name: string;
age: number;
gender: string;
constructor(name: string, age: number, gender: string) {
this.name = name;
this.age = age;
this.gender = gender;
}
say(): void {
throw new Error("Method not implemented.");
}
}
console.log(new Person('jiang',18,'男'));
// 接口使用练习
interface FrontLanguage {
[key: number]: string;
}
const frontLanguage: FrontLanguage = {
1: "HTML",
2: "CSS",
3: "JavaScript" };
interface LengthInterface {
'length': number;
}
const obj: LengthInterface = { length: 10 };
//接口定义函数类型
interface CalcFunc {
(num1:number,num2:number):number;
}
const add:CalcFunc = (num1,num2) =>{
return num1 + num2;
}
接口的继承
interface Person {
name: string;
eating: () => void;
}
interface Animal {
runing: () => void;
}
interface Student extends Person, Animal {
sno: number;
}
字面量赋值freshness擦除操作：
interface IPerson {
name: string;
eating: () => void;
}
const obj = {
name: "John",
eating: () => {},
age: 18,
};
// 直接将字面量赋值给变量 会报错
// p: IPerson = {
// name: "John",
// eating: () => {},
// age: 18,
// }
const p: IPerson = obj;
console.log(p);属性封装：
(function () {
class Person {
private _name: string;
get name(): string {
return this._name;
}
set name(value: string) {
if (this.name.startsWith("张")) {
this._name = value;
} else {
this._name = "张" + value;
}
}
age: number;
constructor(name: string, age: number) {
this._name = name;
this.age = age;
}
}
let p = new Person("John", 30);
console.log(p);
p.name = "Tom";
p.age = 10;
console.log(p);
})();class+属性封装的简写：
class Dog {
constructor(public name: string, private age: number) {}
// 等同于
// public name: string;
// private age: number;
// constructor(name: string, age: number) {
// this.name = name;
// this.age = age;
// }
}泛型：方式一：通过 <类型> 的方式将类型传递给函数； 方式二：通过类型推到，自动推到出我们传入变量的类型：
function foo<T>(arg:T):T { // 这里时，会将arg类型推导出来，赋值给T
return arg;
}
foo<string>('123');
foo(123);
/*
在定义函数或是类是，如果遇到类型不明确就可以使用泛型
定义了一个表示类型的变量
*/
interface Inter {
length: number;
}
/*
泛型限制，需要符合接口类型限制
T extends Inter 表示泛型T必须是Inter实现类（子类）
*/
function fn2<T extends Inter>(a: T): number {
return a.length;
}
fn2("1");
// 泛型接口
interface IFoo<T> {
initValue: T;
valueList: T[];
getValue(): T;
}
class Foo implements IFoo<number> {
initValue: number = 0;
valueList: number[] = [1, 3, 4, 5];
getValue(): number {
return this.initValue;
}
}
// 泛型类
class Point<T> {
x: T;
y: T;
constructor(x: T, y: T) {
this.x = x;
this.y = y;
}
}
let point: Point<number> = new Point<number>(1, 2);
常用泛型名称：T:Type的缩写，类型K、V：key和value的缩写，键值对E:Elment的缩写，元素O:Object的缩写，对象
五、模块化
命名空间在TypeScript早期时，称之为内部模块，主要目的是将一个模块内部再进行作用域的划分，防止一些命名冲突的问题。
export namespace time { // 这里时模块的导出 在别的模块使用
export function format(time: string) { // 这里是命令空间的导出，模块内使用
return "3033-01-01T" + time + ":00.000Z";
}
function foo(){
}
}
export namespace price {
export function format(price: number) {
return price.toFixed(2);
}
}
time.format('2-2')
// time.foo() // error: foo is not exported，没有在明明空间导出的，只能在命名空间内部使用六、类型声明
另外的一种typescript文件：.d.ts文件p 我们之前编写的typescript文件都是 .ts 文件，这些文件最终会输出 .js 文件，也是我们通常编写代码的地方；p 还有另外一种文件 .d.ts 文件，它是用来做类型的声明(declare)。 它仅仅用来做类型检测，告知typescript我们有哪些类型；
1.内置类型声明
内置类型声明是typescript自带的、帮助我们内置了JavaScript运行时的一些标准化API的声明文件；p包括比如Math、Date等内置类型，也包括DOM API，比如Window、Document等；typescript/lib/*.d.ts文件
2.外部定义类型声明
使用一些库（比如第三方库）时，需要的一些类型声明。这些库通常有两种类型声明方式:a.自己库中进行类型声明（编写.d.ts文件），比如axios下index.d.ts文件b方式二：通过社区的一个公有库DefinitelyTyped存放类型声明文件 p该库的GitHub地址：https://github.com/Definitely...该库查找声明安装方式的地址：https://www.typescriptlang.or... 比如我们安装react的类型声明： npm i @types/react --save-dev
3.自定义类型声明
自定义lodash库的声明
// index.ts 中
import _ from 'lodash';
console.log(_.join(['99, 2,','fjk']));
types-> _lodash.d.ts文件中
declare module 'lodash' {
export function join(arr:any[])
}
// 声明其它类型
// 声明函数、类、接口、类型、对象、变量等
declare function add(a:number,b:number):number;
declare class Person {
name:string;
age:number;
constructor(name:string,age:number);
}
declare interface IPerson {
name:string;
age:number;
}
declare let p:IPerson;
// 声明文件
declare module '*.jpg'
declare module '*.png'
declare module '*.vue' {}
// 声明命名空间，当直接使用cdn的方式导入时，可以使用
declare namespace ${
export function ajax(url:string,options:any):Promise<any>
}
转载自:https://segmentfault.com/a/1190000041847095