初识TypeScript

一、Typescript简介

官网地址：TypeScript: JavaScript With Syntax For Types.

1、介绍

TypeScript，简称 TS。

TypeScript 和 JavaScript 之间的关系，就像 SCSS 和 CSS 之间的关系，SCSS 是对 CSS 的语法进行了一些扩展，同样的，TS 也是对 JS 的语法进行了一些扩展。SCSS 的代码最终会转换成 CSS 代码运行，同理，TS 的代码最终也会转换成 JS 的代码运行。

TS 是 JS 的超集，因为 TS 对 JS 做了扩展，TS 中有 JS 没有的新特性。

2、为什么要使用 TS

JS 是一门弱类型的语言，很多代码的错误都需要等到代码运行时才能被发现。而 TS 中提供了一套静态检测机制，可以帮助我们在编写代码时就检测出代码的错误。

3、安装Typescript开发环境

在终端中执行以下命令，全局安装 TS

npm i -g typescript

安装完成后，可以执行以下命令查看本机电脑中的 TS 版本号：

tsc -v

4、第一个Typescript程序

编写后缀是.ts文件

let msg:String='Hello Typescript!'
console.log(msg);

5、运行Typescript程序

有两种方式可以运行Typescript程序

• 通过tsc命令执行

tsc 文件名.ts

6、监视运行

第1种方式

tsc 文件名.ts -w

第2种方式：使用tsconfig配置文件运行TS

tsc --init

命令执行完成后，会在同级目录中生成一个 tsconfig.json 的配置文件。

点击 VSCode 顶部菜单栏中的【终端】-【运行任务】-【typescript】-【监视】。配置完成后，后续我们只要在 tsconfig.json 配置文件所在目录范围内，更改 .ts 的文件代码，都会自动编译出同名的 .js 文件。

二、tsconfig.json配置文件

1、include

指的是哪些文件会被编译，它是一个数组，符合数组规范的文件都会被编译

"include":["./src/**/*"]

• ** 的意思是任意文件夹，或者没有文件夹

• * 的意思是任意文件

2、exclude

有些时候我们不希望把所有的文件都编译，和 include 相对应，我们需要使用 exclude。比如，你的 src 下有一个文件夹叫 mock，但是线上发布的时候你并不希望把它也进行编译，于是，你配置：

"exclude":["./src/mock/**/*"]

3、compilerOnSave

compileOnSave 属性作用是设置保存文件的时候自动编译，但需要编译器支持

4、compilerOptions

3.1、target

target 的意思是把 ts 文件编译成哪种低级的 js 版本，比如说你配置 "target":"es2015"的意思是，你想把这个 ts 项目编译成 es2015 这个版本。

可选版本：es3、es5、es6、es2015、es2016、es2017、es2018、es2019、es2020、es2021、es2022、esnext

• 其中 es6 就是 es2015

• 然后后续的 es2016 对应的就是 es7 依次类推， es2019 对应 es10

