typescript变量声明入门 泛型 interface 可索引接口 type
- 最近面试了好多人，简历都写熟练使用TypeScript，可是聊下来发现声明复杂一点的变量只会any，简直就是来搞笑的！
- TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，TypeScript中为了使编写的代码更加规范，更加有利于维护，增加了类型校验。所谓的类型校验，就是创建变量时必须指定数据类型。
TypeScript 变量声明
前面主要照顾一些没什么基础的朋友，有一定基础的可以往下拉。
声明变量的关键字使用var、let、const来定义。但是，我们会发现使用var关键字会有一个警告，因为ts并不建议再使用var关键字了，主要原因和ES6升级后let和var的区别是一样的，var是没有块级作用域的，会引起很多的问题。
注意：声明量的时候numer、string、boolean等要用小写的，和大写的Number、String等有区别的。拿string举例，string是TypeScript中定义的字符串类型，而String是ECMAScript中定义的一个类 。
// String 类型
let str: string = 'abcd';
// Boolen 类型
let isBool: boolean = false;
// Number 类型
let num: number = 10;
// Array 类型常用的两种定义方式，后面还有一种
// number可以替换为需要的类型 string、boolean...
let arr1: number[] = [1, 2, 3, 4, 5];
let arr2: Array<number> = [1, 2, 3, 4, 5];
// Tuple元组 类型
// 元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。
let tl: [string, number] = ['hello', 10];
// Enums 类型（个人感觉主要用途是解决一些魔法数字等）
enum Animal {dog = 3, pig, cat};
// Any 类型
// any 是默认的类型，其类型的变量允许任何类型的值。
let a: any = 10;
// Void 类型
// JavaScript 没有空值 Void 的概念，在 TypeScirpt 中，可以用 void 表示没有任何返回值的函数。
function alertName(): void {
console.log('My name is changdong');
}
// Null 和 Undefined
// TypeScript里，undefined和null两者各自有自己的类型分别叫做undefined// 默认情况下null和undefined是所有类型的子类型。 就是说你可以把null和undefined赋值给number类型的变量。
// 然而，当你指定了--strictNullChecks标记，null和undefined只能赋值给void和它们各自。 这能避免很多常见的问题。
let u: undefined = undefined;
let n: null = null;
// Never 类型
// never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。没有遇到过什么实际使用场景，不做过多解释
let a: never;
// Object 类型
// object表示非原始类型，也就是除number，string，boolean，symbol，null或undefined之外的类型。
let obj: object = {
arr: [],
num: 0
}
// js中给对象添加属性不会报错，但是ts会报错，后面说怎么解决。
函数要接收不确定类型的参数
有没有遇到一个函数参数或者变量既要可以是字符串又要可以是数字的，又不能直接进行类型转换的情况，没关系any可以解决～
当然也有参数个数不确定的情况，可以自己了解一些可选参数和函数重载。
1: 联合类型（Union Types）
联合类型可以通过管道(|)将变量设置多种类型，赋值时可以根据设置的类型来赋值。
function two(arg: string|number) {
if(typeof arg == "string") {
console.log(arg)
} else {
arg++；
}
}
2.泛型（Generics）
使用泛型，你可以用一种编译器能理解的，并且合乎我们判断的方式，指定类、类型和接口的实例。
function identity<T>(arg: T): T {
console.log(arg);
return arg;
}
identity(1); // 1
identity("a"); // a
ts怎么声明使用对象
这个衔接上面使用对象属性报错的问题，用了typescript之后是不是发现不知道怎么使用对象了？没关系any可以解决～
1.接口（interface）
官方说法：接口是一系列抽象方法的声明，是一些方法特征的集合，是一种规范的定义，它定义了行为和动作的规范，在程序设计里面，接口起到一种限制和规范的作用。
这个东西是有点复杂而且很强大，有兴趣自己百度了解。在这篇文章就当做是给我们自定义一个数据类型类的，主要就是用来使用对象的，当然也可以是数组。
interface IPerson {
firstName:string,
lastName:string,
sayHi: ()=>string
}
var customer:IPerson = {
firstName:"Tom",
lastName:"Hanks",
sayHi: ():string =>{return "Hi there"}
}
// 少写一个、多个一个属性或值数据类型对不上都会报错，有时候对象有哪些属性也是不确定的，没办法全部定义好，要怎么搞哦，别急接着往下
// 属性数据类型不确定或属性要可选时
interface axiosContext<T> {
data: T;
message?: string｜number;
code?: number;
}
可索引接口
这个是接口的扩展，可索引接口可以实现对数组和对象的约束
//可索引接口 对数组的约束
interface UserArr {
[index:number]:string
}
var arr: UserArr = ['aaa', 'bbb'];
console.log(arr[0]);
//可索引接口 对对象的约束
interface UserObj {
[index:string]: string
}
var arr:UserObj = { name: '张三' };
// 这下终于可以想写多少个属性就写多少个属性了
同时介绍一下类类型接口
//类类型接口:对类的约束 和 抽象类抽象有点相似
interface Animal{
name:string;
eat(str:string):void;
}
class Dog implements Animal{
name:string;
constructor(name:string){
this.name=name;
}
eat(){
console.log(this.name+'吃粮食')
}
}
2.type
说到type，就得提一下和interface的区别，这里简单说一下。
相同点：
- 都可以描述一个对象或者函数
- 都允许拓展（extends），而且两种可以相互extends，只是写法不同
不同点： - type 可以声明基本类型别名，联合类型，元组等类型。
- type 语句中还可以使用 typeof 获取实例的 类型进行赋值。
- interface 能够声明合并而 type 不行
// interface extends type
type Name = {
name: string;
}
interface User extends Name {
age: number;
}
// type extends interface
interface Name {
name: string;
}
type User = Name & {
age: number;
}
// type声明基本类型别名
type Name = string
// type声明联合类型
interface Dog {
wong();
}
type Pet = Dog | Cat
// 当你想获取一个变量的类型时，使用 typeof
let div = document.createElement('div');
type B = typeof div
// interface 声明合并
interface User {
name: string
age: number
}
interface User {
sex: string
}
// 接口
type User = {
name: string
age: number
sex: string
}
一般来说，如果不清楚什么时候用interface/type，能用 interface 实现，就用 interface , 如果不能就用 type 。
怎么定义事件Event参数类型
开启ts严格模式后，any是不是又发挥大作用了，对函数参数类型的定义不知道的，any可以解决啊～
开发过程中肯定少不了对各种事件进行监听操作以及DOM节点操作，那么对于默认参数evant的类型要怎么定义啊，any到奔溃了～
// 键盘输入事件
private textChange(event: KeyboardEvent) {
event.preventDefault();
}
// 拖拽事件
private dragEnter(event: DragEvent) {
event.preventDefault();
};
// 粘贴事件
private pasteText(event: ClipboardEvent) {
event.preventDefault();
}
vue中怎么定义DOM相关的参数类型
vue中定义了ref之后，用this.$refs.xxx.xxx取某个属性的时候会报错，怎么解决
$refs: {
message_list: HTMLBaseElement;
};
// 加上上面这段就解决了
console.log(this.$refs.message_list.scrollHeight;)
那么事件和DOM节点相关的到底是怎么定义，我怎么知道上面的那几个东西从哪里来的，不拐弯了。
作为一个合格的前端还是不能少了MDN的，MDN上面有一个web api列表，从其中查找即可。
链接：MDN Web Api查询
好了，这篇文章就到这吧，觉得对你又帮助就点个赞吧～