TS学习笔记

一、创建TS   

  1.介绍

ts是以JavaScript为基础构建的语言

  2. 安装

npm i -g typescript

tsc //测试是否安装成功

  3.使用

1.创建ts文件
2.在命令行执行 tsc 文件名 //编译ts文件成js文件

二、语法介绍

  1.基本数据

    1.1类型声明

类型声明是TS非常重要的一个特点
通过类型声明可以指定TS中变量（参数、形参）的类型
指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错
简而言之，类型声明给变量设置了类型，使得变量只能存储某种类型的值

    1.2使用

定义
let 变量: 类型;
let 变量: 类型 = 值;
function fn(参数: 类型, 参数: 类型): 类型{}

使用
let a: number //声明一个变量a,同时指定类型number
a = 1

let b:string = '123'//声明一个变量b并直接赋值
let b = '123' //变量声明和赋值同时进行,可以省略类型声明


function fun1(cc: number, dd: number): number {
//cc: number 参数1:数值型
//dd: number 参数2:数值型
//第三个number 表示返回值为数值型
  return cc + dd
}
const res = fun1(123, 234)
console.log(res)

    1.3参数类型

类型	描述
number	任意数字
string	任意字符串
boolean	布尔值true或false
字面量	限制变量的值就是该字面量的值
any	任意类型
unknown	类型安全的any
void	没有值（或undefined）
never	不能是任何值
object	任意的JS对象
array	任意JS数组
tuple	元素，TS新增类型，固定长度数组
enum	枚举，TS中新增类型

      1.3.1使用

number

let decimal: number = 6;

boolean

let isDone: boolean = false;

string