• esnext: 一个动态的概念，指的是ECMAScript` 的下一个版本，指当前最新发布的版本。

3.2、module：

指定编译后代码使用的模块化规范

3.3、removeComments

移除代码中的注释

3.4、strictNullChecks

开启null、undefined检测

3.5、outDir

指定输出目录

3.6、forceConsistentCasingInFileNames

引入时强制区分大小写。

3.7、noFallthroughCasesInSwitch

官方文档写，阻止 switch case 语句贯穿，它的含义是，你的每一个 case 都要有 break

三、数据类型

1、定义变量的语法

let 变量名: 数据类型 = 初始值

2、数据类型分类

• 基础类型

• null和undefined

• any类型

• void

• 数组

• 元组

• 对象

• 枚举

3、基本数据类型

• 数字 number：TS 中不管是整数还是小数都属于 number 类型；

• 字符串 string：单引号、双引号、ES6 的模板字符串都属于 string 类型；

• 布尔值 boolean：true 和 false；

let var1:number=10
let var2:number=20
let var3:string='hello'
let var4:string='world'
let var5:string=`hello Giles,I am ${var1}`
let var6=true

4、null和undefined

TS 中的 null 和 undefined，跟 JS 中的一样，null 类型下的数据只有 null 本身，undefined 类型下的数据也只有它自身。

let a:null=null
let b:undefined=undefined

5、any类型

any 表示任意数据类型，意味着我们可以将任何变量都设置成 any 类型。

let anyvar1:any=10
let anyvar2:any='Hello'
anyvar2='world'

6、void

void 从概念来说，刚好和 any 相反，它表示没有任何类型。

通常，当一个函数没有返回值得时候，我们会将返回值的类型设置为 void：

基础语法：

function 函数名(): 返回值类型 {

}

示例代码

function init():void{
    console.log('初始化方法init');
}
init();

5、数组

TS 中要求数组中所有元素的数据类型必须一致，因为我们在通过 TS 定义数组时，必须先声明数组中子元素的数据类型。

基础语法：

let 变量名: 子项类型[] = 数组值;

示例代码

let names:string[]=['西施','貂蝉','王昭君','杨玉环']
let arr:(string|number|true)[]=[23,true,'giles']	

6、元组

元组类型，允许创建一个已知数组子项的数量和类型的数组，数组中子项的类型可以不一样。

基础语法：

let 变量名: [类型一, 类型二] = [值一, 值二];

示例代码：

let i: [number, string, boolean] = [1, 'a', true];

7、对象

基础语法：

let 变量名: { 属性名一: 数据类型, 属性名二: 数据类型 } = { 属性名一: 值, 属性名二: 值 }

示例代码：

let j: { name: string, age: number } = { name: '张三', age: 20 }

8、unknow

unknow 是 TS 3.0 中新增的类型。它和 any 类似，任意类型的数据都可以设置为 unknow。

示例代码：

let k: unknown = 1;
let l: unknown = 'hello';

unknow 和 any 的区别在于：

任何类型的值都可以赋值给 any，同时，any 类型的值也可以赋值给任何类型。

let m:any = 1;
m = true;
let n: string = m;

任何类型的值都可以赋值给 unknow，但是，unknow 类型的值只能赋值给 unknow 或 any。

let o: unknown = "a";
let p: any = o;
// let q: string = o; // 报错

9、枚举

• 什么是枚举

• 基础语法

enum 自定义名字 {
    含义 = 数字一,
    含义 = 数字二,   
}

数字枚举

enum gender{
    MALE,
    FMALE
}

默认从0开始自增，也可以人为进行修改，修改后也呈现自增

enum gender{
    MALE=3,     //3
    FMALE       //4
}
字符串

枚举

enum gender{
    MALE="女",
    FMALE="男"
}

四、函数

1、基础语法

JS 中创建函数分为两种方式：声明式函数、函数表达式。

• 声明式函数

在JS中函数声明的语法

function 函数名(形参名){
 	return 返回值   
}

在TS中声明式函数的语法

function 函数名(形参名:数据类型):返回值类型{
    return 返回值;
}

• 函数表达式

在JS中函数表达式的语法

const 变量名=function(形参名){
    return 返回值;
}

在 TS 中函数表达式的语法涉及到变量的赋值，因此，TS 中函数表达式的语法分为以下几种情况：

1）只约束参数和返回值的类型

const 变量名=function(形参名:数据类型):返回值类型{
    return 返回值
}

2）只约束变量的类型

const 变量名:(形参名:数据类型)=>返回值类型=function(形参名){
    return 返回值
}

3）约束参数、返回值以及变量的类型

const 变量名:(形参名:数据类型)=>返回值类型=function(形参名:形参类型):返回值类型{
    return 返回值
}

通常，约束了变量 的类型，就不需要再去函数中约束参数和返回值的类型了。形式一和形式二任选其一即可。

2、函数参数

• 基本类型的参数

function foo(name:string,age:number){
    console.log(`我叫${name},今年${age}岁`);
}
foo("Giles",38)

• 参数为数组

function foo(ary:number[]){
   console.log(ary);
}
foo([1,2,3,5])

• 参数为对象

function foo(params:{name:string,age:number}){
    console.log(params);
}
foo({name:'Giles',age:38})

• 参数的默认值

function foo(name:string,age:number=30){
    console.log(`我叫${name}，今年${age}岁`);
}
foo('Giles',39)

注意：通常将带默认值的参数放在所有形参的最后。

• 可选参数

可选参数，指的就是当前参数可以传也可以不传：

function foo(name:string,age?:number){
    console.log(`我叫${name}，今年${age?age:18}岁`);
}
foo('Giles',39)
foo('Giles')

• 不定参数(剩余参数)

形参中在参数名的前面加上 ...，该参数就变成了不定参数。不定参数的值永远都是一个数组。

function foo(a:number,...b:number[]){
    console.log(a,...b);
}
foo(1,2,3,4,5,6);

3、函数的返回值

• 基本类型的返回值

function sayHello(name:string):string{
    return `Hello ${name}`
}
console.log(sayHello('Giles'));

• 返回数组

function foo():number[]{
    return [1,2,3]
}

console.log(...foo());

• 返回对象

function foo():{x:number,y:number}{
    return {x:1,y:3}
}
console.log(foo());

• 没有返回值

function foo():void{
    console.log('hehe');
}
foo();

4、箭头函数

const add=(x:number,y:number):number=>x+y;
const add:(x:number,y:number)=>number=(x,y)=>x+y;

类型推断：函数的返回值

五、类型断言

有些时候我们会遇到一种情况，我们开发者比 TS 更清楚某一个数据的信息。

例如某一条数据 TS 检测出来该数据的类型可能会有问题，但是我们作为开发者，我们确定当前数据的类型，然后我们就可以通过断言的方式，告诉 TS：相信我，我知道自己在干什么。

1、基础语法

类型断言有两种语法：<> 和 as。基础语法格式如下：

<数据类型>变量名

变量名 as 数据类型

除了语法不同外，<> 和 as 没有任何区别，但是因为在 React 中 <> 语法会与 JSX 语法出现冲突，所以更推荐使用 as。

2、示例代码

let someValue: unkown = "this is a string";
let strLength: number = (<string>someValue).length; 

另一个为as语法：

let someValue: unkown = "this is a string";
let strLength: number = (someValue as string).length;

六、联合类型

联合类型，指的就是我们可以将多个数据类型通过 | 联合成一个整体。类似于 JS 中 || 运算符的作用。

基础语法：

变量名:类型一|类型二|类型三

变量的值只要满足联合类型中的其中一个类型即可。

let var_1:string|number;
var_1=23;
console.log(var_1);

七、类型别名

类型别名，指的是可以通过 type 来给某一个类型取一个新名字（但不会创建一个新的类型），常用于联合类型。

基础语法：

type 别名 = 类型;

通常建议别名的首字母大写。

案例代码1

type Params=string|number
const a1:Params=10;
const a2:Params="giles";
console.log(a1);

案例代码2

type Fn=(x:number,y:number)=>number;
const foo:Fn=(x,y)=>x+y;
console.log(foo(2,1));