Ts 入门

 

目录

1.什么是TypeScript？

2.Ts的优点及缺点

优点

缺点

3.interface 接口

---

1.什么是TypeScript？

         ts是由微软公司开发的一种编程语言，可以运行在任何浏览器还有操作系统，它是JavaScript的超集，所有js代码都可以在ts中运行，和js都是弱类型语言。

2.Ts的优点及缺点

优点：

        可以自动转换成为js

        会在编译时报错，不会直接显示在用户界面

        相较于js，ts的兼容性更强，可以在任何的浏览器运行

缺点：

        对于编码人员的代码编写规范要求较高，不易上手

        工作量较大，无法与库完美结合

        需要理解接口和类型的概念

简单来说，其实ts跟js语法是一样的，只不过ts比js多了几步程序而已，话不多说，全是干货，有点晦涩，咱们直接上操作

 全局安装ts

npm i  -g  typescript
//或者
yarn  global add  typescript 

 ts类型注解实际就是给变量添加一个约束，可以实时显示标记出代码中的语法或者类型错误

//  变量：类型    value    
let str:string = 'hello world';

// 数值类型
let age: number = 18

// 字符串类型
let myName: string = '老莫'

// 布尔类型
let isLoading: boolean = false

// undefined
let un: undefined = undefined

// null
let timer:null = null

// symbol
let uniKey:symbol = Symbol() 


错误示范
//  变量：类型  value 
let num:string = 1;    //不能将类型“number”分配给类型“string” 类型与值不匹配会报错

相信你已经有了最基本的理解，也可以定义一些简单类型的约束了，除了这些简单类型，还有object复杂类型（对象，数组，函数等）还有ts新增：

1. 联合类型
2. 自定义类型(类型别名)
3. 接口
4. 元组
5. 字面量类型
6. 枚举
7. void
8. any  等等……

这期，我们不说ts新增类型，先说复杂类型，定义复杂类型就要用到我们的接口（interface），我们一起来看！

3.interface 接口

        接口是一种规范的定义，它定义了行为和动作的规范，接口起到一种限制和规范的作用，他是抽象的，不会直接具体定义你的值，而是用来限制你的值的类型，直接上代码！

        1）属性类接口

interface people {
	name: string;
	old: number;
};
//我们定义了一个叫people的接口
//使用接口
/*
   变量名禁止与接口重名
   对象中属性数量必须和接口数量保持一致，多一个少一个都会报错
*/
let one:people = {
    name:'高启强',
    old:36,
};

        2）函数类接口

interface encrypt {
	(key: string, value: string): string; // 参数必须是 key value，返回值必须是string
}

let func: encrypt = (key: string, value: string):string => {
	return key + value;
};
console.log(func('战斗力', '几乎为零'));//战斗力几乎为零
console.log(func('战斗力', 132));//类型“number”的参数不能赋给类型“string”的参数

        3）可索引接口

interface UserArr{
    [index:number]:string; // 数组的 index 是 number, 值是string
}
var arr:UserArr = ['aaa', 'bbb'];
console.log(arr[0]);//aaa

---------------------------------------------

interface UserObj {
    [index:string]:string;
}
var obj:UserObj = {name: '张三'}
console.log(obj);//{name: '张三'}

        4）类类型接口：对类的约束，和抽象类有点类似

interface Action {
	name: string;
	eat(str: string): string;
	say(num: number): number;
}

let name1 = '';
class Dog implements Action {
	name!: string;//断言
    /*
      一个类必须有constructor()方法，如果创建类的时候，没有显示的定义该方法，
      一个空的constructor()方法会被默认添加。
    */
	constructor(name: string) {
		name1 = name;
	}
	eat(str: string) {
        return name1 + str
	}
    say(num:number){
        return num
    }
}

var name: string = '安欣';
var dog = new Dog(name);
console.log(dog.eat('想吃面'));//安欣想吃面
console.log(dog.say(2));//2
console.log(dog.name);//安欣

 不能一口吃成胖子，知识是一点一点积累的，贪多嚼不烂，咱们下期再见！

 最后祝大家都可以早点下班，别太卷，头发永远在头上！！