这是我参与「第四届青训营」笔记创作活动的第3天

TypeScript

什么是TypeScript

TypeScript是javaScript的超集（JS有的TS都有）

TypeScript = Type + JavaScript（在JS基础之上，为JS添加了类型支持）

JS 与 TS的区别

JS 动态(执行)类型弱类型语言 TS 静态(编译)类型弱类型语言

静态类型：编译期做类型检查

可读性增强
可维护性增强
在大型项目中，获得更好的稳定性和开发效率动态类型：执行期做类型检查

安装TS

TypeScript的命令行工具安装方法如下：

npm install -g typescript

以上命令会在全局安装tsc命令，安装完成后对ts文件编译

例如：tsc hello

还可以使用vscode编辑器来编译运行ts文件

TS基本语法

基础数据类型

/字符串/
const q: string = 'string';
/数字/
const w: number = 1;
/布尔值/
const e: boolean = true;
/null/
const r: null = null;
/undefined/
const t: undefined = undefined;

对象类型

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, y){
return x + y;
}
const mult =(x,y)=>x*y ;

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

数组类型

/*「类型+方括号」表示*/type IArr1 = number[];/*泛型表示*/
type IArr2 = Array<string | number | Record<string,number>>;/*元祖表示*/
type IArr3 = [number, number, string,stringl ;/*接口表示*/
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,，[]];

工程应用

Web
- webpack
  - webpack.loader的相关配置
  - 配置tsconfig.ts文件
  - 运行webpack启动/打包
  - loader处理ts文件时，会进行编译与类型检查
Node
- TSC编译
  - 安装node与npm
  - 配置tsconfig.js文件
  - 使用npm安装tsc
  - 使用tsc运行编译得到js文件

总结

本文主要介绍了ts的基本概念与安装，以及ts的基本语法和工程应用

Typescript 入门 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第3天