let color: string = "blue";
color = 'red';
​
let fullName: string = `Bob Bobbington`;
let sentence: string = `Hello, my name is ${fullName}.

字面量

// 只能赋值10
let a1: 10
a1 = 10
​
// b1只能赋值'max'或'min'
let b1: 'max' | 'min'
b1 = 'max'
b1 = 'min'
​
// c1只能赋值给string或number的值
let c1: string | number
c1 = 1
c1 = '123'

any

// any 表示任意类型的值
// 使用TS时，不建议使用any类型
// 声明变量不指定类型，则TS解析器会自动判断类型为any(隐式any)
// 类型为any的变量赋值给其他类型时不会报错
let aa: any
aa = 1
aa = true
aa = 'dd'

unknown

// unknown 表示未知的值
// 类型为unknown的变量不能直接赋值给其他类型时,否则会报错
let aa: unknown
aa = 1
aa = true
//如果想给其他类型赋值就可以先判断在赋值，就不会报错
let bb: string
if (typeof aa === 'string') {
  bb = aa
}
//类型断言可以解决
bb = aa as string
bb = <string>aa

void

//void 用来表示空，函数中设置就表示没有返回值
function aa(): void {
  console.log(123)
}
aa()

never

// never 表示永远不会返回结果
function aa(): never {
  throw new Error('报错了')
}

object

//object 表示一个js对象
let obj: object = {};
​
// {}用来指定对象中可以包含哪些属性
// 语法 { 属性名:类型,属性名?:类型,[xxx: string]: any}
// 属性：?表示可选属性   [xxx: string]: any 表示可以有任意属性
let b1: { name: string; age?: number }
b1 = { name: '123', age: 1 }
let c1: { name: string; [aa: string]: any }
c1 = {
  name: '123',
  aa: '123',
  bb: 123
}
​
// 设置函数结构的类型声明
// 语法 (参数: 类型, 参数: 类型) => 类型
let d1: (xx: number, xx1: number) => number
d1 = function (n1: number, n2: number): number {
  return n1 + n2
}

array

let aa: string[] //表示字符串数组
aa = ['123', '234']
​
let bb: Array<number> //表示数值数组
bb = [1, 2, 3, 4]

tuple

let aa: [string, string] //表示只存在两个值都是string类型
​
aa = ['123', '234']

enum

enum Gender {
  Male = 0,
  Female = 1
}
let aa: { name: string; gender: Gender; na: Gender }
aa = {
  name: 'cc',
  gender: Gender.Male,
  na: 1
}

    1.4类型断言

bb = aa as string
bb = <string>aa介绍
有些情况下，变量的类型对于我们来说是很明确，但是TS编译器却并不清楚，此时，可以通过类型断言来告诉编译器变量的类型

定义
	变量 as 类型
	<类型> 变量
	
使用
	let aa: unknown = 'ccc'
	let bb: string
	bb = aa as string
	bb = <string>aa

    1.5. |和& 使用

// | 表示满足其中的一个
let cc: string | number
cc = 11
cc = '22'

// & 表示同时满足
let aa: string & number
let bb: { name: string } & { age: number }
bb = {
  name: 'aa',
  age: 123
}

    1.6. 类型别名使用

type myType = string
let m: myType
m = '123'

type myType1 = 1 | 2 | 3 | 4 | 5
let aa: myType1
let bb: myType1
aa = 1
bb = 2

  2.编辑选项

    2.1自动编译文件

      2.1.1介绍

编译文件时，使用 -w 指令后，TS编译器会自动监视文件的变化，并在文件发生变化时对文件进行重新编译。

      2.1.2使用

在命令行
tsc xxx.ts -w

    2.2自动编译整个项目

1.在根目录创建一个tsconfig.json文件
2.在命令行执行
tsc 或 tsc -w

      2.2.1tsconfig.json配置

{
  //指定哪些ts文件需要被编译
  // ** 表示任意目录
  // * 表示任意文件
  "include": [
    "./src/**/*" //表示所有src目录下的文件都会被编译
  ],

  // 不需要编译的文件
  // 默认值[“node_modules”, “bower_components”, “jspm_packages”]
  "exclude": [
    "./src/hello/**/*" //表示所有src目录下hello目录下的都不会被编译
  ],

  // 继承的配置文件
  "extends": "./configs/base", //当前配置文件中会自动包含config目录下base.json中的所有配置信息

  // 指定被编译文件的列表，只有需要编译的文件少时才会用到
  "files": ["core.ts", "sys.ts"], //列表中的文件都会被TS编译器所编译
    
  // compilerOptions 编译器的选项
  "compilerOptions": {
    // target 指定ts被编译的版本（ES3（默认）、ES5、ES6、ES7、ESNext）
    "target": "ES6",
    // module 指定要使用的模块化的授权
    // 值:CommonJS、UMD、AMD、System、ES2020、ESNext、None
    "module": "ES6",
    // lib用来指定项目中使用的库,默认情况下不用设置
    // 值： 'es5', 'es6', 'es2015', 'es7', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'esnext', 'dom', 'dom.iterable', 'webworker', 'webworker.importscripts', 'webworker.iterable', 'scripthost', 'es2015.core', 'es2015.collection', 'es2015.generator', 'es2015.iterable', 'es2015.promise', 'es2015.proxy', 'es2015.reflect', 'es2015.symbol', 'es2015.symbol.wellknown', 'es2016.array.include', 'es2017.object', 'es2017.sharedmemory', 'es2017.string', 'es2017.intl', 'es2017.typedarrays', 'es2018.asyncgenerator', 'es2018.asynciterable', 'es2018.intl', 'es2018.promise', 'es2018.regexp', 'es2019.array', 'es2019.object', 'es2019.string', 'es2019.symbol', 'es2020.bigint', 'es2020.promise', 'es2020.sharedmemory', 'es2020.string', 'es2020.symbol.wellknown', 'es2020.intl', 'esnext.array', 'esnext.symbol', 'esnext.asynciterable', 'esnext.intl', 'esnext.bigint', 'esnext.string', 'esnext.promise', 'esnext.weakref'.
    "lib": [],
    // outDir表示编译后的文件存在位置
    "outDir": "./dist",
    // outFile 表示代码合并成一个文件
    // 设置完后所有的全局作用域中的代码都会合并到一个文件中
    // outFile只支持module为amd和system
    "outFile": "./dist/app.js"
    // 是否对js文件进行编译,默认为false
    "allowJs": false,
    // 是否检查js代码是否符合语法的规范,默认为false
    "checkJs": false,
    // 是否移除注释
    "removeComments": false,
    // 不生成编译后文件 true不编译  false 编译
    "noEmit": false,
    // 当存在错误时不编译文件 true 启用 false 不启用
    "noEmitOnError": false,
    // 用来设置编译后的文件是否设置严格模式,true 启用 false 不启用
    "alwaysStrict": false,

    // 严格模式的总开关
    "strict": false,
    // 不允许存在隐式的any  true 启用 false 不启用
    "noImplicitAny": false,
    // 不允许不明确类型的this  true 启用 false 不启用
    "noImplicitThis": false,
    // 严格检查空值   true 启用 false 不启用
    "strictNullChecks": false,
    // 严格检查bind、call和apply的参数列表
    "strictBindCallApply": false,
    // 严格检查函数的类型
    "strictFunctionTypes": false,
    // 严格检查属性是否初始化
    "strictPropertyInitialization": false,

    // 检查switch语句包含正确的break
    "noFallthroughCasesInSwitch": false,
    // 检查函数没有隐式的返回值
    "noImplicitReturns": false,
    // 检查未使用的局部变量
    "noUnusedLocals": false,
    // 检查未使用的参数
    "noUnusedParameters": false,

    // 检查不可达代码 true忽略不可达代码 false不可达代码将引起错误
    "allowUnreachableCode": false
  }
}
}