这是我参与[第四届青训营]笔记创作活动的第四天，今天我学习并总结了一些关于ts方面的知识点，主要内容包括ts的概念，数据类型。

1.typescript与Javascript

js是动态类型弱类型语言，而ts是静态类型弱类型语言。

强类型语言：不允许改变变量的数据类型，除非进行强制类型转换。

弱类型语言：变量可以被赋予不同的值。

静态类型语言：在编译阶段确定所有变量的类型。

动态类型语言：在执行阶段确定所有变量的类型。

2.为什么用TypeScript

静态类型，基于语法解析TSDoc，ide增强使可读性增强。在编译阶段即可暴露出大部分错误，致使可维护性增强。因此使得ts在多人合作的大型项目中可以获得更好的稳定性和开发效率。

js的超集，简单来说，就是js的代码都可以在ts里面运行，因此也可以把ts理解为type+js。

3.安装ts

npm i -g typescript

安装之后，在cmd中输入tsc -v ，如果出现了版本号，代表安装成功。

4.ts的数据类型

ts的数据类型有两种，一种是js原有的数据类型，一种是新增的数据类型

原有数据类型

原始类型：number/string/bollean/null/undefined/symbol

对象类型：object（数组、对象、函数等）

js写法:

let a = 'hhh'
let b = 666
let c = true
let d = null
let e = undefined
let f = {name:'maobuhui'}
let g = 100
let h = Symbol()

ts写法:

let a:string = 'hhh'
let b:number = 666
let c:boolean = true
let d:null = null
let e:undefined = undefined
let f:object = {name:'maobuhui'}
let g:bigint = 100n
let h:symbol = Symbol()

新增类型

联合类型
自定义类型(类型别名)
接口
元组
字面量类型
枚举
void
any
等等

对象类型

const bytedancer: IBytedancer = {
    jobId:9303245,
    name: 'lin',
    sex: 'man',
    age: 28,
    hobby: 'swimming'
}
interface IByteDancer{
    /*只读属性：约束属性不可在对象初始化外赋值*/
    readonly jobId:number;
    name:string;
    sex:'man'|'woman'|'other';
    age:number;
    /*可选属性：定义该属性可以不存在*/
    hobby?:string;
    /*任意属性：约束所有对象属性必须是该属性的子类型*/
    [key:string]:any;
}

函数类型

function add(x:number,y:number):number{
    return x+y;
}
const mult:(x:number,y:number) => number = (x,y) => x*y;

函数重载

/*对getDate函数进行重载，timestamp为可缺省参数*/
function getDate(type:'string', timestamp?: string) :string;
function getDate (type:'date' ,timestamp?: string): Date;
function getDate(type: 'string' | 'date', timestamp?: string): Date | string {
const date = new Date(timestamp); 
return type === 'string' ? date.toLocaleString() : date;
}
const X = getDate( 'date'); // x: Date
const y = getDate('string', '2018-01-10'); // y: string

interface IGetDate {
(type :'string', timestamp?: string): string;
(type :'date' , timestamp?: string): Date ;
(type : 'string' | 'date',timestamp?: string): Date | string; 
}
/*不能将类型“(type:any, timestamp: any) => string | Date" 分配给类型"IGetDate"。
不能将类型"string | Date" 分配给类型"string"。
不能将类型"Date"分配给类型"string"。ts (2322) */
const getDate2: IGetDate = (type, timestamp) => {
const date = new Date( timestamp ) ;
return type === 'string' ? date. toLocaleString() : date;
}

数组类型

/*
「类型+方括号」表示*/
type IArr1 = number[];
/*泛型表示 */
type IArr2 = Array<string|number| Record<string, number>>;
/*元祖表示*/
type IArr3 = [number, number, string, string] ;
/*接口表示*/
interface IArr4 {
[key: number]: any;
}
const arr1: IArr1 = [1 , 2, 3, 4, 5, 6];
const arr2: IArr2 = [1 , 2, '3', '4',{a:1}];
const arr3: IArr3 = [1, 2, '3', '4'];
const arr4: IArr4 = ['string', () => null, {}, []];

ts补充类型

/*空类型，表示无赋值*/
type IEmptyFunction = () => void;
/*任意类型，是所有类型的子类型*/ 
type IAnyType = any ;
/*枚举类型:支持枚举值到枚举名的正、反向映射*/
enum EnumExample {
    add = '+',
    mult = '*'
}
EnumExample['add'] === '+';
EnumExample['+'] === 'add' ;
enum ECorlor { Mon, Tue, Wed, Thu, Fri, Sat, Sun };
ECorlor['Mon'] === 0;
ECorlor[0] === 'Mon' ;
/*泛型*/
type INumArr = Array<number>;

ts学习笔记 | 青训营笔记